Simplehost Web Hosting

Responsible responsive web design

Today we are bombarded in a world full of slick named frameworks which promise the world but in reality do very little. If you a front end developer, that is you work with HTML and design websites you probably have come across a responsive web design framework.

We also now have UX design methodologies, LESS and SASS; CSS preprocessors. This blog post (The problem with CSS processors) should tame some of that hype that has built up recently around these. With anything new there will always be a certain amount of hype as people try it out, review it, try to integrate it but over time the stronger ones inherit the niche features of others and you end up with just a few, sometimes bloated solutions.

I am not trying to say that all these are bad things, just that each one needs to be used, tested thoroughly and reviewed by many before they are truly stable and worthy of that attention. One should not only look at the things it can do, but the things it can't do. Take backbonejs for example, a great idea at first glance, but looking deeper and doing a search for SEO backbonejs and your on your own. This immediately renders it commercially unviable on any public facing site, i.e a shopping cart which is one of the demos they show off. Until search engine bots run JS on a site, these solutions just won't fit right. There are workarounds but they are all pretty horrible and cloaking sites is not going to get you far with google anyway.

Back to the topic then, responsive web design.
What is it? Its not really engineering language, so to translate its a website design pattern which can adapt its style configuration based on screen resolution.
How does it do that? CSS3 Media queries. It looks something like this
@media handheld, only screen and(max-width:767px){ ... custom mobile css }

What support does it have? IE9+ and the rest

There are an infinite number of frameworks out there. If you want big and fairly well documented you have the most popular Bootstrap. Or something more niche but cleaner and arguably better you have Foundation. If you are a minimalist like me and like to start from scratch you have Simple Grid or something in-between Pure CSS. Choose based on project, size and time I guess.

The other important feature of a CSS framework which I haven't covered yet is the Grid style layout which is now very popular. I suppose this is a more standards compliant way of replacing tables but has another benefit which is floats where the box layouts degrade gracefully inline to support a vertical layout on say a mobile device, so instead of elements being displayed horizontally on a big desktop screen, they will stack on top of each other on a mobile device. By combining grid style classes and media queries one gets a very powerful means of resolving display differences between display sizes without resorting to server side browser sniffing and custom designed mobile sites. One of the most common uses for this on current frameworks such as bootstrap, is to show/hide the menu and only show an icon in the corner on a mobile device which will pull out when clicked. Another use is multiple sized images for optimizing load times.

The world is going mobile and depending on the statistics you read, more than 50% of web browsing is now or will be shortly done on a mobile device, so its worth looking into and making your site mobile worthy.

Recent News
Feb 13, 2016

We have deployed PHP 7.0 to selected servers which has up to 4x performance gain on previous versions as well as the most comprehensive language API available. Read More

Feb 08, 2015

Bitcoin payments are now accepted for all hosting products. Bitcoin payments are simple, fast and simple to do on a mobile device. Get your digital wallet today and pay with Bitcoin. Read More