[ http://tier10lab.com/2012/11/15/5-reasons-responsive-design/ ] Responsive web design is a methodology that incorporates flexible layouts, images and CSS media query components. Through the use of media query "breakpoints," the CSS can detect the current screen size of the browser. This guarantees the design functions correctly at any screen size ...
1. 5 Reasons to go Responsive
http://tier10lab.com/2012/11/15/5-reasons-responsive-design/
November 15, 2012
By Tommy Welti
Notice something different with our site? We just completed a full redesign of Tier10Lab, featuring a new
responsive layout. What is responsive and why did we choose this style verses the traditional 980 grid?
Let me explain.
The landscape for browsing the web is on the move, gradually migrating and melting like colossal
glaciers, from their static mountain tops (desktops) to irregular creeks, streams and rivers (mobile) below.
Mobile browsing has increased nearly 2,000 percent in the past 4 years and is projected to take over
desktop browsing usage by 2014.
In conjunction with this shift, technology/device manufacturers have reacted by building a multitude of
mobile devices only adding to the infinite number of screen resolutions for which designers need to
accommodate. It's not feasible for a designer to create unique websites for all of these devices as they
have done in the past with the "mobile version" or "iPhone version" of a website. So what's the answer to
this mounting issue? There needs to be a solution that covers all device sizes and screen resolutions
without breaking the bank, something that reacts quickly and favorably to its device's specifications.
As these conventional glaciers steadily melt, they form water, which flows into valleys, rapidly conforming
and adapting to the landscape around it. The water continues to flow regardless of what stands in its way,
constantly changing its shape. Websites of the future must function in this same manor, reacting instantly
and favorably to the devices on which they are served. Being responsive to any situation is becoming the
new standard.
2. Responsive web design, or adaptive design, is a methodology that incorporates flexible layouts, images
and CSS media query components. When combined, they create an experience custom tailored to the
viewer's screen size. Through the use of media query "breakpoints," the CSS can detect the current
screen size of the browser and display the corresponding layout. This guarantees the design looks and
functions correctly at any screen size. Microsoft has recently redesigned its website to incorporate this
new process, as well as Jack Daniels, The Boston Globe, Smashing Magazine and Mashable
[http://beta.mashable.com], which recently posted an article introducing its new responsive layout now in
beta. Disney, Nike and Sony have all switched over to responsive layouts, as well.
Many websites still incorporate Flash in their websites, which if you haven't heard, is not supported on
many mobile devices including all Apple products, including iPhone 4S, iPhone 5, iPad with Retina
display and the iPad 2 not to mention many Windows phones and tablets. In order for these companies to
achieve a similar user experience across desktop and mobile their designers and developers have to do
even more work to fulfill this need. Furthermore, there are many websites that also have a 'mobile' version
of their desktop website to serve their mobile clients to not allow for a broken user experience with the
need to pinch and zoom on their mobile devices. The only issue with this is now you have two websites
with mirrored content, which means twice as much maintenance and cost.
If you are not sold yet, here are 5 reasons why responsive design is a must have for your website:
1. Consistent User Experience: Viewers get a great looking website on their desktop, laptop,
tablet AND smartphone
2. Less Work: With only one website to update, your designer and developer have more time to do
other things
3. Better SEO: Google recommends a responsively designed website because it is more efficient
for its link algorithm crawlers to work with than traditional or mobile sites.
4. No More Apps: You can now serve all your content to viewers and it no longer needs to be
modified into a mobile version or even an expensive app.
5. Future Proof: As mentioned previously, the mobile and tablet market is exploding with new
devices everyday. With a responsive layout, you no longer have to worry about creating a new
version to accommodate for the newest, most popular device.
So what's next? Thinking beyond HTML5, CSS3 and even responsive layouts, what does the future hold
for us? With more and more devices being introduced to the market every day, we as a society are going
to become accustomed to viewing correctly formatted content on our devices. In a few years, if you
haven't adopted the responsive way of life, you are falling behind. We are headed toward a more content
driven society. Everyone will have a cool-looking, functional site, but the new line in the sand will be the
depth, detail and truth to the content that is being served on your website. Rich, dynamic content is the
future of the web, and a designer's goal is to serve the best-looking and functional experience to viewers
in any and every situation. Through the use of responsive design, viewers will be assured they are
receiving the best experience possible.
http://www.Tier10Lab.com
http://www.twitter.com/Tier10Lab
http://www.facebook.com/Tier10Marketing
http://www.Tier10Marketing.com