I'm in the process of making a project (website) and I needed some advice. My plan is to use NodeJS with the express webframework. I want to make this website really user friendly and nice just like everyone wants their website to be. The problem is that I might not be the most artistic meaning what I might think is artistic might actually not be artistic. My plan was to use Twitter bootstrap but I was scared of the response time of my website if I use bootstrap on my website. I feel like it might slow the response time of my website.
Is this true? Should I just stick to CSS + HTML to make it unique on my own or are there any other frameworks?
Thanks
If You add Twitter Bootstrap Framework from CDN, for example: http://www.bootstrapcdn.com/ there is a chance that people around web will have it cached by browser. But still, this framework is big (a lot of kB) and imho:
Pros:
maintenance is easy (complex documentation), so if You work in team with many people, it's easier to do it with any kind of framework
Bootstrap is large but customizable. You can get only some of JS plugins, and if You disable (for example in LESS version) some CSS stuff, it will be smaller
it's popular - cache advantage
Cons:
List item
big size and can affect page speed time
Related
Context: Ok so I am building a website for a friend. Hes a designer with a high need to daily include his projects (images and text).
Problem:
Ok so I know pretty much how to code in html/css/javascript a front end responsive website, that is the easy part for me, the hard one is the content page. I've never done it so I don't know the best way.
A page that he goes daily put a new project, new images, formatted text (A like a blog). But since he doesn't know anything about coding and front end, it has to be simple enough for him to understand.
Resources: I made several searches and found some websites that allow custom templates with content, one of them standing is wordPress (haven't used it for years). I am currently abusing tumblr for that matter, but their support is quite bad. Should I use one, should I buy a host like bluehost and create my self one, what you guys recommend? I tried google it but perhaps I am not doing it the right way since I am not finding any answer to my problem.
Look, you've come to a programming website, so the most common suggestion you'll get here, and the option I myself recommend is:
MAKE IT YOURSELF!
It really is a fun and very educational experience.
There are many, many ways to do this. In general you'll want to have a front end that communicates with a back end API.
For the front end, there are a lot of options. From templating engines like Jekyll, to MVC frameworks like Laravel, to full fledged high level abstractions like Angular and React, which are admitedly harder to learn but so, so robust, and useful once you've figured them out.
The selection of tools you can use to make the API that supports the website is just as rich. There is ASP.NET for C# (which some people use for the front end as well but I wouldn't), there is Node.JS for JavaScript, with a myriad of libraries and packages to get you started. Flask is a popular option for Python. The list goes on and on.
Oh and dont forget about Ruby on Rails.
As for the interface which your friend will use to add their work, turning all that complicated back end into a simple, easy to use interface is a fundamental part of UX design and, IMHO, quite satisfying once you get it right. Make it sleek and, most of all, intuitive. One shouldn't have to be taught how to use it. It should be apparent from the first time they open the page. You should always ask for their feedback as you are developing it. Some even opt to create mock ups of the interface, in order to get feedback on both its aesthetics and its intuitiveness before a single line of code has been written.
Now, regarding how you'll actually do it, the answer really depends on the tools you opt to use. In general, you'll want to read up on things like the MVC pattern, or React's component architecture. The former is something you'll come across on a wide variety of platforms. The latter is mostly React specific, but in my opinion, understanding how to properly build a website using component architecture means you're in the right mindset, something that will help you no matter how you choose to build it.
All that being said...
Web development is complicated. Creating dynamic websites is a much larger undertaking that designing a static page, or even making an SPA. Though I do wholeheartedly recommend you do it at some point, starting with your friend's website might not be the best idea. Or, you may simply not have the time to sift through all your options, figure out which is best for you, begin the learning process etc.
In that case, there are plenty of publishing frameworks and tool sets to choose from. Wordpress has become very popular in the recent years, and templates and plugins for it are abundant. Alternatives like Medium and Ghost have also gained some traction.
There are plenty of commercial CMS type frameworks. One I have heard good things about is ExpressionEngine. However, I cannot speak for it with certainty.
If you are looking for a website builder, there are also plenty of options out there such as Weebly, Wix, as well as Squarespace. Google sites is a relative newcomer in that department, but seems promising.
So, in summary,
I wholeheartedly recommend building it from scratch. There are many, many languages, frameworks, and tools out there you can choose from, each with its own patterns, best practices and idiosyncrasies. If you lack the time, or simply don't feel like going through that process of building a dynamic website from scratch, you can use one of many tools available. However, that wouldn't be nearly as much fun, and would likely produce an inferior result.
I have designed my website to optimize the above the fold content by only using a tiny fraction of the twitter bootstrap framework above the fold of my site, then using some of the rest of it below the fold.
I used a floating nav bar that shrinks, some elements from the container class and that's all the twitter bootstrap content that's loaded above the fold.
I was wondering could I edit the bootstrap.css file to take out those portions and inline them in the head of my html page, then defer the loading of the rest of the css since I don't need it so fast.
My question; is it possible to edit the twitter bootstrap and just strip off the necessary parts to load first without wrecking bootstrap?
These are micro-optimizations which are only going to cause you headaches for very little, if any, benefit.
Unless you have a website which is serving millions of users a day or is displaying tonnes of content at once (and I really do mean tonnes, in which case, simplify your site!) you will see no real benefit with what you are proposing.
What you can do is be clever about what you optimize and how. For a start, if your entire site is only using certain portions of Bootstrap (i.e. you never use Modals), make a custom build of Bootstrap from their website with the stuff you don't want stripped out. This will give you a smaller set of files and therefore you'll send less down the wire to the user, speeding up your site.
Alternatively, if you are using large amounts of the library you could just use their existing CDN (content distribution network). This will serve the js/css files from a single url that many people are using, which has the double benefit that you don't have to serve any content from your own server, just link to someone elses, and also there's a good chance that if the user visited a site that has used that same CDN their browser would have cached it, making it appear without any network calls. Now that's speedy!
In the end, there are a whole host of things you would be better tasked at optimizing before even thinking about this kind of thing. I recommend you take a good look at the YSlow plugin and best practices. There are loads of things there that you can do to optimize your site without hacking apart Bootstrap just for 'above the fold' content.
I am an intermediate level web designer & web developer. I built 5 official websites for hotels and not only, until now(2 years experience). But I have an uncertainty.
Should I use an already coded template like this for building the next websites? I already did 1 website with that great template and it saved me a good amount of time. My fear is that without that template, I don't have excellent skill for coding components like navbar, footer, making a page element to stay on the page in the position I want, etc.
I'm almost always copying code snippets from the net, let's say not coding from scratch.
My thought is: hey, you're using a template, you're not a real web designer/developer. I was thinking to only use bootstrap + wordpress, but if I use that CANVAS template( it already has lots of bootstrap components coded, css and javascript for almost any situation ) it would save me even more time.
What do you say, guys, what should I do ? Thank you !
Whatever it takes to achieve your objective in the fast manner and have quality output should be your way forward. I would not worry about purism of solutions used as the objective. When you need it, you will know it - as the time will come when you know this template is not enough, then you can go back to custom solutions. Ultimately no one can handle every aspect of the development, using open source, libraries and frameworks is nowadays a skill in itself. Reapplying easy modules will help you to focus on other crucial elements of your app ( move to mobile, speed, additional functionality etc.)
Gist:
I am entrusted with a task to create a website for an app. The website is more or less static and will have very little interaction with a Database. It is basically used for informative purposes and also to allow users to purchase virtual stuff for the iPad app. The website may or may not be migrated to Wordpress.
Question:
1.Given the above scenario what would be the best practices to follow moving forward, so as to keep the website flexible.
Am I right in saying that the migration can be easy, esp for the static pages, by creating a new Wordpress theme?
How much time should (just give me a approximate) the website take?
It is my first website and I really want it to be good, esp since the iPad app being developed is looking pretty awesome.
Thanks a ton.
It is definitely not going to be a cut and paste job. Wordpress' intended use is serving dynamic content and is heavily "templated out".
You can easily create static pages but they may not jibe with your theme without a lot of elbow grease.
Basically you have to decide whether to jam your content into a theme, or create a theme around your content. I highly recommend starting with wordpress and a specific theme, and customizing from there. It's the path of least resistance.
How long this will take is too hard to call. Depends on the amount and complexity of content. Also on your skills and familiarity with HTML+CSS and wordpress. I would not underestimate this task.
Apples and oranges, I'm afraid. As with any CMS headers, navigation and footers are usually generated using a templating system. There is no such equivalent in a static site.
I've been working on re-designing a website for a client and I'm trying to figure out the best approach for making my clients new website as responsive as possible, without jepordizing his good search engine rankings. The client wants to add a bunch of new content to the website as well as a few new pages. The current website uses transitional html and the new website is going to need some html5. I'm tempted to use a responsive framework like bootstrap for the new design but my concern is completely screwing up his good rankings when I launch the new website. Another thing that I'm trying to take into consideration is that the existing website is an old dreamweaver template. A lot of the markup and code kind of sucks for lack of a better term. It would be a lot easier for me to maintain completely fresh files. But again, I don't want to mess up his rankings. So would it be better to start fresh and hope for the best when I launch, Or would it be better to remove the content that he doesn't want, add the new content, and maybe add a couple of media queries? Or is there a better approach?
It's the content that got him where they are in the rankings so as long as it remains you won't have much to worry about
If the old HTML was poorly written, using more semantic HTML should help their rankings as it will give the search engines a better understanding of their content's weight and meaning. Using microformats would be a good thing as well.
If you change URLs make sure to do 301 redirects so all of the links they've earned will be "passed" to their new URLs. Also submit an XML sitemap so the search engines are aware of the new URLs.
Regardless of what you do when you make the change there will be a fluctuation in their rankings. This is normal. Be patient and wait at least two weeks before panicking if their rankings don't return.
Make sure to monitor Google Webmaster Tools after making the change to see if any errors are reported after you make your switch (404 errors will occur if you change URLs and that's ok)
Read this article: How to Turn Any Site Into a Responsive Site. It may make your life easier.
If the core markup of the content is semantic and structured properly, you could do pretty much anything you want and your ranking should not degrade. If anything it will most likely improve. Also if the content itself is mostly unchanged then you're safe.