mobile web-design-trends-for-2011

Mobile Web Design

designtracy

What Is Mobile Web Design?

designtracy

It’s more revamping your style for the smaller screens and operating systems of the different

cellular devices out there.

designtracy

See some example

designtracy

designtracy

Advantages and Disadvantages of Mobile Web Design

designtracy

Advantages Starting off with the good, there is of course mobility itself. Anyone can

access the Internet in the palm of their hands. The time of just surfing the net at a desk or home is long gone. We are information addicts these days and you can reach your audience while they are on a bus, train, or local grocery store. If they need to find information about what is around them, they can find it—making your website a must on the go.

Another advantage, is the use of mobile web has gone up and seems to be rising. Making the demand high for the need to have mobile web pages. Clients are going to be asking you more and more about this and is something most web designers should be schooled in.

Disadvantages The two main disadvantages are the small screen size, and loading

time. Both of these are MUCH different on a cell phone than a computer. Because of this you will need to figure out how to design a page that is pleasing to the eye in a small area and still give the same information the visitor will need.

Cutting out “fluff” will help with text, and because the visitor will not be using a mouse try and stay away from them needing to click around for the information.

Why You Can’t Ignore Mobile Web Design

designtracy

234+ million Americans have cell phones (that’s almost 85% of the U.S. population).

An average of 42.7 million Americans, roughly 18% of cell users, actively used smartphones between November 2009 and January 2010.

Portait Dimensions-iphone

designtracy

iPhone Portrait Width 320pxiPhone Portrait Height 480px Status Bar Height 20pxNav Bar Height 44pxMain Content Area Height 367pxTab Bar Height 49px

Landscape Dimensions-iphone

designtracy

iPhone Portrait Width 480pxiPhone Portrait Height 320px Status Bar Height 20pxNav Bar Height 32pxMain Content Area Height 219pxTab Bar Height 49px

Landscape Dimensions-ipad

designtracy

iPad Landscape Width 1024pxiPad Landscape Height 768px Status Bar Height 20pxNav Bar Height 44pxMain Content Area Height 655pxTab Bar Height 49px Keyboard Height 352px

Portait Dimensions-ipad

designtracy

iPad Landscape Width 768pxiPad Landscape Height 1024px Status Bar Height 20pxNav Bar Height 44pxMain Content Area Height 911pxTab Bar Height 49px Keyboard Height 264px

Tips

designtracy

1 . Design with a fluid layout, min-width: 320px

designtracy

Device Screen res (height x width)

iPhone 320 x 480iPhone 4 320 x 480 (scaled by a factor of 2)Nokia N97 360 x 640HTC Legend 320 x 480LG eXpo 480 x 800

2 . Fingers are Bigger than Mice，Make clickable elements big enough for a fingertip, ≈44px²

designtracy

≈44px²

3 . Don’t use hover states

designtracy

4 . Always Use Clear Form Labels

designtracy

5 . Large, Simple, Clear Typography

designtracy

6 . White Space

designtracy

确保你的“触摸” 有足够的空间。

使用按钮，徽章或图标链接，而不是文本

链接。

添加大量的填充内容块之间建立明确界定

的领域。

增加行高让文字在小屏幕上更容易阅读。

Conclusion!

designtracy

Simplified navigation on mobile websites

designtracy

Mobile websites dramatically shrink their content

designtracy

designtracy

As you can see most are simple, get to the point but still utilize pictures and their company’s logo. Just think of mobile web design as a smaller version of the non-mobile site. You don’t need to throw out your knowledge of web design, just scale it down for the smaller screen and loading times and you should be able to come up with a successful page your client will love.

Mobile Web Design Trends for 2011

designtracy

designtracy

Slider Gallery

designtracy

Large Photo Background

designtracy

Magazine Style

designtracy

Video Content Listing

designtracy

Full Website Option

designtracy

Social Networks Integration

designtracy

Introduction Blocks

designtracy

Common Website Design – Depleted Version

designtracy

Grid Style Thumbnail Gallery

designtracy

Two-Column Navigation Menu

designtracy

Binary Linear Navigation Optimized for Fingertips

designtracy

Drop-Down Menu

designtracy

Image Based Navigation

designtracy

Icon and Text Based Navigation

designtracy

Horizontal Navigation Panels

designtracy

Horizontal Panels with Overhead Image

designtracy

Icon-Illustrated Horizontal Panels

designtracy

Image-Illustrated Horizontal Panels

designtracy

Accordion Style Horizontal Panels

designtracy

Horizontal Panels with eCommerce Attributes

designtracy

Transparent Style Horizontal Panels

designtracy

Minimal Style

Questions?

designtracy

designtracy

www.designtracy.com

f.s.design.tracy@gmail.com

+8618260028577