mobile web-design-trends-for-2011
DESCRIPTION
Mobile web-design-trendsTRANSCRIPT
![Page 1: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/1.jpg)
Mobile Web Design
designtracy
![Page 2: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/2.jpg)
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.
![Page 3: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/3.jpg)
designtracy
See some example
![Page 4: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/4.jpg)
designtracy
![Page 5: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/5.jpg)
designtracy
![Page 6: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/6.jpg)
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.
![Page 7: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/7.jpg)
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.
![Page 8: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/8.jpg)
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
![Page 9: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/9.jpg)
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
![Page 10: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/10.jpg)
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
![Page 11: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/11.jpg)
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
![Page 12: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/12.jpg)
Tips
designtracy
![Page 13: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/13.jpg)
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
![Page 14: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/14.jpg)
2 . Fingers are Bigger than Mice,Make clickable elements big enough for a fingertip, ≈44px²
designtracy
≈44px²
![Page 15: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/15.jpg)
3 . Don’t use hover states
designtracy
![Page 16: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/16.jpg)
4 . Always Use Clear Form Labels
designtracy
![Page 17: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/17.jpg)
5 . Large, Simple, Clear Typography
designtracy
![Page 18: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/18.jpg)
6 . White Space
designtracy
确保你的“触摸” 有足够的空间。
使用按钮,徽章或图标链接,而不是文本
链接。
添加大量的填充内容块之间建立明确界定
的领域。
增加行高让文字在小屏幕上更容易阅读。
![Page 19: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/19.jpg)
Conclusion!
designtracy
![Page 20: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/20.jpg)
Simplified navigation on mobile websites
designtracy
![Page 21: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/21.jpg)
Mobile websites dramatically shrink their content
designtracy
![Page 22: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/22.jpg)
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.
![Page 23: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/23.jpg)
Mobile Web Design Trends for 2011
designtracy
![Page 24: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/24.jpg)
designtracy
Slider Gallery
![Page 25: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/25.jpg)
designtracy
Large Photo Background
![Page 26: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/26.jpg)
designtracy
Magazine Style
![Page 27: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/27.jpg)
designtracy
Video Content Listing
![Page 28: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/28.jpg)
designtracy
Full Website Option
![Page 29: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/29.jpg)
designtracy
Social Networks Integration
![Page 30: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/30.jpg)
designtracy
Introduction Blocks
![Page 31: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/31.jpg)
designtracy
Common Website Design – Depleted Version
![Page 32: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/32.jpg)
designtracy
Grid Style Thumbnail Gallery
![Page 33: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/33.jpg)
designtracy
Two-Column Navigation Menu
![Page 34: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/34.jpg)
designtracy
Binary Linear Navigation Optimized for Fingertips
![Page 35: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/35.jpg)
designtracy
Drop-Down Menu
![Page 36: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/36.jpg)
designtracy
Image Based Navigation
![Page 37: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/37.jpg)
designtracy
Icon and Text Based Navigation
![Page 38: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/38.jpg)
designtracy
Horizontal Navigation Panels
![Page 39: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/39.jpg)
designtracy
Horizontal Panels with Overhead Image
![Page 40: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/40.jpg)
designtracy
Icon-Illustrated Horizontal Panels
![Page 41: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/41.jpg)
designtracy
Image-Illustrated Horizontal Panels
![Page 42: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/42.jpg)
designtracy
Accordion Style Horizontal Panels
![Page 43: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/43.jpg)
designtracy
Horizontal Panels with eCommerce Attributes
![Page 44: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/44.jpg)
designtracy
Transparent Style Horizontal Panels
![Page 45: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/45.jpg)
designtracy
Minimal Style
![Page 46: Mobile web-design-trends-for-2011](https://reader038.vdocuments.mx/reader038/viewer/2022103116/5585d53bd8b42aa01a8b5142/html5/thumbnails/46.jpg)
Questions?
designtracy