Articles
What You Need to Know About Responsive Web Design
Posted on May 27, 2014
Businesses that want to compete in the growing world of mobile commerce and content need a mobile strategy. While native apps can help provide a seamless user experience, there are products and services where an app may not be the right choice. This is where other solutions come in.
One solution is responsive web design (RWD). Ethan Marcotte coined the term in a 2010 article on A List Apart. RWD gives users a seamless web experience across different screen sizes. By using fluid grids, flexible images, CSS3 media queries (among other tools), RWD seeks to minimize the amount of scrolling, zooming and overall effort required on the part of the user in order to provide a faster, more adaptive web experience across different screen sizes and platforms.
The concept may seem intuitive, but the planning and execution require forethought.
Here are some things to know when you opt for responsive web design:
Set Realistic Expectations: Know Limitations and Differences
It’s important to know the limitations of responsive web design. Not all desktop web experiences translate to mobile — whether in-app or on a site. For example, features like mouse-over or hover states that are present in desktop user experiences cannot currently function in the same way on mobile. In turn, mobile web experiences do not always serve the perhaps more complex needs of the desktop user. This brings to light the importance of identifying and framing variations in content priorities for the mobile, tablet and desktop experiences, since all of these come with assumed user scenarios that are attached to each.
Mobile First
In user experience (UX), thinking “mobile first” is an approach that many UX designers adopt when planning for a responsive site. Content that mobile users are most likely to seek is identified and given appropriate hierarchical placement through sitemaps, sketch or wireframe, and design. Mobile-first thinking also takes into consideration how the layout of things will adapt according to the viewport orientations of various devices, as well as screen resolutions.
The goal of thinking mobile first is to ask and provide design solutions to the question, “What can be done to make this mobile user experience as seamless as possible?” To answer this, consider the amount of action that is required of the user to perform a specific task, and try to boil those down to the absolute essentials, considering the relatively smaller screen size. This goes hand in hand with aiming to minimize the site’s loading time by reducing requests and file size on the development side.
Longer Architecture and Development Phases
Depending on the workflow method, designing and coding for several platforms and breakpoints can take considerably more time than the traditional desktop-only design-to-development process. Responsive web design therefore has ever-expanding content management needs as well.
Test, Test, Test
Before you launch your website, make sure to test it on all major devices such as iPhone, Android, iPad and browsers such as Chrome, Safari, Internet Explorer, Firefox, etc. Although this seems tedious, it’s a very important step because every device and/or browser will display your website differently. Emulators can be a great help, but there’s nothing like testing on the actual device and browser. When available and/or applicable, beta testing on users will undoubtedly provide valuable feedback.
There are definitely some challenges when opting for responsive web design, but you may find that it’s worth it, as it creates an opportunity for you and your business to connect with visitors with more versatility and provide an altogether more seamless user experience.
Read more here - http://www.cmswire.com/cms/customer-experience/what-you-need-to-know-about-responsive-web-design-025113.php