WEB DESIGN FOR MULTIPLE SCREENS -...

Copyright 2012 Adobe Systems Incorporated. All rights reserved.

®®


®

1

WEB DESIGN 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


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


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.


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


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


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


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


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.


Fluid Grid Layouts

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


Fluid Grid Layouts

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


Fluid Grid Layouts

An now, the same page on a mobile phone.


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.


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.


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.


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.


CSS media queries

And now, on a mobile phone.

Media queries restyle the page to fit the constraints of a much smaller screen.


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.

Date post:	12-Aug-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

WEB DESIGN FOR MULTIPLE SCREENS -...

Documents