Since Apple released the iPhone 3 in 2008, mobile usage has grown at an exponential pace. Almost instantly, mobile apps and sites have become one of the most popular trends on the Internet. Everyone wanted a mobile app or mobile-optimized site until tablets came out the following year. With AirPlay and Smartwatch, there is no limitation for the screen size/device anymore.
And, earlier this year, Leap Motion now converts any surface into a touch screen experience. So, where do you draw the line to determine what’s the optimal screen size for a smartphone, tablet, laptop or desktop computer?
Ethan Marcotte introduced the term Responsive Web Design (RWD), a web design approach that adapts its layout to the viewing environment – across any device or screen size in 2010. Three years later, RWD became something everyone wanted. You see it in website proposals and discussion boards. In fact, some people claim 2013 to be the year of RWD.
What is Responsive Web Design?
So, what exactly is RWD? Why do you want a responsive website and not a mobile site? And, most importantly, how do you make one?
A site designed with RWD uses fluid grids, flexible images, media queries and, sometimes, server-side components to provide the capability to display the website in different layouts. So there is only one website, one data source and one central online hub for your business.
One problem many mobile users encounter is quality search results. Since a mobile site is independent from a full website, the search engine will crawl both sites and return different results. Often, a user clicks on a link that was supposed to go to your detail page, but they end up on your mobile site homepage instead. So, do you need to make sure your site floats nicely on mobile? Or, how do I compress my informative websites into a smaller site?
Start with the RWD is the “Mobile First” concept. Prioritize your content presentation and make sure what information matters is included so you can provide meaningful mobile design and not just a mobile stack. Identify your content and strategy first, then make enhancements as device capabilities improve.
The Needs of Mobile Web Users
Kristofer Layon has applied Maslow’s human needs pyramid theory to the needs of mobile web users. Translating theory into user experience language is as simple as dividing it into four stages: Access, Interact, Perform and Enhance.
Foremost, users need to access the content. With more people relying on their mobile devices to access the web, achieving content parity and giving users access to a full experience regardless of their device or configuration are more important than ever.
It’s a myth that mobile users don’t want access to all of the information and functionality available to desktop users. A common problem with mobile site is the URL management. However, having all content under same roof and URL will definitely make it easier to give visitor access to the content they are looking for.
Once people land on your site, they need to be able to interact with the content and move around the website. There are different approaches and tips to tackle the navigation menu on mobile site, from a fixed bottom menu, to footer anchors, over canvas menus and toggle menu. Review your content strategy and audience and select the one that works best with your audience.
Performance is one thing that often gets overlooked. Fact is, mobile users will abandon a slow-loading website just as quickly as desktop users. Image optimization, client-side enhancement and server-side enhancements are all tools available to improve website performance on mobile devices.
Many mobile devices and browsers can do things that desktops cannot. The very same thing applies with the desktop browsers. Making the most of these wonderful features will take the mobile experience to the next level.
There’s no excuse not to have a site that displays across multiple devices.
Why Responsive Web Design is a Must
Almost two-thirds of Americans use their mobile phones to go online and 34 percent ONLY or MOSTLY use the Internet on mobile. No website is too big or too small to be responsive if you prioritize, plan and design.
We are not saying native apps will disappear or decrease. In fact, they are steadily growing more popular. But we can’t neglect the mobile experience of regular browser users either.
Responsive Website Design will continue to be the hot trend in 2014, only with more tools and methods coming to the fore to improve the performance and flexibility.
Here’s one last thing to think about: How does the website look like in Microsoft Internet Explorer 7, where there is no media query support? The future for web design is not only forward-compatible, but backward-compatible too.
If your brand needs helps with creating a responsive website, we are here to help.