Mullennax p fwd_w4_presentation5
Download as PPT, PDF0 likes266 views
The document discusses fundamentals of mobile and tablet web design. It outlines the growth of mobile usage and impact on web design, focusing sites on being simple, clean, intuitive with less clutter and easy to use on smaller screens. Examples are provided of both good and bad mobile site designs.
Mullennax p fwd_w4_presentation5
- 1. Mobile/Tablet Web Design By: Phillip Mullennax
- 2. Fundamentals Of Web Design Full Sail University 01/28/12
- 3. Over View Mobile and Tablet Usage and Growth Mobile/Tablet effect on Web Design Current Technologies Examples of Good Sites Examples of Bad Sites
- 5. Mobile Usage
- 8. Evolution of Screen Size More Screen Space to Work With
- 9. Impact of Mobile Devices and Tablets on Web Design Less Space=More Focus Less Clutter Quick and Easy
- 10. Design Technology Choices HTML, XHTML,XML,WL,PHP,Flash,Java,CSS Cross-browser , Cybermosaic , Interaction design , Progressive Enhancement , Search engine optimization (SEO), User interface design , Web 2.0 , Web application framework , Web colors , Web safe fonts , Web usability , Website architecture , , Website builder , Website wireframe Java, Ruby, PHP, Perl, Python, XSLT, and so on and so on
- 11. Examples of Good Mobile Sites Simple Clean Intuitive Effective
- 13. Examples of Bad Sites: To much content Have to Scroll Small text Not Enough Space
- 14. Bad Example: Hard to Navigate
- 16. Resources: U.S. to use mobile internet more than wireline by 2015, IDC says by: Todd Hsaelton 09/12/11 http:// www.bgr.com/2011/09/12/u-s-to-use-mobile-internet-more-than-wire line-by-2015-idc-says/ Web Design Trends in 2011 Posted by Jacqueline Thomas on Jan 4 , 2011 http://webdesignledger.com/tips/web-design-trends-in-2011 Mobile Web Design: Best Practices Aug 18 201 0 by Alexander Dawson http://sixrevi sions.com/web-dev elopment/mobile-web-design-best-pract ices/ Microsoft Accessibility Technology for everyone; De veloping and an Accessible technology Plan http://www.mic rosoft.com/enable/business/plan.a spx Image: http://www.webmonkey.com/wp-content/uploads/2010/06/Se nchaTouch.jpg Image: http://www.designfloat.com/blog/wp-content/uploads/2 011/11/mobile-website-3.jpg Graphs http://www.internetretailer.com/trends/web-technology/ 27” Image: http://www.gadgetreview.com/wp-content/uploads/2011/04/Acer-S273 HLbmii-27-inch-LED-LCD-Monitor.jpg 14” Image: http ://www.dhoytt.com/assets/forsale/images/HPIM0304-photo.jpg iPhone 42 Image: http://obama.net/wp-content/uploads/apple-iphone-4-91.jpg iPad 2 Image: http://cdn2.ubergizmo.com/wp-content/uploads/2011/0 3/ipad-2-review-07.jpg Good sites: Image: http://www.netmagazine.com/features/m obile-first Bad: Image: http://www.psardo.com/ Image: http://www.intuitivconcepts.com/i ndex.htm
- 17. Shusaku Media Produced By:
Editor's Notes
- #4: Today we are going to look at the mobile web for devices like smart phones, tablets and e-readers and how they are impacting the face of the internet and e-commerce. We are going to first look at mobile and tablet usage and growth, the mobile and tablet and the effect they are having on web design. Then we’ll look at the current technologies. We’ll look at examples of good and bad design then finish up with what this can do for you.
- #5: There is no doubt that tablets and mobile web devices are here to stay. In fact, it is being predicted by IDC’s New World Media Market Model that by 2015 that Americans will be accessing the web more via a mobile device than desktops. Tablets are playing a big factor in this growth and with the availability of mobile devices more and more people across the glob are connecting to the web. U.S. to use mobile internet more than wireline by 2015, IDC says by: Todd Hsaelton 09/12/11 http:// www.bgr.com/2011/09/12/u-s-to-use-mobile-internet-more-than-wire line-by-2015-idc-says/
- #6: Smart Phones are also gaining in popularity due to the ease of use and accessibility. Not everyone has access to the web in a traditional way but a smart phone is more reachable for some. Also the ability to take it with you and stay connected anywhere is adding to their growth.
- #7: The IDC also reports that internet usage will grow form 2 billion users in 2010 to 2.7 billion users by 2015.
- #8: E-Commerce spending will grow from $708 billion in 2010 to $1.278 trillion by 2015 and advertising will grow from $70 billion in 2010 to $138 billion by 2015. This is where the future of the web is going.
- #9: At the birth of the internet screens were small and not very good which in turn affected the way websites were designed. As screens grew larger and were capable of better quality and resolution large content rich websites became the norm. There was so much screen space available that designers could put a lot on content and media on the page.
- #10: By the very nature of mobile devices and tablets web designers now have to change the way websites work to keep up with the new ways mobile devices work. For example: mouse vs. finger. Websites now need to be big enough to make navigation with a fingers user friendly and still have visual appeal for both mobile and desktop design or have different aspects to each device used. Mobile devices are much more laid back and hands on than a desktop. Web design needs to reflect that. Also due the different screen shapes of mobile devices websites need to be cleaner and more refined. It takes a simpler, more focused approach which in the end can make for a better site giving end users the information and interactivity they need without all the fluff and pomp that more space tends to end up with.
- #11: Mobile devices and Tablets are also changing what technologies are best to use. With the popularity of the iPad and iPhone and the fact that Apple is not supporting Flash, designers need to take this into account. As you can see there are many different technologies to use. So which is the right one? Microsofts Accessibility Technology For Everyone website has a great 5 step process to help out with just this issue with their “Developing an Accessible Technology Plan. 1. Define the accessible technology strategy 2. Identify the requirements 3. Design, Develop and Purchase the Technology 4. Implement and train 5. Maintain the technology and continue to learn.
- #12: You want the site to be easy to navigate and have the pertinent items at your finger tips. Instead of scrolling have links or buttons for navigation
- #14: These are basically regular sites that have been shoved onto a mobile device. They are hard to use and require a lot of scrolling.
- #16: For Collins Catering I would go with a mobile site different than the main site. The main site is where people go to find out the answers and to do their research. For the mobile site you want it to be simple with access to information such as: menus, calendars, address, reminders, booking events on line and following up. It should be geared for the needs of the person on the go and help make the process of getting ready for the event easier.