SlideShare a Scribd company logo
1 of 11
Mobile/Tablet Design
     By: Sunni Chambers
How Has Mobile and
   Tablet Usage Grown?
Thinking Mobile

      First!!
Estimated Future Usage
 Explosive Changes
Mobile/Tablet Usage’s
Impact on Web Design


Time to Downsize
Current Technologies
HTML5 Language



Know Your Audience



Save Preferences
Prada
Blank Page Displayed on Mobile Devices




                        Flash is Required to Operate
Louis Vuitton
Flash Required to Operate




No Purchasing Option Available
Facebook
                         Easy to Navigate




Full of Content
Twitter
Easy to Navigate




                             Full of Content
Collins Catering &
          Events
Tabs and Buttons


Colors


Limited Graphics


One-page Navigation
References
All Images Retrieved From: Yahoo Images
Text 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/

More Related Content

Viewers also liked

Definition of allusion
Definition of allusionDefinition of allusion
Definition of allusionKorn Baa
 
Banat december 1
Banat december 1Banat december 1
Banat december 1Jess Malvar
 
Banat newsmag february no2
Banat newsmag february no2Banat newsmag february no2
Banat newsmag february no2Jess Malvar
 
Banat newsmag ferbruary
Banat newsmag ferbruaryBanat newsmag ferbruary
Banat newsmag ferbruaryJess Malvar
 
Indroduction to Web Application
Indroduction to Web ApplicationIndroduction to Web Application
Indroduction to Web Applicationtorny10
 
Banat august 4 (2)
Banat august 4 (2)Banat august 4 (2)
Banat august 4 (2)Jess Malvar
 
Banat newsmag 11;8 14;12
Banat newsmag 11;8 14;12Banat newsmag 11;8 14;12
Banat newsmag 11;8 14;12Jess Malvar
 

Viewers also liked (9)

Definition of allusion
Definition of allusionDefinition of allusion
Definition of allusion
 
Banat december 1
Banat december 1Banat december 1
Banat december 1
 
Banat newsmag february no2
Banat newsmag february no2Banat newsmag february no2
Banat newsmag february no2
 
Banat newsmag ferbruary
Banat newsmag ferbruaryBanat newsmag ferbruary
Banat newsmag ferbruary
 
Banat january
Banat januaryBanat january
Banat january
 
Indroduction to Web Application
Indroduction to Web ApplicationIndroduction to Web Application
Indroduction to Web Application
 
Banat august 4 (2)
Banat august 4 (2)Banat august 4 (2)
Banat august 4 (2)
 
Banat august 3
Banat august 3Banat august 3
Banat august 3
 
Banat newsmag 11;8 14;12
Banat newsmag 11;8 14;12Banat newsmag 11;8 14;12
Banat newsmag 11;8 14;12
 

Recently uploaded

cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一D SSS
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 

Recently uploaded (20)

cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 

Mobile & Tablet Device Designs

Editor's Notes

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.