I can’t remember how many times I have explained to clients and prospects, about responsive design, and, the way to approach a mobile version of a website. As we evolve, the use of mobile for web is growing in a very fast pace, and, being ready for it is a must.
Our job as web designers is to educate our clients and open their eyes to the benefits of responsive design. But, when you explain to a person who doesn’t know much about the web, it needs to be broken down to the basic principles. Here is how I break it down to my clients.
Designing a Mobile Version
There are a few options to mobile design, but, the best and most used approach is called “Responsive Design” (also called Adjustive Design).
What is Responsive Design?
It’s simply a design that adjusts to any size screen, so the website will look correct no matter what device the user is using (phone, tablet, laptop, desktop, tv, …) The user experience will always be a great one.
How is it done?
This type of design is done by using responsive techniques to code the website so it can adjust according to the size of the screen. That way it is not specifically designed to a certain phone or device, it supports any current devices, and, any future ones to come. With this approach any update made on the content will automatically look perfect in any device.
Responsive Design Samples
It’s not necessary to visit a website on your phone to check if it’s responsive, resize your browser window and check how the layout reacts to it. Here is very simple sample I’ve made to help you understand better how the adjustment occurs without breaking any of the content.
Responsive Design Sample
Other great sample of responsive design are:
Why Mobile Design?
Check your statistics, and find out what’s the percentage of visits you get from mobile/tablet devices. Compare that to the previous months to see if there’s a monthly. That should tell you why a mobile version is necessary. Sometimes a great amount of traffic comes from mobile devices, and that’s the amount of your visitors struggling to navigate and read the content of your site.
Interested in a Mobile version of your site?
If you are interested in finding out more about it, or, have any questions feel free to contact me for further assistance.
Nice article.
Bit of a shame your wp theme isn’t responsive.
Great read, man. Responsive design is the future of web design and is here to stay. I would love to learn how to design one.
Responsive design is something that an be tough to pull off. You can’t just take a site and squash it to Responsive. The change takes place at a content level, an information architecture level, a development level and a design level.
Take a large image for example. In a responsive design, a mobile device will have to download that entire image. Not too great for smartphones with slower connections and with users paying for their data. Just because you can use the latest WebGL, CSS3 doesn’t mean you should. Browsers, devices, and OS’s all have their own quirks. We need to put the user first and make our websites future friendly.
The Filament Group is making some huge strides in doing responsive design responsibly. If your into code, check them out:
https://github.com/filamentgroup/Southstreet