Getting the Most from Responsive Design

Alt Title: How to Make Responsive Design Work for Your Business

Responsive design is a website design template that helps a site translate well on multiple platforms and display types. Many people check websites more frequently on their mobile devices than on their computers. Having a website that does not function well on multiple platforms can do significant damage to your business.

What Is Responsive Web Design?

The idea for responsive web design is that users should be able to effectively utilize a website from any platform. The design is created so that the website will respond and adapt to screen size, platform, and orientation. The process is made up of flexible grids and layouts, images, and expert use of CSS media queries.

The concept of responsive web design stems from the architectural idea of a room that can automatically expand or shrink using robotics and special materials, depending on how many people are in it. Responsive web design is supposed to be an online version of a self-adjusting room. It is revolutionizing web design with a whole new way of looking at online content.

Adjusting Screen Resolution

Many device settings allow you to automatically change the screen from horizontal to vertical. Ideally, the website will seamlessly adjust to the change in format. Additionally, many mobile device users do not maximize their browsers. This means that there are exponentially more screen sizes and resolutions that the website should be able to adjust to.

Part of the solution to screen resolution difficulties is flexibility. Flexible layouts are becoming more common. Currently, flexible layout allows images to adjust automatically with the platform and offers settings to prevent the layout of the website from breaking.

Fluid and elastic images and text have a massive impact on websites. Users can easily adjust the site to their liking and it will remain easy to read and use. If the image and logo of a site are resized incorrectly, the quality of the image may suffer and part of it could be cut off. The strategy is to divide the image in two and have one as the illustration in the background and one as the logo, resized proportionally.

Flexible Images

As mentioned above, flexible images are vital to web design. One of the biggest problems with current responsive web design is working with the images. There are multiple ways to attempt to work around images resizing incorrectly. One of them is the max-width rule. The maximum width of the image is set to 100% of the screen or browser’s size, connecting them in such a way that if the screen or browser changes size, the image will adjust and reduce accordingly.

Responsive Images

The responsive images technique focuses on resizing images to the size of the screen, so that they maintain high resolution and do not take up too much space on smaller devices and browsers. When the page loads, the large or small images are loaded as necessary to expedite load time.

iPhone Image Resizing

One of the great attributes of iPhones, iPads, and similar devices is that web designs have learned to shift seamlessly. Often, websites do not need to change to the mobile version to work on these devices, making them more user-friendly.

In some situations, the images still change sizes and reduce proportionally even though they were designed for the tiny screen. These adjustments often make text unreadable, even if the design was altered to cater to the smaller screen. This can be overridden with a meta tag so that images that fit the screen initially maintain their size and do not shrink.  

Custom Layout Structure

A custom layout structure is used when there is an extreme size change. There is one main style sheet that outlines the foundational qualities of the website. If the main sheet results in deformed text or images it can be detected, and a switch made to a child style sheet that copies everything from the default sheet and redefines the layout.

Media Queries

To apply specific styles to sheets, people apply media queries. The new CSS3 has introduced many new features for use in website design and in media queries. Multiple media queries can also be used on a single sheet to create a variety of adjustments.


JavaScript is a great option for devices that do not support all of the new CSS3 media query options. However, JavaScript also recently created a library that makes older browsers capable of supporting CSS3 media queries.

Showing or Hiding Content

Though it has become possible to shrink information and images to fit on smaller screens, sometimes it only serves to complicate the website and make it look messy. A better solution is often to pick and choose what content should be shown and what should be hidden. CSS has given designers the ability to show and hide content. It is even possible to replace pieces of content with navigation to the missing content, so that it can still be accessed. By providing navigation to the information that had to be hidden, the viewer can still access everything without being confronted by a disorganized and confusing screen in front of them.

Touchscreens and Cursors

With touchscreens rapidly taking over the screens on all but the largest devices, cursors may become a thing of the past. Many people assume that it is better to apply touchscreens to smaller devices, because a smaller screen does not warrant a cursor. However, touchscreens are now being installed on larger devices like laptops and desktops. They each come with different design guidelines and requirements, but neither is exceedingly difficult to create. Touchscreens do remove some of the functionality that comes with a cursor like the ability to hover, so the design process has to take that into account.

Qualities of Particularly Effective Responsive Web Designs

One of the greatest benefits of responsive web design is the ability of the screen layout to adjust to accommodate browser width. Instead of the components shrinking, they change position on the screen so that it remains readable.

Another effective quality of responsive web design is prioritizing information. Some websites, when resized, use the aforementioned strategy of cutting out non-essential information to their message.

Other websites organize their page into columns on regular computer screens. When opened on a smaller screen or resized, they reorganize the columns so that they can all fit on the page. However, at a certain page size, the website is designed to cut out information that is less important.

Responsive Web Design as a First Step

Responsive web design is a major improvement for the web design community. It has been beneficial to users and designers. However, it has not completely resolved issues that users have with visiting websites on various devices, or trying to view them the way they prefer. It has been developed to improve the experience. Perfecting the design remains an elusive goal. Responsive web design has opened the door to a more customized online environment, and each new customization is making websites easier to use and more pleasant to visit.


About the Author Stephen Moyers

Stephen Moyers is an online marketer, designer, avid tech-savvy blogger. He is associated with Los Angeles based SPINX Digital Agency. He loves to write about web design, development, online marketing, social media and much more. Apart from writing, he loves traveling & photography. Follow Stephen on Twitter & Google+.