This is the first post in a series about Responsive Web Design, described in plain language from a front end designer. Responsive Web Design has recently become a hot topic in the web design and development community. For those of you who are new to this term, responsive web design is a way of creating websites so they are able […]
This is the first post in a series about Responsive Web Design, described in plain language from a front end designer.
Responsive Web Design has recently become a hot topic in the web design and development community. For those of you who are new to this term, responsive web design is a way of creating websites so they are able to adapt for optimal viewing across a variety of devices. Though the practice is relatively young, it is quickly being adopted as an industry standard–and for good reason. Practicing responsive design can help you connect with your audience, stay within budget and as we like to say here at Social Driver, Get With The Future.
1. Connect With Your Audience
In order to connect with your people on the web, you have to first understand how your audience is accessing the web. I could probably sum up the modern web environment with two words: “mobile explosion.” This may conjure very interesting mental images, but let me explain my word choice with the following stats:
- Today there are about 1.2 billion mobile web users around the world according to a 2012 study by MobiThinking.
- A growing number of these users never browse the web on a laptop or desktop computer. According to the same study, 25% of mobile users in the U.S. are mobile only–meaning they rarely ever browse the internet on a desktop or laptop computer.
- In 2010, Morgan Stanley produced an 87 page report charting current internet trends and forecasting the future of web. They predict that mobile web browsing will overtake desktop internet usage by 2015. Microsoft Tag forecasted in 2011 that this would happen in 2014.
Do you consider yourself an awesome developer?
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
- Smart Insights has a more conservative outlook, but still expects mobile data traffic to increase 26-fold by 2015.
- According to the Global Mobile Workforce Report by iPass, in Q1 of 2012 the average mobile worker carried 3.5 mobile devices. (Graphic Below)?
- Apple CEO, Tim Cook, recently predicted that iPad sales will overtake PC sales by the end of 2012.
Okay, enough stats. What do all these figures mean anyway? In summary, more and more people are browsing the web on mobile devices. And if they aren’t yet, they most likely will be very soon. With the introduction of the tablet, “mobile” no longer pertains only to smartphones or feature phones. The gamut of screen sizes and resolutions has widened. People may be viewing your site on a Samsung Galaxy with a resolution of 480×800, a 768×1024 iPad 2 or a 1080×1920 desktop monitor. How do we create optimal web experiences for people across such a wide variety of devices?
Responsive Web Design helps us do just that, by enabling a website to respond to people’s browsing preferences. The content on the page is formatted and scaled to view beautifully and legibly whether on a tablet, smartphone or desktop monitor. This increases our visibility to our audience and helps us connect to people no matter what device they happen to prefer.
2. Stay Within Budget
To understand the “why” behind responsive design, it’s helpful to understand the status quo. Currently, common practice is to design a desktop/laptop version of a website that will fit well in the minimum screen resolution of a company’s target audience. If the budget allows, the company may develop a second fixed width layout that will view well on most smartphones. While this approach is not necessarily wrong, it has a couple weaknesses.
The first is an increase in development cost and project timelines. Many organizations do not have the budget to develop both a desktop and a mobile site. Programming, designing and maintaining two unique sites often takes more time and therefore more money. Furthermore, not all mobile devices are the same. Tailoring a site to view optimally on an iPhone 4S does not mean it will look good on a Samsung Nexus. And for non-mobile sites, sticking with the good old 960px fixed width site no longer creates an optimal viewing experience on an increasing amount of desktop monitors, who’s resolutions are increasing. That is, unless you like half your browser window to be margins.
By designing responsively you can often save money by creating one website that fits nearly all devices. You will no longer have to worry about managing separate content for your mobile and desktop sites. Now people can access the same content on your website regardless of their device preferences.
3. Get With The Future
While responsive web design is a relatively young practice, it is quickly becoming industry standard. More and more, we are recommending responsive design to the companies we work with. Not only does it help them keep costs down, but it also ensures that their websites will be forward compatible. As pixel densities, screen resolutions and aspect ratios of new devices change, practicing responsive design helps us create websites that will continue to view optimally on them all. In an industry where technology and trends are quickly evolving, it’s important that we’re providing companies with sustainable solutions.
Some companies’ audiences do a majority of their web browsing on desktop computers. If this is true of your company, we think the question to ask is “When does responsive design makes sense for us?” When will enough of our audience follow suite and begin using mobile devices? According to the statistics, the answer is sooner than we think.
Well, we’ve covered the main benefits of responsive web design and you may be curious as to how it works. Don’t worry! I’ve got you covered. Stay tuned for our next two posts, where I’ll dive a little deeper into how responsive design works and we’ll share with you our 20 favorite responsive websites.
Options: Facbeook, Twitter, Linkedin, Pinterest...