[ad_1]
Introduction
With the increasing number of mobile devices, operating systems and their versions, screen sizes and their resolutions, the need for mobile browsers to access web sites also grows. The challenge then is to ensure that a single version of the source code of user interface designs on the server-side can render the web page correctly on different screen sizes. Thus, mobile-enabling web apps on tablets, smartphones, phablets, etc. is not just a matter of viewing the same web page (that was originally designed for a desktop/ laptop) on a mobile browser, as it will result in horizontal and/ or vertical scroll bars, making the page unusable. Mobile enablement of a web application requires a completely different approach to make it usable on the variety of device form factors. The solution is to make the app compatible with every device that runs a web browser.
Responsive Web Design (RWD), which simply means design your app by running some “media queries” which will identify the device’s screen size and resolution is a key enabler! However, RWD is not as simple as it looks! Everything happens from the background to make sites so very adaptive that the consumer doesn’t have to switch between apps or URLs.
Let’s see what RWD provides!
What is Responsive Web Design (RWD)?
In RWD, all visual elements of a web page become proportional to the full page size by using fluid, proportion-based grids, flexible images and CSS3 media queries. Fluid layouts could be the first aid whereas media queries are useful for adding flavors to mobile devices. The RWD concept is best used to minimize efforts & money, multiple browser support, optimal performance and heavy content. And to achieve this, the design has to be system-driven, as compared to pages-driven.
Some rules that need to be followed include: check the content, use a small mobile device to form the design base, apply features for a browser, use a modular approach and design a framework scalable across business verticals. Managing corporate branding UI themes as a part of this framework provide much more flexibility when serving this as a solution to customers.
Examples of ready frameworks, with the possibility of including some customization include Bootstrap, Skeleton, The Goldilocks approach, Foundation, etc…
The key is to understand & follow the guidelines stated below:
- Our pages should render legibly at any screen resolution
- We mark up one set of content, making it viewable on any device
- We should never show a horizontal scrollbar, whatever the window size
To achieve the above, one needs to use the following principles that are based on CSS:
- Flexible layouts – Use proportional sizes to fit to every page
- Flexible images and media – Use CSS to avoid images or media overflow out of their containing elements
- Media queries – Use the CSS3 media queries module to detect media features like screen resolution and respond accordingly
The Media Queries Magic!
Media queries enable the creation of optimal viewing experience on devices as they do the following:
- Media queries allow the web page to use different CSS style rules based on device characteristics, especially once it identifies the width of the browser.
- Media queries tailor the CSS to any device by identifying its media using a specific query, such as its width, its height and its resolution.
- A media query consists of a type, such as screen and print, and a zero along with more expressions to check against the media. Once the expressions evaluate to true, the CSS rule is applied.
The challenge continues where different devices may have a similar screen resolution yet entirely different physical factors (E.g. iPad & Kindle). “Resolution media query”, a specification of media query typically would vouch to bridge this thin gap between physical and digital pixels!
“Media Queries are now very well supported on modern browsers (including IE9+) and mobile browsers too which can truly make a difference between a website that degrades well on a mobile browser v/s the one that is enhanced to take advantage of the streamlined rich UI”… (Reference: Google web master team)
The Adoption
RWD is becoming a web de-facto standard while designing UI for mobile & web browsers. A few examples as analyzed through reports & analysts view –
- US Government endorses RWD officially as better in providing greater accessibility to government information and resources
- Microsoft has a clean, less cluttered corporate website which uses several CSS files to resize all design elements on different device sizes
- Currys has engaged a clever design where some of its design elements change several times for multiple screen sizes and is smart enough to provide rich experience to its users
- Starbucks has implemented a unique media queries style where the navigational elements are replaced by a single symbol that leads to all the menu elements rather than converting them into symbols
The above are a few key examples which prove that there’s a lot of buzz on RWD. Clearly, the world has moved towards being more mobile, and people interact more and more with their cellphones instead of using regular browsers when consuming content from the internet.
The content will be more structured, pages more modularized and user experience more engaging. It is not something that is forgotten in the midst of style guide discussions and comp revisions. Today customers go beyond “Look and Feel” and are demanding a “Customer Experience”. Earlier a webpage design was weighed by how good it looked to the stakeholders, while now everyone in a web design project is forced to think about how the content is consumed by the end user and what is really important on different devices – and for the site in general.
Why is RWD the best option for an Organization’s mobility strategy?
When considering a RWD for an app or a website that doesn’t currently support mobile devices one should always think of the future and not only the present!
- The best advantage or benefit of using RWD techniques is that it doesn’t focus on devices merely, but it reflows to fit any screen size which is very much future friendly
- It is a recommended mobile configuration as it has one URL with same HTML across the devices & desktops. Such content is much easier to manage from a single source & share across multiple users rather than having separate sites. E.g. an application applicable to a mobile device as well as desktop when accessed from two different URLs may result in a less than optimal user-experience by viewing same desktop results in a stripped down version on a mobile device.
- While the design may be adjusted in terms of column width to fit a screen size be it desktop or mobile, overall, the (fluid) design layout and styling remains uniform throughout
- Since all the content is on one URL only, it comes in handy with factors such as social media sharing, search engine ranks, bookmarks, web stats, etc. all in only one version to be maintained, thus saving time and efforts
Conclusion
Responsive web design is in its early stages and hence there will be multiple opinions & recommendations across to attempt resolve usability problems that arise due to device size variations. Whether to build mobile designs first or desktop desktops first or take a deep dive into RWD to meet such challenges is a decision that will continue as a debate for some time while the RWD standards will continue to evolve as better ways of handling the changing world of devices and browsers.
To build UI using RWD is a complex issue but over the time it will be a must for web designers to use in order to makes websites readily available to the growing consumer base.
[ad_2]
Source by Manisha Ajay Rao
Comments are closed.