This first article in this series was entitled ‘Awesome Responsive Web Design (RWD) Part One: The Devil is in the Details!’, and it focused on the various components of responsive web design and considerations including static design phase, navigation menus and content and information rendering. This article will focus on the interactivity of devices, support for media queries, scalable images and development and testing time.
Interactivity on Devices
The desktop version of a typical website differs from the mobile version, and it is important to remember that interaction that works just fine on one device may be irrelevant on or simply unworkable on another device. That is mainly because of the way users interact with desktop and mobile devices. As an example, let’s say that we have a mouse over menu on a desktop version of a site, but that feature is not supported on the mobile version of the site. Therefore, we will have to take a different approach to fulfill user expectations and provide a suitable user experience.
Limited Support of Media Queries
Sites that are designed using responsive web design or adaptive web design techniques work well with media queries to recognize and serve the site in a way that is suitable for every screen size and every visitor. The problem is that old browsers, especially Internet Explorer version 8 and older, don’t recognize media queries. This does not mean that there is no way to display your website on older browsers. You just need to be aware of this when working with media queries. There are several ways to avoid the problem, such as using a completely separate style sheet for IE, or designing your website using a ‘mobile-first’ approach.
Scalable Images Lose Details
Another limitation of responsive design is the scaling of images. Scaled images quickly lose details and, thus, their meaning. The system needs time to identify the dimensions of images, which can then be rendered properly on different devices. This challenge must be overcome if the site is to satisfy user expectations.
Development and Testing Time
One of the challenges of building a site using responsive web design (RWD) is that it takes more time. For a typical desktop site, the team will need less preparation time, and less resources and testing time. Apart from development, another challenge in implementing RWD is how to test, and what devices to use to test the site. Testing time is also an issue. Although more time is required to test an RWD site, a thorough planning and design phase will significantly reduce testing efforts and schedules.
Summary
The factors discussed in this article must be combined with considerations for static design phase, navigation menus and content and information rendering, as discussed in the first of our two-article series, entitled ‘Awesome Responsive Web Design (RWD) Part One: The Devil is in the Details!’
When a business or RWD designer undertakes a new site design or the update or migration of a current design into a responsive, adaptive environment, the project team must carefully develop requirements and have a thorough understanding of its customer and user demographics. In order to successfully design a mobile, responsive web site or application and optimize user, network and server time the team must design RWD and AWD applications and sites with flexible, intuitive features and tools that display content in a way that is meaningful to every user on every device. By considering the factors and issues outlined in this two-article series, a design and development team can streamline and simplify the RWD design and development process and improve ROI and TCO, as well as development and upgrade time and resource commitments.
