- Brad Gillis
- Saturday, June 06, 2015
Responsive Web design should be number one on your to-do-list for 2015.
Google started to use mobile-friendly as a ranking factor on April 21st, of this year. Some websites have already seen a change in their ranking, some have gained and naturally some lost ranking. So mobile-friendly sites are already seeing positive results. Bing is not far behind having already announced a similar mobile-friendly strategy is in the works.
As mobile devices grow in popularity the need for mobile-friendly web design will grow proportionally. To make your web site mobile friendly you have to embrace Responsive Web Design. RWD is a technique of designing web pages to respond to the screen size of the device used to view the page.
The alternative to RWD is a Dedicated Web Design site which entails having a mobile and desktop version of your site. Presently, this site has a desktop version and a mobile version and let me tell you that it can be a hassle. There can be a lot of work maintaining a website and keeping it current so having two versions of the same site essentially means twice the work. Dedicated Web Design works but oft times one or other of the versions suffers from neglect because of the work load.
Responsive Web Design involves creating one web site with multiple Fluid Grid Layouts. Which is the long way of saying the web page responds to the screen size of the device that is used to view it. Your web pages become adaptable to the dimensions of the device use to display it. The most common way of designing responsive web pages is to use a framework like Twitter Bootstrap or Zurb Foundation.
Bootstrap claims to be the “most popular framework”. Which is no surprise, considering it was invented by Mark Otto and Jacob Thornton while they were working at Twitter. Bootstrap is much like the name implies. It comes packaged with lots of predefined elements which allow you to put together a web page/site in record time.
It is the Lego set of web designers, all the building blocks come with the software making web designing easier and faster. Because so many of Bootstrap’s elements are predefined it causes the finished web design to often exhibit a similar look to 100’s of other websites.
These predefined elements that make life easier for the web designer has also been cause for some criticism. With so many predefined elements, it has created a style of web site that “looks Bootstrapped.” The framework can be “customized” but it usually requires a lot of work over-riding these pre-sets.
Foundation is tooted as “the most advanced responsive front-end framework in the world.” It actually was the first to arrive on the web scene and address the fluid design problem. But it quickly settled into second place without the influence of a big and popular social media network behind it.
If Bootstrap is the Lego of web design then Foundation is the Erector Set. Foundation is also aptly named because it provides a good concrete basis for a ground up build without the predefined elements.
Without the predefined elements it is easier to customize as there is no need to override the elements. This also has the consequence of giving it a bit faster load speed for web pages as the code doesn’t have the overrides which slows it down. Of course, the integration of “fast click” does figure into the load speed equation.
Both frameworks are excellent tools to build a fully responsive web site. Although, the two frameworks are similar they do exhibit different personalities. If you are building a web site and want a quick solution that provides a good looking design and good functionality then Bootstrap is the perfect solution. However, if you are more inclined to want a “custom” designed website than Foundation would probably be the better fit.
Bootstrap is probably the easier to use especially if you are new to web design for two reasons. One, you can take advantage of the predefined styles to quickly get you up to speed and on the web. Two, there are a lot more tutorials and information on Bootstrap. Foundation, on the other hand, is more geared toward the independent designer that wants to roll their own from the ground up. Although, Foundation is well documented on Zurb’s web site with a liberal number of tutorials but you won’t find anywhere near the amount of tutorials and How-To’s that you will for Bootstrap. So if you go with Foundation plan on digging a little deeper to find your answer to a particular design question.
Choosing between Bootstrap and Foundation is like choosing between a Camaro and a Mustang. They both look good with their own detractors and fans and both will get you there. It can be especially difficult if you have not worked with either because from the outside they are so similar.
But there are subtle differences that cause designers to have a preference of one over the other. I’ll do my best to help you make an informed choice.
The major part of a front-end framework is the grid system. It is the feature that allows the framework to be responsive. The grid resizes and/or shifts position depending upon the size of the device viewing it. This is also the feature that allows designers to rapidly build the layout structure of the design. That is what holds all the parts of the page together in their respective places.
However the syntax for creating a grid system is slightly different for each framework. Both are responsive and mobile friendly but each uses a distinct way of accomplishing it.
Foundation does have a few unique grid features that appeal to some web designers. One is called the “block grid” and it enables designers to evenly position contents of a list in the grid. Another unique feature is the called, “row-collapse” which removes the margin and padding between the columns and rows when you don’t necessarily need or want the extra space.
Themes are web pages that are prebuilt compositions around a topic with a unifying idea or motif. If you are new to coding it can be a quick and easy way to get your web site up and running with a responsive design.
Both Bootstrap and Foundation have multiple themes to choice from to get you started with a responsive web site. All you have to do is swap out the graphics and content for your own. At least that is the theory, in reality you have to dive into the theme to see how it was put together and how the elements interact with each other before you can reconstruct it. So when picking a theme make sure it is built in a straight forward manner that matches your customizing skills.
If you are new to coding and responsive design then I would recommend starting with Bootstrap. It has a larger community of folks using it and more forums where you can find answers if you run into a particular problem in development. Plus there are a lot of free tutorials, You Tube videos and (as I mentioned before) forums to get you up and running with a nice looking Bootstrap web site. The online courses for Bootstrap are also more numerous than Foundation. Bootstrap has more of an all-in-one solution to get you up and running.
When all is said and done, the choice of which framework to use is not an easy decision. There are pros and cons to each framework and it really comes down to personal preference and coding style.
Personally, I prefer using Foundation because I feel the grid system is easier to use and more mobile-friendly. However, I still use Bootstrap when I want to get a website up and running and the “Bootstrap Look” fits into my design concept.
Here is an interesting Chrome App that will tell you which front-end framework is used on a site along with the JS framework and more Wappalyzer.
For more information and tutorials on Bootstrap and Foundation check out the following resources:
Free Foundation Course Check out James Stone’s excellent Foundation Course along with great articles and tips.