Responsive Web Design

The internet has moved on by many a miles over the past years. People now use the internet from various devices that range from desktop computers, laptops, tablets and smartphones. Responsive web design or RWD is one of the most commonly used web designing approaches in the modern technological era (Mohammad & Tomberg, 2013). Through this approach only one website interface is designed and it is meant to suffice the needs of both broad screened devices and mobile devices. RWD allows web pages to render differently on different devices depending on the screen sizes of the device. Content, performance and Design fluidity is necessary across all devices for all web platforms and hence the responsive web designing approach helps a great zeal in this process. This report deals with the details of RWD and its principles. The report will further throw light on the usefulness of the approach and discuss the design practices and developments made in the particular field. A list of advantages of this approach will be contrasted against the disadvantages if any. Finally a small case study will be highlighted that relate to this genre of technology.

As mentioned earlier, Responsive Web Designing the practice of designing and developing websites that are meant to work suitably on any device, irrespective of their screen sizes. It allows desktop users and the smartphone users to access the complete features and functionalities of the website. Previous to the invention of this approach, website were designed depending on the user base requirements and when needed separate websites were used to be designed for wide screen and mobile devices. Even earlier to that, website stakeholders and the respective web developers only used to focus on the desktop versions of the websites. These websites, when opened on a mobile device used to look unorganized or mostly a large instance of the website used to be presented on the mobile screen. Users will need to scale the website down using the zoom option of the mobile browser and then only get access to a very small version of the website, with tiny buttons, unclear graphics and not-readable text. This and designing two different websites was a bad idea as time proceeded. This not only led to the loss of audience due to the unattractiveness of the interface, but also resulted in more expenses for the website stakeholders. Hence, the concept of responsive web design was coined and everything has changed ever since (Gustafson, 2015).

Responsive vs. Adaptive vs. Mobile Web design

With the increase in mobile users across the world, the need for a concept like a responsive web design is inevitable. Responsive web design highlights the concept of “Mobile First” approach. This means that the websites when designed needs to be specifically tested for mobile devices as well before being launched (Natda, 2013). This gives special preference to the mobile users who browse the internet almost every minute.

Mobile web design is a different scenario altogether. In the past decade, websites used to be separately built to be supported on the mobile devices. These had lesser features and an altogether different layout. When the browser detected that a particular website was being accessed from a computer device or a mobile device, it called the respective version accordingly (Kim, 2013). However, this process demanded more expenditure for the respective companies and two websites were needed to be separately built and launched. This is where the needs for responsive and adaptive web design came into play.

Responsive and adaptive web designing approach are fairly similar. While responsive designs are more dynamic in approach, adaptive web designs depend on a set of pre-defined factors. Responsive designs change the look of the website quickly and are always positive to any possible change (Ward, 2017). Adaptive design depends on the screen size and change once the screen size reaches a particular resolution, the code for which is pre-defined. That is, in case of adaptive web design approach, several web layouts are needed to be pre-designed and the display layout changes accordingly, but the process is however slower (Gustafson, 2015).

A website designed using the RWD concept or approach adapts to the layout of the respective viewing window, by using the fluid or proportion-based grids, CSS media queries and flexible images which can scale up and down as necessary. The major properties of this concept are as follows:

• The flexible images are generally transformed into relative unit size. This prevents them from being displayed out of the container element. This hence, preserves the resolution of the images and therefore help in the containment of the image quality.
• The fluid grid concept makes the page elements and divs to be sized in the units of percentages unlike traditional web design approaches, where constant pixel dimensions were used. This helps to scale down the elements according to the changing screen resolution and never go out of the pre-set layout within the container.
• Media queries are written into CSS documents to help the pages to change layouts whenever needed. These rules when written into the linked CSS style sheets allow the websites to be resized by determining the browser window size or resolution.

Over the time several procedures have come up that can be used to design websites that are responsive to their browsing environment. These tools or techniques are used according to the need of the designer or the sometimes the content requirements also help to determine the choice.

