Monday, July 29, 2013

Lesson #150: Responsive Web Design for Multiple Devices

Posted By: George Deeb - 7/29/2013

Share

& Comment

In this day and age of multiple devices, mutliple platforms and multiple screen sizes, Responsive Web Design (RWD) has become the web designers' go-to strategy for building web sites.  For this post, I enlisted the help of my colleague, Eric Nardo, the Creative Director at Ora Interactive, whom I am grateful for his deeper education on this topic.

First of all, what is RWD?  It is the process of building your web technologies in a way that it will automatically reformat itself based on the inbound platform a user is using.  This means updating the page width, font sizes, displayed text, navigation bars and other elements to easily and quickly resize and optimize the site for PCs, tablets and mobile phone screen sizes "on the fly".  No longer do you need to build a stand-alone mobile touch sites, or incur addition costs building different versions of your sites for the various platforms.  And, the good news:  it is no more expensive than building non-responsive sites, so there really is no reason not to be doing it.

RWD first hit the stage in 2010, with Ethan Marcotte's book on the topic.  But, it really did not go mainstream until the middle of 2012, when many of the big web browsers started to support CSS3 (since RWD is dependent on media queries using this cascading style sheet technology).  It is now the default preferred solution for any good web design. 

So, if you are not building your new sites, or rearchitecting your old sites, using RWD frameworks, you really need to look for new professional technology assistance, as you may be materially impacting your user's experience on your sites, depending on what devices they are using.  It is critical you customize your user experience to the devices your users are using to optimize the user experience, word of mouth marketing benefits and conversion rates for additional revenues.  All you have to do is look at you Google Analytics data to realize 30-40% of your inbound traffic is coming in via mobile devices today, not PCs!!

The most-popular RWD frameworks come from the Zurb's Foundation, Twitter's Bootstrap and Dave Gamache's Skeleton.  Zurb's is the "grand daddy" of the industry that has the most features and is on the leading edge.  But, it is the most complex and hardest to learn and use.  Bootstrap is the middle grade, with a lot of customizable buttons and menus, too.  But, if you don't think you will use those functionalities, Skeleton, like its name suggests, is a "bare bones" framework for your simplest of needs.  Making it many designer's favorite, given its quick and easy use.  That said, there are scores of other frameworks out there, and you can also try to code this functionality yourself, if you are a good coder.  But, don't re-invent the wheel if you don't have to, with good open source options available out there.

To be clear, RWD does not replace the potential need for developing stand-alone native apps for smart phones and tablets.  Native apps run locally on the device, and do not require connectivity to the web, where performance can be spotty.  And, native apps can directly tap into the device's hard drive, memory, storage, GPS targeting, voice/email/SMS functions and integrate with users' other mobile apps, like their social media connections, where RWD does not.  So, for rich media applications, like gaming, nothing will perform better than a native app.

For further reading on this topic, check out the book "Responsive Web Design" by Ethan Marcotte and this blog post by Pete Cashmore at Mashable. 

If you need any further assistance, or are looking for a professional developer for your RWD needs, Eric Nardo at Ora Interactive is happy to help at eric@orainteractive.com or 312-854-7096.

For future posts, please follow me at:  www.twitter.com/georgedeeb.  If you enjoyed this post, please click the social sharing buttons to share with your social networks.

11 comments:

Nancy Web design said...

You have hit on the bulls eye dude… you article is just amazing and reading it again and again is still not enough. There is some kind of charisma in your article that draws me towards reading it again and again and again….
web design in mumbai

crowd funding platform said...

Hi!
I am here Because i want a comment on your blog.I read your blog, this is so informative and so helpful.

Nancy Web design said...

Just don’t be overwhelmed after reading my comment but I simply could not stop myself from appreciating this wonderful piece of marvel. What a blog…it traverses you to a whole new progressive world.
Web Design Mumbai

Thenextidea said...

Responsive web design is new trend for creating a new website and old websites also need responsive web design for getting better presence on the Internet. We are providing quality web designing services with responsive web design in Pennsylvania
.

garlie charls said...

We design sites keeping in mind the usability, user experience and performance incorporating all the features of a Responsive Web Designbased on HTML5, CSS3 standards and frameworks.

siva s said...


Your post are so informative and includes great tips and you managed to keep it simple and understandable.

Bangalore Web Designing Company | Website Development Bangalore

Catherine Deane said...

Responsive web design is a way of creating websites so that the pages you design display beautifully to the end-user no matter what device they are viewed on which I learn through your blog so thanks for this sharing.


Web design company Johannesburg

Nancy jaee said...

You are a brilliant writer. I actually added your blog to my favorites and will look forward for more updates.

Intrepid

Narender Brainbyte said...

Very Nice Post. I really appreciate with your blog.Thanks for sharing.

website design In Delhi | Software Consulting Services

David Cornish said...

Your blog is really very informative. Responsive design represents one of the greatest benchmarks in modern design. Responsive design allows designers and developers to deploy websites that work on all devices, using a single design and a single code.
Thanks for this post.

tbcreations said...


Thanks for this very useful info you have provided us. I will bookmark this for future reference and refer it to my friends. More power to your blog.
Rochester NY Web Design

Red Rocket is a featured contributor on entrepreneurship for many trusted business sites:

Copyright 2011- Red Rocket Partners, LLC