The Past, Present and Future of Responsive Web Design
The humble beginnings of the Mobile.
The Birth - It all started with WAP and frustrated developers providing WML powered sites to even more frustrated users.
The Toddler Years - Palm, Blackberry. Although with severely limited browsers, recognizable devices are starting to get hooked up.
Growing Up - iPhone and many other powerful devices accessing the web with pretty darn good browsers.
Mobile Sites -Great in theory, not in practice.
Advantages of mobile "optimized" websites
Improved UX -Nobody wants to browse a desktop website on their phone. Pinch, zoom and scroll is not the best way to consume!
Better Performance -Remove the fluff and provide the user with what they want, when they want it. Optimized images and asset management can provide huge performance gains.
Engagement & Context -Provide your users with mobile optimized features. Click to call, geolocation, mapping, your mobile users are ready and waiting.
Disadvantages of mobile "optimized" websites - Double the code
By definition you have two separate, although somewhat related, code bases to maintain. Double the work, double the aggravation.
Redirecting your users is a real strain on perceived performance. Before the client can even begin to download your page they must be redirected to the mobile site.
Inconsistent links only worsen this problem. If I share a url from the mobile site and my buddy opens it on a desktop machine, there's another load of unrequired redirects.
The Present Oh Hai Responsive Web Design.
Term coined by Ethan Marcotte coined the term responsive web design in a May 2010 article in A List Apart, this is where it all began.
Fluid grids - Responsive grid systems are built based on percentage widths relative to the viewport, as opposed to fixed pixel values.
Media Queries: Introduced in CSS3, media queries allow us to target device classes as well as the physical characteristics of the device rendering of the page. Max width, min width, resolution, orientation. Media Queries = Happy Developers!
Write once, run anywhere. Device divergence has rendered desktop & mobile an obsolete design pattern
Advantages of RWD - Single codebase Having a single codebase that molds to each client makes maintaining your application 100 times easier and makes development way more efficient.
All devices are equal You have a single application served up to all clients, only the CSS changes. No longer are mobile users punished for being mobile users, they get your app in all it's glory.
Better SEO -Your one application has one sitemap and one set of urls. One set of urls for users to share and one set of urls for you to optimize and Google to crawl all over.
Disadvantages of RWD - Massive Images
To be truly responsive we must adapt to the needs of the individual