Transcript web_design_screens_p..

WEB DESIGN FOR
MULTIPLE SCREENS
®
1
Copyright
Copyright
2012
2010
2012
Adobe
Adobe
Systems
Systems
Incorporated.
Incorporated.AllAll
rights
rights
reserved.
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.
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
Use
with a detailed design plan; research your target audience and devices.
a consistent theme throughout your design.
Simplify
Use
navigation and content layouts.
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.
6
Copyright 2012 Adobe Systems Incorporated. All rights reserved.
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.
7
Copyright 2012 Adobe Systems Incorporated. All rights reserved.
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.
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
In this example, a Fluid Grid Layout displays the page in a web browser.
10
Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Fluid Grid Layouts
The Fluid Grid Layout displays the same page on a tablet.
11
Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Fluid Grid Layouts
An now, the same page on a mobile phone.
12
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" />

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.
14
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.
When viewed on a desktop, the page has a two-column layout.
15
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.
The layout switches to a single column to fit the narrower screen of a tablet.
16
Copyright 2012 Adobe Systems Incorporated. All rights reserved.
CSS media queries
And now, on a mobile phone.
Media queries restyle the page to fit the constraints of a much smaller screen.
17
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
Copyright 2012 Adobe Systems Incorporated. All rights reserved.