As per the statistics on internet usage behavior reveal a very interesting fact — more than 60 percent of smartphone users throughout the world of internet use the internet through their mobile devices to get relevant information quickly, especially when they are away from their 1 computers . Around 40 percent of users browse the internet while traveling.
Possible Solutions for Device friendly Web Design
To address this challenge, there are two recommended way for UX designers:
- Responsive Website Design (RWD)
- Adaptive Website Design (AWD)
Responsive Web Design (RWD) is an approach in which a site is designed to provide a best viewing experience across all wide range of devices, from desktop computer monitors to mobile phones. Responsive Website Design has been widely adopted by organizations across the globe, but it is not the only solution for designing sites that must work across various media. Adaptive Web Design, for instance, is an approach for device friendly design. In other words, it comprises specific designs suited for specific media, such as mobile, desktops, laptops device and so on.
The preference to adopt RWD or AWD will depend on the business situation.
Responsive Web Design
The Responsive Web Design approach is adopted to provide a best viewing experience, which consist of easy reading and navigation with minimum resizing & panning. In other words, it is an approach that enables website design and development to respond to the users behavior and environment, based on screen size, platform, and orientation.
RWD comprises flexible grids, layouts & images, and makes intelligent use of Cascading Style Sheet media queries to adjust screen resolution & automatically resize images. The intention is to build a website that is resolution and device-independent.
Tools for Responsive Web Design
The main tools for Responsive Web Design are HTML5, CSS3, and JS, and jQuery.
HTML5: It is the most recent version of HTML, with features that provide device independence and error handling, and reduce the need for external plug-ins. HTML5 includes the features of HTML4, XHTML, XHTML1 and DOM2HTML. It’s a development framework with CSS3 and JS, along with a number of new elements, attributes, 2D & 3D graphics, video, audio elements, local storage.
CSS3: It is the latest version of the Cascading Style Sheet standard and is completely backwards-compatible with all earlier versions. CSS3 features such as orientation, device-width, min-device width, border-radius, opacity, box-shadow & text-shadow, it help create beautiful web pages which improve the user experience.
JavaScript and jquery: JS named css3-mediaqueries.js can help in the cases where browser versions and devices do not support CSS3 media queries.
The new intranet design should enable users to:
- Know who the go to experts are in the business
- Keep up with the latest updates within the organization
- Share information about best practices with employees
- Ensure that essential documents are updated
- Access important policies while on the road
- Act on pending requests round the clock
- Access the site through any device
A few best practices that should be followed to make a responsive
- Create a base site prototype with the help of a standard HTML editor & then use a responsive framework like Twitter Bootstrap help to convert the prototype into a responsive.
- Wherever possible, use the grid system to save time instead of building your own grid systems.
- Replace all pixels with percentages in the layout design.
- Use CSS3 and Media Queries richly for styling output.
- Avoid table-based layout design and browser-based HTML, JavaScript, and font tags.
- Create device channels based on matching User Agent.
- Create a set of image renditions that each image will automatically follow.
Conclusion:
Making a design responsive is relatively easy and more productive than developing code for every device available. With Responsive Web Design, we can create custom solutions for diverse set of users on a wide range of devices.