Firstly, to set the viewport of the website is necessary. Pages that are optimized for a different variety of devices should always include a meta-viewport tag. This is to be coded into the head of the html document. This Meta viewport tag instructs the browser about the rules to control the scaling and dimensions of the web pages and its elements. The following steps should be followed to ensure that the meta viewport is correctly implemented:

• The meta viewport tag must be used to control the scaling of the browser’s viewport and width. It must also include width=device-width so as to match the screen’s width as per device-independent pixels.
• Include initial-scale=1 that helps to establish a 1:1 relationship between CSS pixels and device-independent pixels.
• Without disabling user scaling, ensure that the page is properly accessible. This can be done using the developer console window.

Using Bootstrap for this purpose is one of the most commonly accepted techniques. With Bootstrap 3, designing mobile-first websites has become easier (Spurlock, 2013). No special CSS style sheet is needed to be coded separately with separate media-query rules, whereas, linking Bootstrap CSS to the HTML page does the entire trick. Bootstrap provides default CSS classes that can be used within the various tags in the HTML pages to make them responsive in nature (Spurlock, 2013).

<head>

<meta charset=”utf-8″>

<title> Bootstrap 3 Responsive Design </title>

<link rel = “stylesheet” type = “text/css” href = “css/bootstrap.min.css”>

<script src = “https://code.jquery.com/jquery-1.12.4.min.js”> </script>

<script src = “js/bootstrap.min.js”> </script>

</head>

The pros or advantages in RWD are as follows:

1. It ranks better during Search Engine Optimization or SEO. Google prefers responsive websites more against single-platform websites having similar contents.
2. Saves a lot of budget for the stakeholders. The stakeholders do not require to pay the developers in building separate websites for desktop and mobile.
3. Consistency can be maintained in user experience and branding. All information and features can be fitted into one website and there is no fear of losing out on features in building a mobile website separately (Rogatnev, 2015).

There are however few disadvantages of using RWD, which are as follows:

1. If the responsive layouts are not carefully planned while in the design phase, the audience might get really confused with the new design they see on the mobile device which is supposed to be different from that of the desktop version that they have been using. Thorough study of mobile UI design is needed to succeed with RWD.
2. Web browser compatibility is another issue that responsive designs face. Frain (2012), says that there are still a few mobile web browsers that cannot link to remote files or understand CSS3 media-query rules and hence display a fault web page version which is not properly implemented with the linked CSS.

Conclusion

It can hence be concluded that responsive web designing is very important in the modern times. As mobile internet browsing is increasing with time, the more is the need to switch to responsive web designs. Several web designing techniques have come up that help the designers to design and develop such designs. Bootstrap is certainly one of the most common of the aforesaid practices and it is also very robust and makes the process easier for the designers. Even though the RWD principles and techniques has their own broad field of advantages there are a certain disadvantages associated with it. These can however be overlooked, considering the demand of mobile-first websites ion the modern era.

References

Frain, B. (2012). Responsive web design with HTML5 and CSS3. Packt Publishing Ltd.

Gustafson, A. (2015). Adaptive web design: crafting rich experiences with progressive enhancement. New Riders.

Kim, B. (2013). Responsive web design, discoverability, and mobile challenge. Library technology reports, 49(6), 29-39.

Mohammad, A. S., & Tomberg, V. (2013, October). Harnessing the Potential of Accessibility Standards and Responsive Web Design Practices to Achieve Learning Interoperability on the Level of the User Interface. In International Conference on Web-Based Learning (pp. 294-305). Springer, Berlin, Heidelberg.

Natda, K. V. (2013). Responsive web design. Eduvantage, 1(1).

Rogatnev, N. (2015). Responsive Web Design.

Spurlock, J. (2013). Bootstrap: Responsive Web Development. ” O’Reilly Media, Inc.”.

Ward, C. (2017). Responsive web design.

Yadav, P., & Barwal, P. N. (2014). Designing responsive websites using HTML and CSS. International Journal of Scientific & Technology Research, 3(11), 152-155.