Tải bản đầy đủ - 0 (trang)
Chapter 12. Designing Websites for Mobile Devices

Chapter 12. Designing Websites for Mobile Devices

Tải bản đầy đủ - 0trang

‌ esigning Websites

D



for Mobile Devices



Figure 12-1: 

Many large companies, like Amazon.com and Target.com

(pictured), create mobile versions of their sites, optimized

for display on small handheld devices like the iPhone.



Fortunately, Dreamweaver CS5.5 adds a couple of tools that tackle the problem of

mobile site design. The most straightforward method uses CSS; CSS3 offers a new

feature called “media queries” that lets you check the resolution of a device (how

many pixels wide a screen is) and supply styles for just that resolution. For example,

if a screen is 320 pixels wide (typical for phones held vertically, in “portrait” mode),

you can apply styles that format the page for that dimension. In other words, instead

of sending out different versions of the site to different-size devices, you distribute

the same site, but use different style sheets to format the HTML.

On top of that, Dreamweaver CS5.5 adds support for jQuery Mobile, a JavaScript

library that helps you build websites specifically tailored to mobile devices. With

some simple HTML, some fancy CSS, and some complex JavaScript programming,

476



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Previewing at

Different Resolutions



jQuery Mobile lets you create the common navigation elements found on smartphone applications. You can create a website that really feels like a phone application,

or you can use HTML, CSS, and jQuery Mobile to actually create a phone application that you can install on Android devices or upload to Apple’s App Store for use

on an iPad, iPhone, or iPod Touch. This chapter shows you how to create both a

traditional mobile website and an app-like mobile site.



Previewing at Different Resolutions

Testing web pages in different browsers has always been a chore for webmasters, and

that’s especially true for mobile design. To preview a web page on a phone, you have

to store the page on your server and use your mobile phone to connect to the website to see how it looks. Fortunately, Dreamweaver CS5.5 simulates different mobile

devices’ screen sizes so you can avoid this time-consuming step.



Multiscreen Preview

Once you design a site, you can click the Multiscreen button in the document toolbar (or choose File➝Multiscreen Preview) to open a window with three views of

your page, one each for a smartphone, a tablet, and a desktop browser (see Figure

12-2). Each version has a different width and height, and, because Dreamweaver

displays the pages using its WebKit browser, each represents a “live” view of the page.

That means that rollover effects, JavaScript, and links actually work.

Since the page is live, you can’t edit any HTML in this preview window. However, if

you have a big enough monitor (or better yet, two monitors), you can move the preview window out of the way and then edit the HTML and CSS in the document window. After making changes to the page, hit the Refresh button to see those changes

reflected in the preview window.

Unfortunately, the size of the three preview windows (Dreamweaver calls them

“viewports”) don’t really match the actual size of most devices. For example, the

smartphone viewport measures 320 × 300 pixels—too small for most phones. The

iPhone and many Android phones’ screens, for example, measure 320 × 480 pixels.

That means that while the width is correct, the height Dreamweaver displays doesn’t

really match any phone. The same is true for the tablet setting—Dreamweaver displays a 768 × 300 pixel screen, but the iPad, for example, is 768 pixels × 1024 pixels.

You can, however, change Dreamweaver’s default viewport sizes: click the Viewport

Sizes button in the Multiscreen Preview window and, in the window that appears,

type new width and height values for the three devices. Just be careful of setting the

height too tall, or there won’t be enough screen space to display all three views. For

example, if you set the tablet view to a height of 1,024 pixels to match an iPad, there

won’t be enough room (on most monitors, even large ones) to display the desktop

browser view.

When you’re done with the Multiscreen Preview, click the “close” icon in the top-left

corner of the window (circled in Figure 12-2).

chapter 12: designing websites for mobile devices



www.it-ebooks.info



477



Previewing at

Different Resolutions



Backward

Forward

Refresh page

Return to original page



Change viewport sizes

Edit media queries



Figure 12-2: 

The Multiscreen

Preview window

lets you view a web

page at three sizes,

representing three

different types of

device. In addition,

Dreamweaver displays

the pages in Live View

(page 642)—that is,

using its embedded

WebKit browser. As a

result, links are active

and if you click one,

the linked-to page will

appear in each view,

just like a real browser.

In fact, the preview

window includes navigation buttons (Back,

Next, Refresh, and

Home) just like a real

browser. The Home

button simply returns

you to the original

document you were

working on—the one

currently open in the

document window.



Previewing Other Resolutions

While Multiscreen Preview is the only way to see side-by-side comparisons of a page

viewed at different resolutions, it has its limitations. You don’t see the real size of a

particular device, for example, just a cropped version. In addition, you can’t edit the

page, and the preview window is so big that unless you have a really big monitor (or

two monitors), you can’t simultaneously edit the page and preview your changes.

And, finally, Dreamweaver limits the Multiscreen Preview to just three resolutions,

and in the ever-changing mobile phone and tablet landscape, you’ll no doubt have to

design for many additional resolutions.

Fortunately, Dreamweaver offers another way to see your mobile page-in-progress.

If you click the arrow to the right of the Multiscreen button in the document window

(circled in Figure 12-3), you’ll see a menu of options. The first is the Multiscreen

Preview discussed above, but the rest reflect specific resolutions for mobile devices.



478



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Previewing at

Different Resolutions



Figure 12-3: 

