IntroductionThis essay is an attempt todiscuss how responsive web design is affecting web design and its users orvisitors to websites.
It discusses the meaning of responsive web design, itsimportance, techniques and features. Challenges faced with responsive webdesigns and how they can be avoided will be further discussed and inconclusion, the future of responsive web design and expectation of users willbe pointed out.Over the years, access to theInternet using mobile devices is rapidly increasing. As it stands today, it ismore than one-fifth of the total Internet usage.Mobile devices such assmartphones and tablets are capable of connecting to the Internet and areeasily accessible, thereby causing the rise in Internet usage using them. Thisis an indication that web designers and developers should consider mobiledevices while designing or developing a web application.
The display size ofmobile devices is different from the regular desktop; which means that theyinteract in a different way and so should the design. Tablets and smartphoneshave smaller screen sizes compared to desktop computers which limits them tothe amount of information they can display without any input from the user suchas scrolling.According to the SmashingMagazine (2011), most organizations or clients want a mobile version of theirwebsite.
Practically, it is very essential because different designs fordifferent devices and all screen resolutions must be compatible too. Very soon,there will likely be the need for additional inventions.Responsive Web DesignIt is worth to mention thatResponsive Web Design started back as far as 2010. It came as the interactionbetween humans and devices, especially mobile devices (tablets and smart phones).Ethan Marcotte, author ofResponsive Web Design (2011) defines Responsive web design through fluidlayouts, flexible images and media queries.
He further states: “But in recent years, a relatively new designdiscipline called “responsive architecture” has been challenging some of thepermanence at the heart of the architectural discipline. It is a very youngdiscipline, but this more interactive form has already manifested itself inseveral interesting ways. Artists have experimented with surfaces that react toyour voice with a music of their own, and with living spaces that can reformthemselves to better fit their occupants. One company has produced “smart glasstechnology” that can become opaque once a room’s occupants reaches a certaindensity threshold, affording them an additional layer of privacy. And bycombining tensile materials and embedded robotics, a German design consultancyhas created a “wall” that can bend and flex as people approach it, potentiallycreating more or less space as the size of the crowd requires”.
Kholmatova, (2017) defined Responsiveweb design as the approach that design, and development should response to theuser’s behavior and environment based on screen size, platform and orientation.In addition, Frian (2012) statesthat responsive web design makes web pages look good and attractive on alldevices (computers, phones and tablets). It is about resizing, shrinking,hiding, enlarging or moving content to make it look good on any screen usingHTML and CSS. With the transformation of webdesign techniques, the whole idea of creating a specific design for each groupof users is not required. With responsive web design, a website automaticallyadjusts itself without the need to create any customized solution for variouscategories of users.
Importance of Responsive Web DesignInthe past, only desktop computers were used for browsing websites. It was notimportant then for website developers to design a responsive website. Butpresently, we are in an era where people want to use the latest and bestgadgets. This lead to invention of more and more new technologies. With theemergence of these technologies and gadgets, people want to browse fasterwithout any stress. This development encouraged website developers to adopt theresponsive design to enable users browse with any device.
The website isdesigned in such a way that it gives the users information in different screensizes and resolutions. Businesses and e-commerce websites have a greateradvantage using the responsive designs because it allows their visitors to usetheir websites with any type of device they own. Anotherthing that has become clear is that mobile devices (tablets and smartphones)are rapidly taking over internet browsing. The use of these devices is notlimited to browsing only.
They are used for everything from online shopping,checking emails, social media and a lot more. For this reason, the responsivedesign is very important so that users can enjoy browsing with their mobilegadgets.Techniques of Responsive Web DesignAdaptive or responsive layoutsare used in implementing a responsive website. Scaling content proportionallyin between breakpoints and identifying breakpoints where the layout needs tochange are the two techniques that are generally used.
These techniques arefurther examined below:· Scalingcontent: The most common method used to achieve this is the CSS3 mediaqueries. It enhances site experience and makes the screen size large by addingadditional columns. It also hides low priority content for smaller screens.· Images:Pictures are the beauty of a website which makes it rich and inviting to allusers. A major setback around pictures that frustrates user experience is thepage load time. Pictures and other media are the biggest consumers of bandwidthon websites.
The use of Custom JS Libraries also helpsin identifying the size and resolution of the user’s device and deliver ascaled-down version of the source image to the device.· Text:Body text and header text are the two ways a website communicates content toits users. Most websites feature a great deal of content, blogs and articlesfor user consumption.
A mobile device user wants to read the same content thatis displayed on a desktop or laptop computer. The width of the content’s bodyis scaled to match the screen size. Because text blocks are normally readablewhen they do not exceed 66 characters, optimizing a website responsively canimprove the overall experience of the user especially if the site depends onreadability of long articles. Headers (usually in HTML format) are styled toensure that they stand out to break content flow and not just using large fontsize attributes. This is achieved by inserting spacious margins and padding.
There are various available open source solutions that can be used. An exampleis FitText.· OptimizingForm Fields: Websites that require users to fill forms must ensure thatinteraction for touch users is minimized. This is very important especially insituations where there is a considerable amount of text inputs. In designing aresponsive site, developers can make use of HTML5 which extends the typeattribute and allows the developer to add a semantic meaning to the textbox.
Recent browsers, specifically those on touch screen devices have a feature ofoptimizing the layout of the on-screen keyboard. They have the capabilities ofdistinguishing between numbers and alphabets. For example, if the user taps thetelephone number field, the keyboard automatically displays a number pad. Ifthe user wants to input email, the keyboard is smart to bring up the ‘@’ and’.com’ keys to minimize typing.
This improves the overall experience of theuser.Features of Responsive Web DesignResponsive web design is notlimited to screen resolution or resizing images. It has completely changed theway websites are designed these days because of the features that enhance anexcellent user experience.
Some of the features are explainedbelow.· SmoothUser Experience: An Excellent responsive design will offer users anoptimized and outstanding experience regardless of which device they use. Itadjusts the device’s screen size so that the user does not through multiplepages to look for the content they are trying to find. One interesting findingis that Google adopted the best responsive design for their website to givemobile device users a smooth experience.· LessEfforts: Responsive designs allows developers to upload content once,instead of uploading it on different versions of the website. This saves time,resources and energy that would have been spent on uploading content ondifferent sites for different devices.
· SearchEngine Optimization: Everyday, search engines are getting smatter and knowhow to distinguish between desktop and mobile websites. Most search enginesdisplay responsive sites at the top of their search results.· LessMaintenance: Developing different versions of websites for differentdevices increases the workload of developers because they effect changes onmore than one website. For responsive websites, changes are made once becausethere is only one layout that works on all devices thereby reducing the developer’sefforts and workload.· Statistics:Statistics for a responsive website are split into two i.
e. mobile anddesktops. This allows the website administrator to get a complete insight ofvisitors depending on which type of device they are using. The administratorcan view either mobile only or desktop only visitors or both.Challenges of Responsive Web DesignResponsive web design has somefew challenges that can easily be fixed. Some of these challenges and how theycan be avoided are explained below:· Navigation:The three bars also known as ‘Hamburger Menu’ still serve as navigation menu onmost websites.
However, websites with a structure that is complicated makes itfrustrating for users to navigate beyond the hamburger menu. This can beavoided if the website developer tests the navigation on different screensizes. The developer must design a self-explanatory navigation to enable even anew user, access the site with ease.
Another contributing factor isthe weight of the site, which contributes greatly to slow loading. A researchby Evans Technology indicates that “74% of users abandon sites that take morethan five seconds to load or provide what they expect”. To avoid this issue,conditional loading could be enabled for the websites. This means that the siteloads only what the user needs.· Displayingtables on small screens: Tables have many rows and columns which makes itvery difficult to appear on small screens.
They become a nuisance for the userespecially when they are complex. Responsive tablets are the solution to thischallenge. Ideally, a smaller table with horizontal scrolling can also solvethe issue or a link to the full table can be provided.
Future of Responsive Web DesignPresently, it is almostimpossible to develop a website that is not responsive. It has reached a stagethat most website developers tag responsive web design and web design as thesame thing. The rapid increase in the adoption of responsive design can be relatedto the expansion of the mobile web. Designer depot reported in some statisticsthat more than 50% of internet browsing traffic is done through the mobilethereby making responsive design an economic need.
An area where responsive designwill make an impact is on the design for wearable devices. Presently, wearabledevices like the Apple Watch or Samsung Gear do not have browsers. A user canmonitor flight status on a wearable device, but cannot book for a flight. Aninvestor can read the tweets of a company CEO, but cannot read the company’sannual report.
If responsive design focuses on navigation as one of the keyareas of development, notable changes are likely to appear in wearable devices.With the existence of Audio input on modern devices (Siri, Alexa, Cortana,Bixby), browsing can be taken up to another level. We can imagine a technologycalled ‘Audio Browsing’! Audio output already exist in the form of screenreaders and when technology is frequently innovative, it is expected to take sometime for standards to evolve.In a more practical term, thefuture of responsive web design means dropping the mobile-first, and adoptingthe audio-first approach, which will be the next generation of web browsing.ConclusionThis essay has discussed whatresponsive web design is, the importance, techniques, features, challenges andwhat it can be in the future.
All these are not the final solution to thedynamic mobile world. Responsive web design, if properly implemented is justone out of many concepts that can improve user experience and satisfaction, butit cannot completely satisfy every user, platform or device. As new devices andtechnologies are emerging every day, there is the need for continuousimprovement to integrate with the new devices and technologies. This willenhance the overall user experience and satisfaction.
References1. Frain, B.(2012). Responsive web design with HTML5 and CSS3. Packt PublishingLtd.2.
Gardner, B. S.(2011). Responsive web design: Enriching the user experience. Sigma Journal:Inside the Digital Ecosystem, 11(1), 13-19.
3. Kholmatova, A. (2017). Design Systems. Smashing Magazine4. Knight, K.
(2011). Responsive web design: What it is and how to use it. SmashingMagazine, 12, 234-262.5. Marcotte, E.
(2011). Responsive web design: A book apart n° 4. EditionsEyrolles.
6. SmashingMagazine. (2011). Professional Web Design: The Best of SmashingMagazine (Vol. 10).
John Wiley & Sons.7.