When a business takes on the task of creating a new site or updating or migrating a site to achieve a better mobile experience, it must utilize skilled, experienced RWD services to succeed in software user experience design, and in software engineering. Businesses that undertake this type of project often use outsourced product development and PDMS services to ensure a positive outcome.
The concept of Responsive Web Design encompasses differing techniques such as Adaptive Web Design, RESS (Responsive Design with Server-Side components), and responsive delivery. These techniques incorporate client-side code, multiple device templates, and cloud-based code transformations that stretch far beyond the scope of RWD. “Responsive” has simply come to describe techniques and technologies in which a unified set of website code produces Web pages optimized for multiple devices based on screen size and device capability. How a site achieves this unified state is becoming less and less important.
This two-part article series will focus on the various components of responsive web design and considerations. The first in the series of articles will discuss the static design phase, navigation menus and content and information rendering.
Static Design Phase
Emphasis should be given to prototype, user experience and identification of controls that can work and perform well on different devices. There might be multiple iterations during this process to improve the user experience and control identification. Spending more time on these issues in the design phase will ensure success and mitigate re-work later in the project. Here is an example of one such consideration: The orthodox way to display information on a website is TABLES, but in RWD, the use of TABLES is problematic, particularly when tables have to contain complex information or a large number of rows and columns. Compressing all of this information into a small- device screen in a usable way remains a challenge.
Navigation Menus
Navigation menus, submenus, and options within a page is an important part of site design, especially on more complex desktop websites using multi-layer, drop-down menus. On smaller devices, designers face the issue of limited screen size, which makes designing intuitive navigation menus a challenge. Designers must find a way to display menus differently on smaller screen. One method of accomplishing this is to put a small icon on top of the page so that the user can click or touch the icon with a fingertip to navigate menus and options.
Content and Information Rendering on Devices
The idea that you can simply build one website that works equally well on any device is not as easy as one might think. Ultimately, there is only one set of code, and your website must contain the same content and structure. Yet, different devices require a different way of displaying and structuring content. Users will browse a website according to very specific needs, and designers have to prioritize content for mobile use so that users do not abandon the site or a product search or purchase. While the desktop version of a site can display a lot of content at one time, smaller screens require that designers prioritize content to meet user needs and lead them through a purchase or browsing experience in an intuitive way with information clearly displayed on smaller devices and screens.
Imagine that you are creating a website to display employee information. One user might use the desktop version of the site and browse patiently, until they find employee details and information. At the same time, another user might use the mobile version of the site, to find and analyze graphical data, e.g., pie charts, bar charts, etc. In every instance, the designer is faced with the challenge of designing one site for each user need and device and screen size. In order to create a great user experience for all users, designers must consider that people will use different devices in different circumstances and with different needs.
Summary:
The factors discussed in this article must be combined with considerations for interactivity on multiple device types, support for media queries, scalable image issues and development and testing phases for RWD applications. The second article in this two-article series will discuss these factors.
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.
