Responsive Web Design
What is responsive web design?
Responsive web design is a graphic user interface (GUI) design approach that allows web pages to render content that adapts for device display size. Sites that employ responsive web design adjust the site layout to the browser's viewing size with proportion-based grids, flexible images, and media queries. Designers size elements in relative units (i.e., percentages) and add media queries for sites to adjust proportionately to display size.
History
Audi.com, circa 2001, was the first website to use a layout that adapts to browser size; however, some browsers required the server to be reloaded after the browser was resized. In the examples above, the design layout adjusts in relation to the browser width. In 2010, Ethan Marcotte coined the term "responsive web design" to include a fluid grid, flexible images, and media queries in an A List Apart article. He later detailed the theory and practice in his book Responsive Web Design.
As more users started viewing sites on mobile devices in the early 2010s, web designers needed to develop practical design solutions: adaptive and responsive design. In adaptive web design, developers implemented multiple versions of one web page with fixed dimensions for each device. Responsive design uses a flexible layout that resizes itself to fit a browser's size. Without absolute units to define the size of a page, designers could focus on one design and let it "flow like liquid to fill all 'containers.'"
Why use RWD?
Mobile users account for over half of web traffic; thus, responsive web design becomes more critical for website accessibility. More users accessed the internet from their mobile devices than desktops for the first time in 2014. Since then, the volume of internet traffic from mobile users has increased. To keep up, website designs must support basic mobile devices that lack JavaScript. Browser detection and mobile device detection can determine if HTML and CSS features are supported but may falsely report a feature is available when the feature is either missing or non-functional.
Experts recommend responsive web design as a lower-cost alternative to mobile applications for its ability to house all code on one site. Developers realized the benefits of mobile-responsive designs as the trend of mobile web use continued to rise. In the mid-2010s, Google announced search engines would rank responsive websites higher in internet searches.
Key Principles
1. Fluid grid system
In a fluid grid system, elements use equal space on display screens for all devices. Designers choose where pixels should appear and define a layout size, so elements scale proportionately to the display size. The fluid grid concept requires page element sizing in relative units (percentages) rather than fixed units (pixels or points).
Tip: To calculate this sizing, divide the design features max-width by the browser's max-width to find the relative percentage of the target size.
2. Flexible images
Images aren't naturally fluid, so they default to the same size on all screens. The obvious risk with this behavior is the design will appear inconsistent because images won't adjust to the browser. Flexible images are sized in relative units so they won't display beyond their viewing space.
Tip: for one image, apply a CSS command, so the image shrinks on smaller screens. For example:
img{max-width: 100%;} (Note: for multiple images, use other CSS commands.)
3. Media queries
Media queries implement filters to detect browser dimensions to adjust your design proportionately. These features alter the layout to meet certain conditions, most commonly: min-width, max-width, min-height, and max-height. Based on the browser's width, height, and orientation, you can specify how your design will render for different users.
Best Practices
With responsive design, you have to plan for flexibility in every design aspect. Here are some expert-backed recommendations:
Start with a "mobile-first" approach by creating phone-sized designs and scaling up to fit larger screens. When doing so, remember mobile users need larger buttons, and the layout should be twice as intuitive.
Mobile-first approach to an example website design
Create fluid grids and images in their native dimension. If you don't have enough space, crop them. Use SVGs to prevent data loss in image compression.
Include at least three breakpoints by designing for more than three possible devices (i.e., phone, tablet, and desktop).
An example of phone, tablet, and desktop design breakpoints.
Prioritize necessary elements by hiding less important content with progressive disclosure and navigation drawers.
Minimize distraction and maximize accessibility with contrast and intuitive layout. Make headlines significantly larger than the text, use responsive text, and include text outside images for screen readers
Benefits
Pros
Consistency improves user experience
Many CMS/frameworks are available
Cheap and easy to develop
SEO friendly with higher search engine rankings
Minimalistic design with one flexible layout
Cons
Limited control over display sizes
Components can shift on their own
Ad formats can interfere with the design
Longer load times on mobile devices
Complicated front-end code needed
As an example of a non-responsive web design, here is my personal MyWebSpace page:
The mobile web page rendered different from the desktop page because I coded the page elements in pixels, not percentages. Below is an updated version where I implemented the use of relative units to create a more responsive web design.
The new design isn't flawless and I will continue tweaking the code to make the page more seamless, but overall the page is better than before.