Mobile & Tablet Device Designs

313 views

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
313
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Hi, my name is Sunni Chambers and I’m here to make sure that the marketers and web designers for Collins Catering & Events understand the importance and impact of the growth of mobile/tablet use on web design. We need to invest the time and resources to make sure that our website is up-to-date, and able to compete in the ever-changing Internet market.
  • Over the years, companies had a basic mobile strategy that included cramming all the content possible onto a website. They would then trim down content to fit on a smaller screen which made the site “mobile friendly”. Companies need to now move from being ”mobile-friendly” to thinking “mobile first”. According to Gartner, by 2013 more people will access websites through mobile devices than through desktop computers. Because of this fact, we here at Collins Catering & Events need to upgrade and redesign our website to ensure that viewers are getting the maximum experience possible when using our site on a mobile device.
  • Mobile Internet adoption is outpacing the growth of desktop Internet adoption. It has already been estimated that smartphones will outsell the global PC market in 2012, and heavy mobile data users will triple to one billion by 2013. A huge audience is emerging very fast, so now is the time to seize the mobile opportunity to provide a vastly improved experience for our users. We are only a year or two away from the mobile market being in the lead, and we need to be prepared.
  • As a company, we have to take into account that the web design for our website is going to be significantly different than our design for mobile phones and tablets. Extensive use of Flash looks wonderful on a traditional browser, but can display error messages on a mobile device. With mobile, less is more so we need to make sure that we keep things simple, clean, touch-friendly, and easy to navigate. Instead of having the normal 1024x768 space to work with that we are used to, we’ll now have to minimize our content to fit a screen that is 480x320. While this task is not impossible…it will require some hard work and dedication. We’ll have to figure out what markup language is best to deal with and what graphics and text will be best to deal with.
  • One major question that we’ll have to ask ourselves is, what current technologies can be used to make our website accessible on all devices? The markup language and coding, has become simplified, so it’s easier to change the code from a browser to a mobile device. Advances in technology also allow for mobile sites to detect where users are and present them with information that is relevant to them. Also, the ability to measure the audiences that are accessing our site will let us know what information that we need to render to them
  • Prada is one of many sites, that doesn’t work well on mobile devices. The reason for this problem is that the browser site is loaded with Flash, and mobile devices just aren’t capable of handling this kind of activity. Even though Flash works great on our browser, we have to be able to convert this same content without using Flash.
  • Louis Vuitton also experiences heavy problems due to Flash. Beautiful site on a desktop, but on a mobile device you will run into plenty of complications. The basic site is offered with numerous messages asking the user to download Flash, and even though the catalog is offered…there are no purchasing options available.
  • Facebook is one of the top sites that is both web and mobile friendly. Designers at Facebook have really put in the research, time, and effort to make their site wonderful. All of the information that a user can access on their desktop is available on mobile devices and the site is easy to navigate. This is the kind of conversion that we are shooting for.
  • Like Facebook, Twitter designers have been able to maximize what they need to put their site above and beyond in the mobile world. The site is easy to navigate, and a vast majority of users prefer the site on their mobile phone over a desktop.
  • We are going to make this company over the top!! We will create tabs and buttons to replace links so that users will be able to easily access them. We will limit our graphics to what is absolutely essential to what the user needs to have an “awesome” and fulfilling experience. I don’t want to use any Flash because it will display error messages and drive clients away. Color attracts users, so the more…the better. We will work to consolidate our information to one page that gives purchasing options and droptabs…so users won’t have to wait on information to load. This page isgoing to beamazing.
  • Mobile & Tablet Device Designs

    1. 1. Mobile/Tablet Design By: Sunni Chambers
    2. 2. How Has Mobile and Tablet Usage Grown?Thinking Mobile First!!
    3. 3. Estimated Future Usage Explosive Changes
    4. 4. Mobile/Tablet Usage’sImpact on Web DesignTime to Downsize
    5. 5. Current TechnologiesHTML5 LanguageKnow Your AudienceSave Preferences
    6. 6. PradaBlank Page Displayed on Mobile Devices Flash is Required to Operate
    7. 7. Louis VuittonFlash Required to OperateNo Purchasing Option Available
    8. 8. Facebook Easy to NavigateFull of Content
    9. 9. TwitterEasy to Navigate Full of Content
    10. 10. Collins Catering & EventsTabs and ButtonsColorsLimited GraphicsOne-page Navigation
    11. 11. ReferencesAll Images Retrieved From: Yahoo ImagesText References: http://mashable.com/2011/08/05/mobile-design-priority/ http://www.uxmatters.com/mt/archives/2011/03/10-ways- mobile-sites-are-different-from-desktop-web-sites.php http://www.netmagazine.com/features/mobile-first http://blogs.sitepoint.com/7-tips-to-make-your-web-site- mobile-friendly/ http://www.uxmatters.com/mt/archives/2011/01/designing- for-the-mobile-web-special-considerations.php http://sixrevisions.com/web-development/mobile-web- design-best-practices/

    ×