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

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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 2

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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 3

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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. 4

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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 5

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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. Design best practices 6

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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. Design best practices 7

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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. Keep navigation simple 8

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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. 9

Copyright 2012 Adobe Systems Incorporated. All rights reserved. Fluid Grid Layouts 10 In this example, a Fluid Grid Layout displays the page in a web browser.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. Fluid Grid Layouts 11 The Fluid Grid Layout displays the same page on a tablet.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. Fluid Grid Layouts 12 An now, the same page on a mobile phone.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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. 13

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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" /> 14  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.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. CSS media queries In this example, a media query is used to display the page in a web browser. 15 When viewed on a desktop, the page has a two-column layout.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. CSS media queries The media query is used to display the same page on a tablet screen. 16 The layout switches to a single column to fit the narrower screen of a tablet.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. CSS media queries And now, on a mobile phone. 17 Media queries restyle the page to fit the constraints of a much smaller screen.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. 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. 18