The Root of Mobile First and Responsive Web Design

It 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.

Give Your Website The Best Foundation

To those of you who have read the FoundationSeries by Issac Assimov will find it easy to relate to the idea behind the popular CSS Framework by ZURB, Foundation. It was a path breaking creation in the field of open-source responsive frameworks. In Assimov's Foundation, the protagonist HariSeldon predicts the fall of Galactic Empire and start of a new era likewise ZURB recognized the fall of traditional frameworks and the need of a responsive CSS Framework. Thus became the pioneer of open source responsive frameworks.

Up with the new product Foundation5 which as claimed by ZURB is their fastest and easiest version of the same CSS Framework. The claim of being the most advanced responsive framework doesn't seem far-fetched when you look at its various features. I mean the developers have honestly put their heart and soul into Foundation5 to make it as future friendly as possible. Take a peep inside the new version and learn the truth yourself :-

• Built well optimized, aesthetic and faster web pages, inserting animation is not a problem after-all.
• The Sassy CSS or SCSS is simply SASS built with CSS attributes. It allows more flexible, dynamic and user friendly styling of the web page.
• The code is simple and clean, and the new medium grid and custom semantic breakpoints allow to code for any device swiftly.
• New and improved documentation to help you understand it easily and the "getting started" guide will do the rest, if not, you have the community forums.
• Well, the new Foundation 5 boasts new features and add-ons to make the front-end development easier and fun, but how?
  • Interchange : It lets you load different part of websites in correspondence to the media queries or the device in question. Simply, the same content will load differently for different grid size.
  • Off-canvas: Makes the menu pattern easier to code. It is usually out of the viewport and comes in smoothly when clicked or the cursor is placed.
  • Forms : Create forms even more versatile and flexible. In Foundation 5 Forms are built with the default elements as well as with the grid settings.
  • Magellan: With Magellan sticky nav tool have a website with seamless navigation as it allows you to navigate anywhere irrespective of how much one scrolls.
  • Clearing : Creation of lightbox is easier than ever as this custom plugin allows you to take an image of any size and make your own responsive lightbox.
  • Split Buttons : The introduction of new dropdown buttons plugin has greatly improved the split buttons as it gives you loads of new choices.
  • Typography : As a matter of fact Foundation 5 has come up with promising typographical schemes both beautiful as well as simple. They are bound to enchant you.
  • Dropdowns : This is another mentionable feat of this CSS Framework. It created a universal dropdown plugin for any kind of element be it simple dropdowns or popups.
• Wait, apart from them it contains a whole array of new classier templates to give you a head start in your work.
• Foundation is based on a totally new Sass processor, Libsass which is way faster than your conventional per-processors.
• If all this still boggles your mind then Zurb offers an online as well as on-site training program on Foundation by the very people who made it.

So much data, features, code and design compiled in one responsive CSS framework for your benefit, indeed Foundation5 feels worth every penny, Oh wait! They don't charge for it.