We’ve blogged many times in the past about the importance of having a responsive mobile-friendly website and how it affects your SEO / Google ranking. With Google’s latest changes penalising the ranking of website that aren’t mobile friendly, it’s super important more than ever now to ensure your website is fully responsive.
If you haven’t got a responsive website yet then you should really get in touch right now. No, I’m not kidding, it’s that important. Not having a mobile-friendly website in today’s modern digital era is like having dial-up, and every day without a responsive website will damage your SEO and give your competitors an edge over you.
With all the recent changes by Google, they’ve made it very clear that a huge implication in their search ranking is how adaptive a website is for mobile users. Especially with more and more traffic coming mobile users over those visiting on a desktop, PC or laptop.
Frameworks, save yourself the hard work!
There was a time when I would never rely on a framework and I’d always want to build my own little system that did exactly what I wanted. This was the same with the CSS I produced to style the websites we designed. But as the designs changed and the websites adapted over time, updates became more complicated with more implications for each one. That’s why we started integrating all our websites with frontend frameworks. That way all the dirty work, the helper and utility classes are already implemented and ready to use.
The Zurb CSS Foundation framework was one of the first ones to take the mobile-first approach, where web designers will produce a smartphone experience then move up in the scale of devices, from portable mobile devices up to desktop screens. Pretty standard, but very powerful. Foundation implements a small, medium and large grid targeting custom dimensions for mobile, tablets and anything above that. In fact, Foundation actually has x-large, xx-large and even an xxx-large for them big bad ass monitors!
Foundation has packages for off-canvas navigation, pagination, breadcrumbs, forms, switches, buttons - even tables!
Bootstrap goes hand in hand with Foundation and has a very similar grid system except they define four key points: extra small devices (mobile phones), small devices (tablets), medium devices (tablets horizontally / laptops) and large devices (desktops). Bootstrap is hugely popular across web designers and there’s a great selection of themes to choose from as start templates.
There’s a large development codebase for Bootstrap with some fantastic drop-in plugins such as the Twitter typeahead code for Bootstrap.
Skeleton is a lightweight collection of CSS & JS files that offers a 960px grid layout that scales down to smaller screens on, tablets, mobile phones (in both landscape and portrait). It was one of the earliest responsive boilerplates and still renowned for being one of the best. In contrast with other CSS frameworks, Skeleton doesn't provide any CSS classes instead simply providing you with a simple and light responsive solution.
There’s plenty more to choose from and you can browse our list of lesser well-known frameworks: Popular Responsive Frameworks, Which is Best for You?