“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. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.”1
That said, with the abundance of different screen sizes, it’s not realistic, efficient or even practical for that matter, to design for all of them individually. Instead, designing with breakpoints in mind is one way to take advantage of designing responsively. 'Smashing Magazine' has a great article: Logical Breakpoints for Your Responsive Design, for further reading.
Responsive web design requires a more abstract way of thinking. More than just adjustable screen resolutions and automatically resizable images, it requires a new way of thinking about the design as a whole. Some of the concepts currently being practiced are: fluid layouts, media queries, and scripts that can reformat web pages and mark-up (code) effortlessly or automatically. Let's take a look at these features, and others, in more detail.
Adjusting Screen Resolution
As previously mentioned, there’s a wealth of varying screen resolutions, definitions and orientations. Many new devices are able to switch from portrait to landscape and vice versa at the user’s whim. But how is a designer supposed to design for these situations?
One option is to group screen sizes into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming and inefficient. Plus, who knows where technology will be in the next few years? Since more and more screen sizes and resolutions are introduced so frequently, how do we deal with this situation?
Flexible or Fluid Layouts are when structural elements break a layout's form when pushed enough. When first developed, designs weren’t that flexible and often couldn’t adjust from large to small screen. Now, we’re able to make things more flexible. Images can be automatically adjusted, and there are other workarounds. While this isn’t a complete fix, flexible layouts give designers and developers more options.
Flexible/Fluid Images
Working with images in a fluid layout can be tricky, but there are a number of techniques to resize images proportionately, many of which are easily done. The most popular option is to create a CSS property for max-width.
As long as no other width-based style overrides this rule, every image will load in its original size, unless it becomes narrower than the original width, and the code would look like this:
One key thing to keep in mind when working with images is space and download time. Be sure you know the current best practices and communicate with the dev team to ensure that image resolution and download times are efficient.
Custom Layout Structure
If your design has extreme size changes, you may want to consider changing the layout altogether. You can do this either through a separate style sheet, or more efficiently, through a media query. Types of Media Query Methods are: CSS 2.1 and CSS3 Media Queries, and JavaScript.
Showing or Hiding Content
When moving from a larger screen to a mobile device, showing every piece of content usually isn’t necessary, nor is it always the best option. There are some best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.
Fortunately, CSS has been allowing us to show and hide content with ease for years, and it’s done by using the display property in your CSS document. Values can be: none, in-line or block. This shouldn’t be confused with the property visibility; this just hides the content, whereas the display property gets rid of it altogether.
Touch screens vs Cursors
Touch screens obviously have a whole different set of design guidelines than traditional mouse-based interactions, as well as different capabilities. Fortunately, adapting your design for both doesn’t take a lot of effort, but it does require keeping additional concerns in mind. For example, there are no hover states on a touch screen and you can't do swiping gestures with a mouse, etc.
With the mobile world continually changing, responsive design is not the only option, it’s but one trick in the bag. When implemented correctly, responsive design can improve the user experience. That said, besides saving designers and developers some frustration, responsive web design also happens to be best for the user. Every custom solution makes for a better user experience. With responsive design, we can create custom solutions for a wider range of users, on a wider range of devices.
It might not completely solve it for every user, device and platform, so as new devices, resolutions and technologies continue to be available, designers and developers need to continually be aware of best practices.
Additional Resources
Responsive Web Design Guidelines and Tutorials
Responsive Web Design Guidelines and Tutorials
Responsive Images Done Right: A Guide To <picture> And srcset
70 Stunning Responsive Sites for Your Inspiration
Adapting To A Responsive Design (Case Study)
Fluid Grids from A List Apart
Image Sizing Resources
Fluid Images
Responsive Images: Experimenting with Context-Aware Image Sizing
Responsive Images and Context Aware Image Sizing
References
No comments:
Post a Comment