mobile web-design-trends-for-2011
DESCRIPTION
Mobile web-design-trendsTRANSCRIPT
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
