Project 4
•Download as PPTX, PDF•
0 likes•423 views
This document summarizes Jason Schintgen's Project 4 on mobile and tablet design from 6-29-14. It includes statistics on growth in mobile phone and tablet use as well as guidelines for mobile web design such as responsive design and optimization for various device sizes. Examples of both good and bad mobile web design are provided and analyzed, including recommendations for improving Collins Catering's mobile site.
Recommended
More Related Content
Viewers also liked
Viewers also liked (15)
Similar to Project 4
Similar to Project 4 (20)
Recently uploaded
Recently uploaded (20)
Project 4
- 1. PROJECT 4: MOBILE/TABLET DESIGN by Jason Schintgen 6-29-14
- 2. Mobile Phone Recent and Projected Growth http://www.statista.com/statistics/201182/forecast-of- smartphone-users-in-the-us/
- 3. Tablet Use Recent and Projected Growth http://www.statista.com/statistics/208690/us-tablet- penetration-forecast/
- 4. HOW HAS MOBILE CHANGED WEB DESIGN? • Less is More • “Smart Browsing” /Recognition of Various Device Sizes • Reduction or Elimination of 3rd Party Tools (such as Flash) http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are- different-from-desktop-web-sites.php
- 5. HTML5 and the Modern Web Image: http://www.stopandstaremarketing.co.uk/wp- content/uploads/2014/05/responsive-web-design.png
- 6. BAD EXAMPLE OF MOBILE WEB DESIGN: SOUNDTRACK EVENTS http://www.soundtrackevents.com • Key information displays “okay” on mobile • Background image does not move to mobile well • Difficult menu to use on mobile • Elements and images not mobile optimized
- 7. GOOD EXAMPLE OF MOBILE WEB DESIGN: HITS DJ SERVICE http://www.hitsdj.com • Responsive design displays well on mobile • Good vertical layout on mobile • Leads with business logo • Mobile friendly navigation features
- 8. GOOD EXAMPLE OF MOBILE WEB DESIGN: ROCKFORD WEDDINGS http://www.rockfordweddings.com • Responsive design displays well on mobile • Good vertical layout on mobile • Leads with business logo • Great mobile Social Share options
- 9. COLLINS CATERING: GOOD MOBILE DESIGN ELEMENTS • Responsive design displays okay on mobile • Good vertical layout on mobile • Leads with key business info http://www.collinscateringfla.com/
- 10. COLLINS CATERING: MOBILE DESIGN SUGGESTIONS • Menu not vertical mobile friendly • Images not mobile optimized (load slowly) • No social media presence • Phone number could be mobile optimized • Search button has no function http://www.collinscateringfla.com/Menu.aspx
Editor's Notes
- As you can see, smart phone use in the US has grown rapidly over the past few years. This growth is projected to continue at a high rate moving into the coming years as well. Because of this, it is important to consider their use when designing a new, quality website.
- Tablets are an even more recent introduction to the market than smartphones, however, as can be witnessed in this graphic, the number of tablet users has really exploded recently and is also projected to continue. Ranging in size from 7 inches up to almost 11, they can really be more of a “mobile” sized device or more of a “laptop” size device.
- Why does it matter that mobile and tablet use has grown so much recently? More users are using them more frequently and for different purposes than they would previously use a home computer or laptop. Instead of browsing the web for minutes to hours at a time, users are pulling out their mobile device looking for a specific answer, then quickly tucking that device away again. Because of this, it is important for web designers to keep sites clean and user friendly for mobile users, only displaying the information that is important to the viewer with a “less is more” approach. Of course, from the back end, it is important to design a sit that recognizes the type of device and the resolution the device is using so information is displayed in a way that allows it to be best viewed. Through CSS on the modern web, designers can do just this and easily reposition or alter what is seen on a website through a few simple lines of code. Finally, reducing or eliminating use of 3rd party tools and plugins, such as Flash, is a big part of designing a mobile friendly website. Thankfully, HTML5 is integrating features to eliminate the need for these anyway in the modern web.
- The most important part of designing for mobile use in the modern web is creating a responsive site using HTML5 and CSS3 that can easily recognize different size devices. This is especially important because phone screens range anywhere from 3-6.5 inches diagonally with tablets taking over from 7-11 inches. This means viewers can really have any size viewing window when visiting your website. Recognizing at what points certain pieces of content need to be restructured or eliminated plays a big role in modern web design to overcome this very issue.
- An example of where these practices have been implemented poorly can be seen on this website for a local Rockford, IL DJ. While the logo and the content mostly display alright, the background is definitely not mobile friendly, the menu is a traditional browser menu (which would be very difficult to click on), some integrated tools do not display properly, and some absolute elements require scrolling side to side, which is definitely a big “no-no” with mobile web design.
- One of his local competitors’ sites can be seen here. This website was designed in HTML5 with mobile in mind. The content displays cleanly and concisely, being completely vertical when it comes to scrolling. The logo is prominently displayed on top with a mobile-friendly drop down menu below, followed by a keyword-rich page title, and finally relevant page content.
- Another example of good mobile site design is my personal site, Rockford Weddings. Here, a mobile friendly, repeating background image fits any devices with any screen size. Like the Hits DJ site, you see the logo first and foremost, followed by social links and sharing options. On the home page, a scrolling window of images sized for mobile is visible, followed immediately by the relevant page content.
- If we analyze the catering site visited in week one, there are definitely some mobile friendly features put into place. For example, the site itself displays in a mobile-friendly format when pulled up on a mobile device. The logo and relevant business information is prominently displayed, as it was with the other sites viewed. There is also no horizontal viewing to the site and everything is vertical. Unfortunately, clicking on that highly visible search button in the bottom-right does absolutely nothing when tapped on a mobile device….
- When looking at the menu page specifically, which is very important for a catering company, you will see it is not optimized for mobile devices with a smaller horizontal resolution. Images and graphics are also very slow to load, indicating they are not reduced in size or otherwise optimized for mobile viewing. A small change I would suggest, since it is so prominently visible at the top of every page, would be to enable interactivity on the phone number, so you can just click on it to call with a mobile device. Finally, there are no social media buttons, callouts, sharing, or other features readily available on the mobile version of the site.