Understanding Responsive Web Design

While most designers want their websites to look hip and sexy, being a slave to fashion can be costly and self-defeating in the realm of web design. In a world where trends seem to change every week, it is easy to get lost in flashy templates that distract more than inform and infuriate more than engage. Designers have become adept at juggling diverse user preferences, inconsistent screen resolutions and a multitude of technical intangibles in the swirling seasons of shifting technologies. But as mobile browsing overtakes desktop access and a range of new products are introduced to market that extend internet capabilities in surprisingly novel directions, the challenge emerges to develop a more flexible foundation that can adapt content to the million machines of the past, present and future. By stripping the rigidity from coding and embracing “future-proof” creation, we approach the king of all web trends: responsive design.

Responsive web design aims to provide an optimal user experience across a wide range of web-accessing devices. The term is derived from the recent “responsive architecture” trend in which architects are experimenting with structures that can bend or expand depending on the presence of people around them. In the context of the worldwide web, this can include selectively showing or hiding elements and altering the size and position of text or images to enhance a web page’s navigation. Websites can then be easily experienced on tiny handhelds or big screens with a minimum of resizing, panning and scrolling.

The appeal of responsive design is readily apparent and yet often challenging to implement. A number of responsive image techniques, conditional loading and responsive design and server-side components (RESS) have emerged to assist developers. RESS intends to enhance web performance by combining client side and server side powers. This means serving slightly different requests to some devices for a given URL but still using responsive techniques for providing respective content. The process involves gathering comprehensive data specific for each device, then getting the proper markup in the server to match the device. The server-side markup creates the content shown and responsive design techniques determine how they’ll be shown. This takes much planning and coding but is worth the effort, and resources exist to assist designers.

As mobile technology in particular rapidly advances, it is becoming practically impossible to test and design for all possible devices. For this reason, computer courses increasingly encourage simplicity in layouts, UX and coding. At the core of most new web design trends is the importance of content above all else. To maintain aesthetically pleasing pages while making content most prominent, typography and font handling have become increasingly popular. The priority for any aspiring programmer in web design courses should always be to define which aspects of a website are most important to convey to the user. Focusing on this key content will guide all display efforts regardless of resolution.

About the author


View all posts