The Edit Sizes option

at the bottom of the

Window Size menu

lets you change

the list of options

Dreamweaver offers.

In addition, you can

add your own set of

resolutions to this

menu. For example, if

Microsoft introduces

a phone with 120- x

120-pixel screen,

select Edit Sizes from

this menu, and then,

in the Window Sizes

preferences window,

click the + button and

type in a new width,

height and description. After that, the

new resolution appears in this menu.



For example, if you select “320 x 480 Smart Phone,” you’ll see your page inside a

small, 320- by 480-pixel frame within the document window (see Figure 12-4).

Tip: You can access this list of screen resolutions in two other places: from the View➝Window Size menu

and from the Window Size menu at the bottom right of the document window (just to the left of the

download stats).



When you view your page at one of these preset resolutions, you can edit the HTML

by selecting either Design or Split view. In addition, you can click the Live View button and even use Live Code (page 460) and Inspect Mode (page 416).

To exit a preset-resolution window, choose Full Size from the Multiscreen menu

(Figure 12-3), or choose View➝Window Size➝Full Size.



chapter 12: designing websites for mobile devices



www.it-ebooks.info



479



Media Queries



Figure 12-4: 

The “320 x 480 Smart

Phone” preview is

almost as good as

seeing your page on

an actual phone. It’s

the size screen you

find on many smartphones, including the

iPhone. Since some

web browsers won’t

let you resize their

windows that small,

using an “outside”

browser to check your

site might not work.

That makes Dreamweaver’s preview a

great way to see how

a page will look on

the small screen.



Media Queries

As mentioned at the beginning of this chapter, CSS3 introduces a new concept called

“media queries,” which lets you assign styles to a page based on the width and height

of the destination browser. So you can create custom styles for mobile phones, tablets, and desktop browsers, and, in turn, customize your site’s presentation so that it

looks its best on each type of device. Because media queries are part of the yet-tobe-finished CSS3 standard, not all browsers support them. Fortunately, the browsers

you’re most interested in—those for mobile phones and tablets—do, so even though

Internet Explorer 8 doesn’t know what a media query is, your good old iPhone or

Android device does.

A “query” is just a question asked of a web browser: “Is your screen 320 pixels wide?”

If the answer is Yes, the browser uses a style sheet for just that size device. The code

that makes this happen looks pretty much the same as that for any external style

sheet:





The one addition to this standard style sheet link is the media attribute, which sets

up the conditions under which Dreamweaver uses a particular sheet. You encountered the media attribute in Chapter 8 to tell a browser to apply different styles depending on whether you print out a page or view it on-screen (see page 337). Media

queries are just an addition to the media attribute. In the example above, a browser

loads the phone.css external style sheet when someone views your site with a browser

whose width measures 320 pixels.

480



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Media Queries



Because 320 pixels is very precise—what if there’s a phone with a slightly smaller

screen, say one that’s just 300 pixels wide—it’s best to use a range of values in your

media query. For example, you might want to apply a particular style for screens that

are less than or equal to 400 pixels. You do that like this:





The notation “max-width:400px” is the same as saying “for screens that are at most

400 pixels wide.” So the body tag style would apply to screens that are 400px wide,

320 pixels wide, and 200 pixels wide, for example.

Likewise, there’s a Min Width option that determines whether a browser is at least

a certain width. This is useful when you target a device that’s bigger than a mobile

phone or a tablet. For example, you could write this link to apply styles to screens

wider than the 768 pixels of many tablets:





To use this style sheet, a browser window must be at least 769 pixels wide—that’s 1

pixel wider than a tablet.

And finally, you can set both Max Width and Min Width attributes to target devices

that fall between phones and desktop browsers. For example, to create a set of styles

for a tablet that’s 768 pixels wide, you could use this CSS code:




Using Dreamweaver’s Media Queries Tool

To get started with media queries in Dreamweaver, open a web page and then launch

the Media Queries window using one of these techniques:

• Choose Insert➝Media Queries.

• Choose Modify ➝Media Queries.

• Choose Media Queries from the Window Size menu (see Figure 12-3).

Whichever method you choose, the Media Queries window opens (see Figure 126). You need to follow a few steps to get started, but the most important decision is

determining where you should write the media queries: in a site-wide file or in the

current page.

Using a site-wide media queries file

A site-wide media queries file is a single, external style sheet with media queries that

point to different style sheets—one for each target device (see Figure 12-5, bottom).

Each page in the site links to the site-wide file, which in turn loads the style sheet

appropriate for the target device. As mentioned above, this approach has several

benefits: you add less HTML to each web page—just one line for the site-wide file,

instead of one line per device; it’s easier to add or remove a media query from your

site—you edit only one site-wide file instead of each web page. In addition, as you’ll

see on page 487, it’s faster to add the site-wide file to a web page using Dreamweaver.

Because of these advantages, it’s generally a good idea to use the side-wide media

queries file.

Note: The one downside to a site-wide media queries file is that it requires one additional request of the

web server—the receiving browser has to download the site-wide file and the style sheet for your visitor’s

particular device. Downloading that additional file results in a slight performance hit, but unless you get

huge amounts of traffic, no one will notice.



chapter 12: designing websites for mobile devices



www.it-ebooks.info



483



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 12. Designing Websites for Mobile Devices

Tải bản đầy đủ ngay(0 tr)

×