Mobile screen sizing » The Design of Sites
m1

Mobile screen sizing at a glance

Site Genre: Pattern Group m

magnify imageFigure M1.1 Google offers a special homepage for visitors using mobile phones. This stripped-down version of the main homepage offers access to all of the most important tools at a size that is large enough to easily read on a mobile device.

Background

Screen sizes are an ever-present problem for Web designers. As discussed in EXPANDING SCREEN WIDTH (I4) and FIXED SCREEN WIDTH (I5), the site designer can never be sure what screen resolution site visitors are using, or how large their browser windows are. Making this problem even more complex is the increasing popularity of Web-capable handheld devices that use extremely small screens.

Close

PROBLEM

Small screens are harder to read than large ones, and Web sites can be much more difficult to use on small-screen mobile devices because of their page layout.

buy the book to find out more

SOLUTION

magnify image Figure M1.9 A style sheet can format the contents of your site specifically for mobile devices.

When making a Web site available to mobile visitors, adding a mobile style sheet is the quickest way to reorganize each page, putting the most important content and navigation above the fold to make it easy to find and to minimize scrolling. If your site offers primarily a service, make sure the tools that customers need are above the fold. If your site provides content, make sure the primary content is above the fold. If your business justifies the expense, designing a custom application that is even easier for mobile customers to use might be appropriate.

Other Patterns to Consider

Consider the techniques discussed in EXPANDING SCREEN WIDTH (I4) and FIXED SCREEN WIDTH (I5) when designing sites for mobile customers. Complement the mobile output described in this pattern with MOBILE INPUT CONTROLS (M2). If your site can justify a custom application, more advanced interaction techniques, such as DIRECT MANIPULATION (H9), will be easier to deliver to your customers and offer them a richer experience.

Close

 

Pattern Resources

PATTERN COMMENTS

Comment now | One Commments >>

Have an idea? Tip? Suggestion? Share it!

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.