Pratt CCPS Design for the Web: 2015-03-29

Responsive Design. What is it?

“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

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/#more-75660

How is mobile different?

“The first thing we need to understand about mobile design is that it’s different – and not just with regards to size. The physicality and specifications of mobile devices impart different design affordances and requirements. Because mobile devices are lighter and more portable, we often find it more convenient to use them. Consequently, through this more regular use, we feel a unique, emotional connection to them.” 1

Because mobile devices have fundamentally changed the users expectations, it’s important that designers design with a user-center design process to arrive at their solution.

There are four mobile delivery methods that a designer can use to achieve a user-centered design:

Mobile-specific site - which is optimized for mobile devices.
Responsive site - this type of site reorients itself for mobile devices.
Native app - an application that’s installed on the user's device. These are self-contained, and every screen of the app is defined up front.
Hybrid app - this can offer a little more flexibility, as it’s viewed in a browser. It loads content from the web and provides users with an “app-like” interface.

"People appreciate iOS apps that feel as though they were designed expressly for the device. For example, when an app fits well on the device screen and responds to the gestures that people know, it provides much of the experience people are looking for. And, although people might not be aware of human interface design principles, such as direct manipulation or consistency, they can tell when apps follow them and when they don’t. As you begin designing an iOS app, be sure to understand what makes iOS devices unique, and learn how to incorporate HI design principles so that you can deliver a user experience people will appreciate.” iOS Human Interface Guidelines

Mobile Information Architecture (IA)

Some of the more popular patterns that are practiced in mobile and tablet design are: Hierarchy, Hub & Spoke, Nested Doll, Tabbed View, Bento Box and Filtered View.

Hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site, you may be restricted to this; however, introducing additional patterns could allow you to tailor the experience for mobile.

Hub & Spoke is pattern gives users a central index from which users will navigate out. It’s the default pattern on Apple’s iPhone. Users can’t navigate between spokes, but must return to the hub instead.

Nested Doll leads users in a linear fashion to more detailed content. When users are in difficult conditions, this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back.

Tabbed View is a collection of sections tied together by a toolbar menu. This allows the user to quickly scan and understand the complete functionality of the app when it’s first opened.

Bento Box or dashboard pattern brings more detailed content directly to the index screen by using components to display portions of related tools or content. This pattern is more suited to tablet than mobile due to its complexity. It can be really powerful as it allows the user to comprehend key information at a glance, but does heavily rely on having a well-designed interface with information presented clearly.

Filtered View allows the user to navigate within a set of data by selecting filter options to create an alternative view. Filtering, as well as using faceted search methods, can be an excellent way to allow users to explore content in a way that suits them.

It’s important to understand how mobile and tablet interactions differ when compared to their desktop counterparts and designers need to consider the above methods and patterns throughout the entire design process - from R&D (Research & Development) to the final product - when designing for mobile because they impact the user.

There are also some interactions designers need to pay attention to when designing for mobile and tablet devices. These include: ergonomics, gestures, transitions, and mobile-specific interaction patterns.

Ergonomics
It’s important to pay attention to device dimensions as well as the practical components of a device. The way the user holds the device can influence how easy it is for the user to reach parts of the screen or “hit areas.” These are the areas of the screen the user touches to activate something and require enough space for the user to touch - the smallest button size is 44px square.

Gestures
All devices enable gestures which makes it a crucial component of mobile interaction design. Some of the gestures include: press, long press, double press, small swipe, large swipe, pinch/spread. There are some standards and patterns for developing gestures on touch-based devices that you can read more about here.

Transitions
These are interactions between application states that help tell a story or establish a gestural metaphor, and they help facilitate recall and prevent users from getting lost. Some of the basic interactions include:

Common Patterns
Because mobile devices have less space, along with the users viewing conditions often affecting their experience, it can be a challenge for designers to provide users with an efficient and positive user experience. Some of the most valuable interaction patterns include those used to improve navigation, select content, sign in/out, and negotiate forms.

Main Navigation
Main or “primary” navigation is a visual manifestation of our website's or application’s information architecture.

Selecting Content
Pressing links to activate content facilitates flow, making it easy for the user to quickly select content with one hand. If done well, this transition also increases user engagement.

Sign-In
Entering a username, email and password is an essential process for some applications. As designers, we can ensure that it’s as painless as possible.

Forms
Filling out forms on a mobile device can be a frustrating experience, especially if that form appears on a website designed for a desktop and lacks a mobile version. Make the process easier for the user by paying attention to the small details. You can also use native forms.

Getting the interactions accurate on a mobile device is essential. Today’s solutions become tomorrow’s standards and guidelines. It’s important to keep in mind the details that define a mobile layout and mobile-specific interactions. In doing this, designers can create intuitive mobile experiences that are then translated through the visual design. Below are some additional things to keep in mind when designing for mobile and tablet.

The structure of the layout needs to be taken into consideration as well as how to best utilize the available screen space; a grid system will help to achieve this.
Keep in mind that on a mobile device the user typically only moves vertically through content, whereas on desktop, the user is able to view content in any direction one wants.
Interactions must be user-friendly, and the visuals need to reinforce those interactions.
Sizing and placement of elements should ensure ease of use, and space to scroll and swipe must be sufficient to allow a user to easily navigate through these elements.
Group like or related items and establish a vertical rhythm that supports the communication of the content hierarchy.
As previously mentioned, by utilizing a grid system and placing elements on the baseline grid, it will make reading and understanding content easier, as well as create structure within the design.
And finally, using color is a valuable tool for communication. While it can be very subjective, it can be used to convey tone or style, to differentiate between sections, static items and interactive functionality and can also be used in communicating status changes.

References

Pratt CCPS Design for the Web

Pages

Wednesday, April 1, 2015

Responsive Design

Mobile & Table Design Basics