Responsive Web Design - Let the Device Do the Work

 



There may be some argument over whether responsive or adaptive designs are better, but in many cases responsive design is going to be chosen for budgetary purposes (at least today).

That means designers need to become familiar with the concepts and some basic guidelines for their responsive designs.

In the early days of the internet a website had to work on a monitor. As long as it performed reasonably well on a laptop screen it would work on every other PC to a reasonable extent.

Devices today range from those with tiny screens (like a smartphone) right through to huge monitors. The user experience needs to be catered for on each of these and that’s where responsive design comes in.

What is responsive web design?

Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.

RWD is one approach to the problem of designing for the multitude of devices available to customers, ranging from tiny phones to huge desktop monitors.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Concept of responsive web design

Responsive design is a way of developing web properties so that the device they are used on determines the way that the site will be displayed.

It’s normally done using the principle “mobile first” – i.e. the experience is defined on mobile platforms such as smartphones and tablets and then scaled up to larger screens.

The need for this approach is being driven by the understanding that more and more people are accessing the mobile web and in many markets now – smartphone access to the net is much greater than traditional PC access.

Mobile devices offer different capabilities to desktop/laptop environments too, such as touchscreens, GPS data, accelerometers, etc. Finally, mobile forces designers to think simply.

The experience on mobile is very limited thanks to the screen real estate. Sidebars, adverts, social media inputs, etc. are difficult, if not impossible to accommodate.

So the mobile experience needs to be an exercise in simplicity with complexity only being allowed when the screen real estate allows for it. RWD has potential advantages over developing separate sites for different device types.

The use of a single codebase can make development faster, compared to developing 3 or 4 distinct sites, and makes maintenance easier over time, as one set of code and content needs to be updated rather than 3 or 4.

RWD is also relatively “future-proof” in that it can support new breakpoints needed at any time.

Major principles of responsive web design

There are three main principles that drive responsive design. Of course, there are other principles that come into play in certain designs but these are three that bind all responsive sites:

·         Fluid grid systems

·         Flexible text & images

·         Media queries

Fluid Grid System:



Source : Freshsparks

The grid is a crucial element for creating a responsive layout. Now, grids aren’t anything new.

Web designers have used grids for building websites since the beginning. However, in the past, these grids were fixed width and didn’t lend themselves to support a fluid website layout.

A fluid grid used for responsive sites will ensure that the design is flexible and scalable. Elements will have consistent spacing, proportion, and can adjust to a specific screen-width based on percentages.

With a fluid grid, users will have the best experience on whatever screen they view your responsive website on.

Flexible Text & Images:



Source : Freshsparks

The way to display text varies depending on what device a user is viewing your site on, but it should be readable no matter what. On mobile responsive websites, there is an opportunity to increase font size and line height (the spacing between each line of text) for legibility.

Flexible text and images adjust within a website layout width, according to the content hierarchy set with the CSS (stylesheet). Text can now be legible regardless of the end user’s device. With a flexible container (within the grid), text can wrap with an increase in font size on smaller devices.

Flexible images can prove to be more challenging because of load times on smaller device browsers. But these images can scale, crop, or disappear depending on what content is essential to the mobile experience.

Media Queries:

 


Source : Freshsparks

This is code that powers the flexibility of a layout on responsive websites. Media queries specify the CSS to be applied accordingly, depending on a device’s breakpoint (for example, iPhone portrait orientation or iPad landscape orientation, etc.).

Media queries allow for multiple layouts of a design, which use the same HTML-coded web page.

The idea is that you can then use a media query to specify when the screen real estate should be rearranged. You will find that this works best with a “mobile first” approach where you define what you want on mobile and then scale up from there.

The CSS might look like this:

@media screen and (min-width: 480px) { /* .larger screen sizes here.. */ }

You could then define a series of these CSS commands for each “breakpoint”. That’s when each layout becomes broken on a specific screen size.

You’ll need to test content to see where breakpoints occur and plan them. Eventually, you may find you can predict breakpoints based on the screen resolution of a device.

Features of responsive web design

Responsive Web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or automatically).

But responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. There are also few features plus additional ideas which we have to consider in making responsive web design:

·         Filament group’s responsive images

·         Touch screen and cursors

·         Focusing on content

·         Relevant screen resolutions

Filament group’s responsive images:




This technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens.

The JavaScript file inserts a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images are loaded as necessary.

With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth and loading time.

This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.).

Touch screens and cursors:




Touch screens are becoming increasingly popular. Assuming that smaller devices are more likely to be given touchscreen functionality is easy, but don’t be so quick.

Right now touchscreens are mainly on smaller devices, but many laptops and desktops on the market also have touchscreen capability. For example, the HP Touch smart tm2t is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet.

Touchscreens obviously come with different design guidelines than purely cursor-based interaction, and the two have different capabilities as well. Fortunately, making a design work for both doesn’t take a lot of effort.

Touchscreens have no capability to display CSS hovers because there is no cursor; once the user touches the screen, they click. So, don’t rely on CSS hovers for link definition; they should be considered an additional feature only for cursor-based devices.

Focusing on content:




Content prioritization is one key aspect to doing responsive design well. Much more content is visible without scrolling on a large desktop monitor than on a small smartphone screen.

If users don’t instantly see what they want on a desktop monitor, they can easily glance around the page to discover it. On a smartphone, users may have to scroll endlessly to discover the content of interest. Smart content prioritization helps users find what they need more efficiently.

Relevant screen resolutions:



Source : Toptal

As you can see, there is a wide range of resolutions, so neither mobile, neither tablet nor desktop is dominating the market share right now—this tells the designers should consider all of them when thinking about responsive web design.

  • 360x640 (small mobile): 22.64%
  • 1366x768 (average laptop): 11.98%
  • 1920x1080 (large desktop): 7.35%
  • 375x667 (average mobile): 5%
  • 1440x900 (average desktop): 3.17%
  • 720x1280 (large mobile): 2.74%

Just as with device breakdown, we should segment the data by location to match the user demographics of our target audience. It’s also worth catering to resolutions that are gaining popularity, because while some screen sizes are currently not that common, they may be in the future.

This will help responsive designers craft future proof UX that will work even when the market share changes.

Considering performance

Performance can also be an issue with responsive design. RWD delivers the same code to all devices, regardless if the piece of code applies to that design or not.

Changes to the design occur on the client-side, meaning each device — the phone, tablet or computer — receives the full code for all devices and takes what it needs.

To truly assess the user experience of a responsive design, do not test your responsive designs only in the comfort of your own office, on your high-speed connection.

Venture out into the wild with your smartphone— between tall buildings in a city, in interior conference rooms or basements, in remote areas with spotty connectivity, in known trouble spots for your own cell-phone’s network connection — and see how your site performs in varied conditions.

The goal of many responsive designs is to give equivalent access to information regardless of device. A smartphone user does not have an equivalent experience to a desktop user if download times are intolerable.

Creating usable experience

Because responsive design relies on shuffling elements around the page, design and development need to work closely together to ensure a usable experience across devices.

Responsive design often turns into solving a puzzle — how to reorganize elements on larger pages to fit skinnier, longer pages or vice versa. However, ensuring that elements fit within a page is not enough.

For a responsive design to be successful, the design must also be usable at all screen resolutions and sizes. When elements move around the page, the user experience can be completely different from one view of the site to the next.

It is important that design and development teams work together not to just determine how the content should be shuffled around, but to also see what the end result of that shift looks like and how it affects the user experience.

Browser & device testing for responsive web design

Make sure a responsive design layout is compatible with all relevant browsers and retains the integrity of your user experience & design.

Don’t rely only on dragging the browser in and out to test a responsive web design for mobile; try viewing a site on as many physical devices as you can.

Conclusion

Responsive design is a tool, not a cure-all. While using responsive design has many perks when designing across devices, using the technique does not ensure a usable experience (just as using a gourmet recipe does not ensure the creation of a magnificent meal.)

Responsive design teams have to create a single site that supports many devices, but need to consider content, design and performance across devices to ensure usability.

 

Written By – Umme Amara Shaikh 



Post a comment

0 Comments