The Root of Mobile First and Responsive Web Design

t was before EthanMarcotte had came up with the revolutionary idea of Responsive Web Design (RWD), LukeWroblewski coined the term that would in essence complete the meaning of responsive web design, Mobile First. Like any great philosophy it guided the right idea to the correct path so it can reach its true destination. It is sad Luke Wroblewski is not as appreciated as Ethan Marcotte when he came up with the term an year before the world would know responsive web design.

It can be argued Luke Wroblewski is only talking about making websites for mobile first and it wasn’t about responsive web design. Though on a closer look what he talks about in the article are now the features of responsive web design. His book Mobile First came out in 2011 which actually included the principles and the philosophy behind this idea and how it was the yin for the yang (responsive web design).

Little can be said about mobile first which haven't already been said before. Surely this idea stems from the need to make websites more adaptive, fast and interactive but what strikes the chord cleanly is progressiveenhancement (PE). This technique came up against the aged gracefuldegradation, a technique used to make a website cross browser compatible even in the lesser advanced versions. It employs making a website for a better version first then slowly dumb down the code according to the version of the browser.

Progressive enhancement emerged from the need to make a code which is useful and less cumbersome. Instead of tearing down the code start from the basic and build on it,thus the debate rages on. The need for mobile first approach in responsive web design reflects the need of progressive enhancement.

They both share uncanny similarities

• The code for a website should be first written for a mobile.
• The layout, design and content should be explicitly for mobile- crisp and informative.
• Code for other platforms is built upon the original adding bit and pieces of everything.
• The initial and final design is same in the functionality (an essential aspect of progressive enhancement).
• The thumb rule of mobile first is to make the base code maximum functional and least extravagance as was in PE. This doesn't mean the website looks bad it simply says to remove unnecessary cluttering from the web page.

Progressive Enhancement, mobile first and responsive web design form a close intricate circle where either rely on the power of other two to work. They are the holy trinity of the most modern, aesthetic and functional web design.

Mobile First Made Responsive Web Design More Meaningful

The mobile first approach is the new fundamental unit of web design. Developed over half a decade of observation, contemplation, experimentation and drawing conclusion. It seconds the idea of the rise of mobile phone users hence a rise in mobile internet has to be catered at some point otherwise the desktop and mobile websites would go obsolete in the near future. It has totally changed the way a website looks or is designed.

A decade ago we saw a boom in the mobile phone technology, it was the advent of smartphones. They were becoming popular and prevalent and websites were being made especially for mobile phones. This revolutionized the web industry into a whole new genre and suddenly the accessibility of a smart phone user increased tremendously. The rise in smartphones can also be attributed to rise of mobile websites and vice-versa.

For past few years we have seen a epochal decline in the mobile websites. The question is what happened in the in the later half of the decade?

Responsive Web Design happened.

On May 2010 Ethan Marcotte coined this term to change our and everyone's worldview about websites and other devices on an article on A List Apart. This marked the birth of of mobile first idea.

Everything you need to know

• Responsive Web Designs were necessary because the world was moving out of the desktop.
• New type of devices with various screen sizes like i pads and tabs were being launched so something was required to run websites in all platforms.
• After the concept of Responsive Web Design (RWD) the idea of mobile first approach was developed.
• This came from the already existent idea of progressive enhancement earlier used to write the code of website for various browsers.
• Stemming out from progressive enhancement mobile first approach states to build a code, a design and content for mobile first then slowly build upon it for rest of the devices.
• The sheer brilliance of this idea also compliments the concept of responsive web design.
• The most suited web design, layout and content is sought and coded into a responsive website which will impart all the necessary information to mobile users including all the necessary functions that a desktop user have access to.
• This gave power to the smartphone users and laid down the foundation of a perfect website for other platforms as well.
• RWD proves to be hell of a costly affair but mobile first significantly brought down the cost of building a website.
• Apart from cost effective solutions it reduced the wastage of code created usually moving down the hierarchy.
• Not to mention the amount of time this approach saved for web designers and their employers.

Overall there is overwhelming response of the web design community in the favor of this approach and unless you are on a very strict budget with a very specific need you will definitely end up using this as an ideal tool for your website.

Your website may be mobile ready but is it mobile smart?

People usually think once you have a mobile ready website on the go your business is gonna soar and your revenue will shoot up. To some extent it may happen but it will not happen surely unless and until your website is mobile smart.

Mobile smart? What the hell is this ? Totally plausible question, given the scenario where everybody talks about mobile ready website suddenly someone comes and adds smart instead of website and thinks to bring about a revolution by giving a new term to the web industry is a preposterous notion. Responsive web design is synonymous with mobile ready website, the new lingo of the internet and along comes an evangelist who tries to put new jargon in your head. I would belying if I'd say it wouldn't be my first response but its a matter of curiosity.

But yeah, I would definitely want people to benefit from any information I share especially if it helps them understand how to differentiate between a mobile ready website and mobile smart website. So first you have to understand what does mobile smart website means.

Mobile Smart Website

The design which not only follows the principal of responsive design in code but in philosophy. Every pixel of your design would corroborate this new pattern of web design. It is not merely making your website fit into different screens altogether, it means making your website a state of the art responsive website with such seamless presentation which hooks any user by its simplicity woven in extravagance. It has its own share of similarities and differences from a mobile ready website, to summarize a few :-

• This is not rearrangement of code to fit the web page into different screen size.
• As Ethan Marcotte, the creator of Responsive Web Design, puts it - flexible images, media queries and fluid layouts collectively comprise RWD. This goes even one step further.
• Mobile Ready Website is a bench mark of RWD but, Mobile Smart Website takes it to the next level.
• A mobile smart website is not only a skillful responsive web design but it should appeal in content too. It should grab the attention of end user to make him a possible customer.
• To give the right amount of information, neither too much nor too less is the soul of mobile smart design.
• The core principle differs as it aims to inscribe your brand in the minds of the viewer via your website, making it responsive in the process.
• Less is the new more. Minimalistic art, minimalistic designs, minimalistic information- the art of expressing more with less.
• Remember, every mobile smart website is mobile ready but every mobile ready website is not mobile smart.

So, before you dismiss the notion remember, every great idea was once the fodder for skeptics and non-believers but eventually the idea prevailed. Having said that, many ideas dissolved into nothingness too. What I mean is never dismiss anything without a confrontation or someday you might think “Wish I would've tried it once.”