1. WEB DESIGN FOR MULTIPLE SCREENS
Copyright 2012 Adobe Systems Incorporated. All rights reserved.

2. Designing for multiple screens
Designing for multiple screens
With so many devices used to view content on the Internet, web designers must now consider how a site appears and functions on multiple screens.
A few considerations:
Target devices and their screen sizes
How effectively a design scales to multiple screen sizes
How a design appears when viewed in landscape and portrait views
Readability of the content on small screens, such as on mobile phones
How users interact with a site, such as navigating pages or zooming screens
Compatibility with operating systems on devices
The question of viewing a site in landscape or portrait is important if viewers will access the site from a mobile device with auto rotation enabled.
Compatibility with different runtimes and operating systems: It used to be that a web designer had to consider whether a site would display properly in multiple browsers, but now a designer must also consider whether features and functionality of the site work in browsers, Android devices, iOS devices, Nokia devices, Motorola devices, and so on.

3. Designing for multiple screens
Decide which devices you’re targeting:
Standard desktop monitors
Wide-screen desktop monitors
Laptops and netbooks
Mobile devices such as
Smartphones (iOS, Android, BlackBerry, and Windows)
Tablets, such as iPad, Samsung Galaxy, and Kindle Fire
Desktop standard monitors are 4x3 aspect ratio
Desktop wide-screen monitors are 16x9 aspect ratio

4. Trends in web design for multiple screens
You can design web content for multiple screens. Each approach has its benefits and challenges.
Create a responsive or flexible design that adapts automatically to each user’s screen.
Create multiple versions of the same website and redirect users to the appropriate version of your content.
Create native mobile applications aimed at specific mobile devices and operating systems. Suggest that mobile users download and install the mobile app instead of using their mobile web browser to view the web version of the content.
Multiple versions and redirecting users: Another method for delivering a mobile design is to build an especially optimized layout for handheld devices. For example, you create an experience specifically for your mobile users without taking away from the experience of desktop users. For this to work, you will have to route traffic on your site depending on the user’s browser agent. For example, if a mobile device user visits your site (yousitename.com), then they will automatically be redirected to the mobile alternative URL.

5. Responsive designs
A responsive or flexible design scales and adapts your content to the screen and capabilities of each device.
Because so many devices in use, a cross-device web design is difficult to create, but there are some ways to make each website more responsive.
The basic idea of responsive web design is that a website should respond to the device it’s being viewed on. For example:
Adapting the layout to suit screen sizes (from widescreen desktops to phones)
Resizing images to suit the screen resolution
Using lower-resolution images for mobile devices
Simplifying page elements for mobile use
Hiding nonessential elements on smaller screens
Providing larger, finger-friendly links and buttons for mobile users
Detecting and responding to mobile features such as geolocation and device orientation

6. Design best practices
When designing web content for multiple screens, you’ll need to consider how things such as page layout, fonts, navigation, buttons, and rich media affect your site’s usability when viewed on different devices.
Consider the following best practices:
Begin with a detailed design plan; research your target audience and devices.
Use a consistent theme throughout your design.
Simplify navigation and content layouts.
Use icons to save space and improve usability.
Include white space for better readability, especially on smaller screens.
Limit the need to scroll, or use vertical scrolling only for longer pages.
Limit the use of large images (large file sizes).
Optimize content for faster access and a better user experience.

7. Design best practices Consider these additional best practices:
Design best practices
Consider these additional best practices:
Use video and audio sparingly (unless your site depends on it).
Take into consideration devices without a mouse or other pointing device. For example, can viewers use the site touch screens?
Use cookies sparingly.
Enable automatic sign-in for secure content.
Use Fluid Grid Layouts and CSS Media Queries in Adobe Dreamweaver CS6 to create flexible designs for multiple screens.
Test on multiple devices or use device emulators.
Use cookies sparingly if one of your target screens is a mobile device. Cookie support cannot be relied upon since it may be disabled either in the device or by the mobile network.
Enable automatic sign-in for secure content. This is especially important on a mobile device where data input is more difficult than on a desktop. If automatic sign-in is enabled, then your application should also include a link or button to sign out.
One way to test it to deploy your application on each target device. Another option is to test with device emulators. For example, Adobe Flash Professional CS6 includes a built-in mobile simulator for testing accelerometer, input, and geolocation features in a mobile application. Search online and you’ll find emulators for most devices, including Android, iPhone, Blackberry, and Windows—just to name a few.

8. Keep navigation simple
Keep navigation simple
One of the most common challenges in designing for the small screens of mobile devices is to balance creativity with ease-of-use. Anything that simplifies your layout and navigation will work to your advantage.
These design strategies help users find and view what they’re looking for:
Keep buttons large, with extra padding and spacing. Many devices have touch screens on which bigger buttons mean easier clicking.
Keep navigation simple. Don’t flood a navigation bar with several options; instead choose five or fewer, and create sub-navigation if necessary.
Vertical navigation menus make viewing longer lists easier on many mobile input devices.
Use buttons (or icons) instead of standard text links for navigation.
Avoid pop-ups or spawned windows.

9. Fluid Grid Layouts
Adobe Dreamweaver CS6 streamlines the task of building adaptive designs for multiple screens with its integrated fluid grid.
You can use CSS3 to create Fluid Grid Layouts that scale themselves to multiple screen sizes.

10. Fluid Grid Layouts
In this example, a Fluid Grid Layout displays the page in a web browser.

11. Fluid Grid Layouts
The Fluid Grid Layout displays the same page on a tablet.

12. Fluid Grid Layouts
An now, the same page on a mobile phone.

13. CSS media queries
The challenge is to ensure that your websites look good not only on a big screen but also on a tiny phone and everything in between.
Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user.
A part of the CSS3 specification, media queries expand the role of the media attribute that controls how your styles are applied.
It has been common practice for years to use a separate style sheet for printing web pages by specifying media="print." Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width and orientation.

14. CSS media queries
Here is an example of a simple media query: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=“stylesheet.css" />
If the browser displays this page on a screen that is less than 480 pixels wide, load stylesheet.css
CSS3 also includes orientation (portrait or landscape), device-width, min-device-width, and many more media queries.
View the examples on the next three slides to see how CSS Media Queries display the same website on three very different screens.

15. CSS media queries
In this example, a media query is used to display the page in a web browser.
When viewed on a desktop, the page has a two-column layout.

16. CSS media queries
The media query is used to display the same page on a tablet screen.
The layout switches to a single column to fit the narrower screen of a tablet.

17. CSS media queries And now, on a mobile phone.
CSS media queries
And now, on a mobile phone.
Media queries restyle the page to fit the constraints of a much smaller screen.

18. Summary
Smart phones, tablets, and other mobile devices are everywhere, and demand for the same content on multiple screens is growing.
As content designers, many of the principles you’ve learned for web design apply to the creation of mobile content, but there are some important differences.
The challenge for web designers is to ensure that your websites look good not only on a big screen but also on a tiny phone and everything in between.
When creating web content, you need to decide which devices you want your sites to be viewed. If you’re targeting multiple screens, consider creating a separate site targeted at each device, or make your site flexible or responsive to multiple screens.
You can create flexible content by using Adobe Dreamweaver CS6 Fluid Grid Layouts and CSS media queries.