SlideShare a Scribd company logo
1 of 15
Download to read offline
The Adult Literacy League 
By 
Noah Howard 
November 20th, 2014
Problem? 
In the world we live in, it’s imperative to have a 
mobile friendly website. 
• Usability 
• Easy navigation 
• Improved aesthetics
Smartphone units shipped
Tablets on the rise
Mobile use still on the rise?
How do websites work across 
platforms? 
• Progressive Enhancement 
• Graceful Degradation
Content Management Systems 
A CMS such as “Magnolia” can be very helpful in 
creating content for a mobile device.
Difference in code? 
• HTML for desktops and laptops 
• WML, IOS, Android for mobile devices
Recommendations 
• Use coding that will work across all platforms 
• Make sure to check the URL in every browser 
• Use CMS technology designed to work with 
mobile devices 
• Make sure the layout is mobile friendly
Would you want this to be you? 
There is no difference between the mobile site 
and the desktop site. 
Desktop Mobile
Would you want this to be you? 
Desktop 
Mobile
You want to be them! 
Do you see the difference? 
Mobile Desktop
You want to be them! 
Are they look remotely similar? 
Desktop 
Mobile
My plea 
• Understand how? 
• Understand why?
Sources 
• Dawson, A. (August 18th, 2010). “Mobile Web Design: Best Practices”. Retrieved from 
http://sixrevisions.com/web-development/mobile-web-design-best-practices/ 
• Faletski, I. (November 18th, 2009). “7 Tips to Make your Mobile Site Friendly”. Retrieved from 
http://www.sitepoint.com/7-tips-to-make-your-web-site-mobile-friendly/ 
• Ma, S. (January 17th, 2011). “Designing for the Mobile Web: Special Considerations”. 
Retrieved from http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web- 
special-considerations.php 
• Ma, S. (March 21, 2011). “10 Ways Mobile Sites are Different than Desktop Sites”. Retrieved 
from http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from- 
desktop-web-sites.php

More Related Content

What's hot

Cathryn allen assignment4
Cathryn allen assignment4Cathryn allen assignment4
Cathryn allen assignment4dance314
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptJonathan Stark
 
iPad Class
iPad ClassiPad Class
iPad ClassVic Ward
 
Why mobile is important
Why mobile is importantWhy mobile is important
Why mobile is importantAdam Lee
 
Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel PublishingJoe Welinske
 
Web accessibility and section 508 guideline
Web accessibility and section 508 guidelineWeb accessibility and section 508 guideline
Web accessibility and section 508 guidelineYi(Vincent) Cao
 
Responsive Web Design | Bside Studios
Responsive Web Design | Bside StudiosResponsive Web Design | Bside Studios
Responsive Web Design | Bside StudiosBside Studios
 
Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)Neeta Goplani
 
Jessica scott week 4 presentation
Jessica scott week 4 presentationJessica scott week 4 presentation
Jessica scott week 4 presentationmilakarma
 
Kotikan Guide to Mobile Development
Kotikan Guide to Mobile DevelopmentKotikan Guide to Mobile Development
Kotikan Guide to Mobile DevelopmentKotikan
 
Mobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro SvarytsevychMobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro SvarytsevychIgor Bronovskyy
 
Dan bowers mobile_tablet_design
Dan bowers mobile_tablet_designDan bowers mobile_tablet_design
Dan bowers mobile_tablet_designLargeDrPepper
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesMatt Machell
 

What's hot (18)

Cathryn allen assignment4
Cathryn allen assignment4Cathryn allen assignment4
Cathryn allen assignment4
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
 
mobile presentation
mobile presentationmobile presentation
mobile presentation
 
iPad Class
iPad ClassiPad Class
iPad Class
 
Why mobile is important
Why mobile is importantWhy mobile is important
Why mobile is important
 
Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel Publishing
 
Web accessibility and section 508 guideline
Web accessibility and section 508 guidelineWeb accessibility and section 508 guideline
Web accessibility and section 508 guideline
 
Content gone mobile
Content gone mobileContent gone mobile
Content gone mobile
 
Responsive Web Design | Bside Studios
Responsive Web Design | Bside StudiosResponsive Web Design | Bside Studios
Responsive Web Design | Bside Studios
 
Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)Responsive Design & Prototyping -- An Agency Model (Part 2/3)
Responsive Design & Prototyping -- An Agency Model (Part 2/3)
 
Mobile Internet
Mobile InternetMobile Internet
Mobile Internet
 
Jessica scott week 4 presentation
Jessica scott week 4 presentationJessica scott week 4 presentation
Jessica scott week 4 presentation
 
Kotikan Guide to Mobile Development
Kotikan Guide to Mobile DevelopmentKotikan Guide to Mobile Development
Kotikan Guide to Mobile Development
 
Mobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro SvarytsevychMobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro Svarytsevych
 
Mobile webapp
Mobile webappMobile webapp
Mobile webapp
 
No more mobile
No more mobileNo more mobile
No more mobile
 
Dan bowers mobile_tablet_design
Dan bowers mobile_tablet_designDan bowers mobile_tablet_design
Dan bowers mobile_tablet_design
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
 

Similar to Howard noah moblilepresentation

Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Nathan Gerber
 
Mobile/Tablet Design Implications
Mobile/Tablet Design ImplicationsMobile/Tablet Design Implications
Mobile/Tablet Design Implicationswilliamfay
 
Chris Davis Mobile/Tablet Design Presentation
Chris Davis Mobile/Tablet Design PresentationChris Davis Mobile/Tablet Design Presentation
Chris Davis Mobile/Tablet Design Presentationcsdavis20
 
Alexander michael project4
Alexander michael project4Alexander michael project4
Alexander michael project4Malexander34
 
Introduction to mobile site
Introduction to mobile siteIntroduction to mobile site
Introduction to mobile siteDigital Shende
 
Putting Mobile First - July 2013
Putting Mobile First - July 2013Putting Mobile First - July 2013
Putting Mobile First - July 2013Precedent
 
Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Hall_
 
Ginart elizabeth mobile presentation2
Ginart elizabeth mobile presentation2Ginart elizabeth mobile presentation2
Ginart elizabeth mobile presentation2eginart
 
mobile presentation
mobile presentationmobile presentation
mobile presentationlartei87
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandhjc
 
Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011Nathan Gerber
 
Hernandez nancy mobile_presentation
Hernandez nancy mobile_presentationHernandez nancy mobile_presentation
Hernandez nancy mobile_presentationNancy Hernandez
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your websiteMahmoud Farrag
 
Mobile first-edinburgh 030913
Mobile first-edinburgh 030913Mobile first-edinburgh 030913
Mobile first-edinburgh 030913Precedent
 
Hoke cheri project4
Hoke cheri project4Hoke cheri project4
Hoke cheri project4cherihoke33
 
Mobile and tablet web design
Mobile and tablet web designMobile and tablet web design
Mobile and tablet web designNina Say
 
Make a Mobile Web Site
Make a Mobile Web SiteMake a Mobile Web Site
Make a Mobile Web SiteJasmine Sante
 
Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Precedent
 

Similar to Howard noah moblilepresentation (20)

Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011
 
01 Mobile Jungle
01 Mobile Jungle01 Mobile Jungle
01 Mobile Jungle
 
Mobile/Tablet Design Implications
Mobile/Tablet Design ImplicationsMobile/Tablet Design Implications
Mobile/Tablet Design Implications
 
Mobile websites
Mobile websitesMobile websites
Mobile websites
 
Chris Davis Mobile/Tablet Design Presentation
Chris Davis Mobile/Tablet Design PresentationChris Davis Mobile/Tablet Design Presentation
Chris Davis Mobile/Tablet Design Presentation
 
Alexander michael project4
Alexander michael project4Alexander michael project4
Alexander michael project4
 
Introduction to mobile site
Introduction to mobile siteIntroduction to mobile site
Introduction to mobile site
 
Putting Mobile First - July 2013
Putting Mobile First - July 2013Putting Mobile First - July 2013
Putting Mobile First - July 2013
 
Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Ready, Set, Go Mobile!
Ready, Set, Go Mobile!
 
Ginart elizabeth mobile presentation2
Ginart elizabeth mobile presentation2Ginart elizabeth mobile presentation2
Ginart elizabeth mobile presentation2
 
mobile presentation
mobile presentationmobile presentation
mobile presentation
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotland
 
Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011
 
Hernandez nancy mobile_presentation
Hernandez nancy mobile_presentationHernandez nancy mobile_presentation
Hernandez nancy mobile_presentation
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
 
Mobile first-edinburgh 030913
Mobile first-edinburgh 030913Mobile first-edinburgh 030913
Mobile first-edinburgh 030913
 
Hoke cheri project4
Hoke cheri project4Hoke cheri project4
Hoke cheri project4
 
Mobile and tablet web design
Mobile and tablet web designMobile and tablet web design
Mobile and tablet web design
 
Make a Mobile Web Site
Make a Mobile Web SiteMake a Mobile Web Site
Make a Mobile Web Site
 
Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13
 

Recently uploaded

FILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
FILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJFILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
FILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJCASTROJANELLAT
 
Madalina Andronic (Romania) Timeless Shirts
Madalina Andronic (Romania) Timeless ShirtsMadalina Andronic (Romania) Timeless Shirts
Madalina Andronic (Romania) Timeless Shirtssandamichaela *
 
Strategic Plan CAFI APS (English presentation)
Strategic Plan CAFI APS (English presentation)Strategic Plan CAFI APS (English presentation)
Strategic Plan CAFI APS (English presentation)BiancaScrugli
 
Hallo-Wieners Full-Color Storyboard Project
Hallo-Wieners Full-Color Storyboard ProjectHallo-Wieners Full-Color Storyboard Project
Hallo-Wieners Full-Color Storyboard Projectsarahr51
 
Easter Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptx
Easter Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptxEaster Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptx
Easter Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptx17vsar056
 
Irma Kukhianidze (Georgian, 1970) part.4
Irma Kukhianidze (Georgian, 1970) part.4Irma Kukhianidze (Georgian, 1970) part.4
Irma Kukhianidze (Georgian, 1970) part.4sandamichaela *
 
AD349_pr06_Kai_Mendoza_w24 Brand Identity Presentation
AD349_pr06_Kai_Mendoza_w24 Brand Identity PresentationAD349_pr06_Kai_Mendoza_w24 Brand Identity Presentation
AD349_pr06_Kai_Mendoza_w24 Brand Identity Presentationmakaiodm
 
Culture advertisement from marketing ads
Culture advertisement from marketing adsCulture advertisement from marketing ads
Culture advertisement from marketing adsMuhammad Sohaib Afzaal
 
Hailey's On It! Road Trippin' Storyboard Sample 2
Hailey's On It! Road Trippin' Storyboard Sample 2Hailey's On It! Road Trippin' Storyboard Sample 2
Hailey's On It! Road Trippin' Storyboard Sample 2Casey Keith
 
CONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTS
CONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTSCONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTS
CONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTSKlineHyzonGTindaan
 
Media - Broadsheet new - Copy.ppt x
Media - Broadsheet  new - Copy.ppt          xMedia - Broadsheet  new - Copy.ppt          x
Media - Broadsheet new - Copy.ppt xWillowDryden
 
Script My Project class clown recent draft.pdf
Script My Project class clown recent draft.pdfScript My Project class clown recent draft.pdf
Script My Project class clown recent draft.pdfangzenafrost
 
Sample Board from Disney TVA - Hailey's On It!
Sample Board from Disney TVA - Hailey's On It!Sample Board from Disney TVA - Hailey's On It!
Sample Board from Disney TVA - Hailey's On It!Casey Keith
 
POWER MIGRACIÓN PARA LA ASIGNATURA DE .pptx
POWER MIGRACIÓN PARA LA ASIGNATURA DE .pptxPOWER MIGRACIÓN PARA LA ASIGNATURA DE .pptx
POWER MIGRACIÓN PARA LA ASIGNATURA DE .pptxmluisa9715
 
Arsen Pochkhua (Georgian artist, 1923 - 2001)
Arsen Pochkhua (Georgian artist, 1923 - 2001)Arsen Pochkhua (Georgian artist, 1923 - 2001)
Arsen Pochkhua (Georgian artist, 1923 - 2001)sandamichaela *
 
Hailey's On It! Road Trippin' Storyboard Sample
Hailey's On It! Road Trippin' Storyboard SampleHailey's On It! Road Trippin' Storyboard Sample
Hailey's On It! Road Trippin' Storyboard SampleCasey Keith
 
Lesson 4: Arts and Artisans Art App.pptx
Lesson 4: Arts and Artisans Art App.pptxLesson 4: Arts and Artisans Art App.pptx
Lesson 4: Arts and Artisans Art App.pptxclarizaFranco1
 
Irma Kukhianidze (Georgian, 1970) part.3
Irma Kukhianidze (Georgian, 1970) part.3Irma Kukhianidze (Georgian, 1970) part.3
Irma Kukhianidze (Georgian, 1970) part.3sandamichaela *
 
Patrick Star Show: King Neptune's Ball (Revisionist) #1
Patrick Star Show: King Neptune's Ball (Revisionist) #1Patrick Star Show: King Neptune's Ball (Revisionist) #1
Patrick Star Show: King Neptune's Ball (Revisionist) #1JasmineR4
 

Recently uploaded (20)

FILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
FILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJFILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
FILM-Ppt.pptxJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
 
Madalina Andronic (Romania) Timeless Shirts
Madalina Andronic (Romania) Timeless ShirtsMadalina Andronic (Romania) Timeless Shirts
Madalina Andronic (Romania) Timeless Shirts
 
Strategic Plan CAFI APS (English presentation)
Strategic Plan CAFI APS (English presentation)Strategic Plan CAFI APS (English presentation)
Strategic Plan CAFI APS (English presentation)
 
Hallo-Wieners Full-Color Storyboard Project
Hallo-Wieners Full-Color Storyboard ProjectHallo-Wieners Full-Color Storyboard Project
Hallo-Wieners Full-Color Storyboard Project
 
Easter Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptx
Easter Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptxEaster Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptx
Easter Eggs tfdyyguhiljhhxfghjgkhggcfxh(5).pptx
 
Irma Kukhianidze (Georgian, 1970) part.4
Irma Kukhianidze (Georgian, 1970) part.4Irma Kukhianidze (Georgian, 1970) part.4
Irma Kukhianidze (Georgian, 1970) part.4
 
AD349_pr06_Kai_Mendoza_w24 Brand Identity Presentation
AD349_pr06_Kai_Mendoza_w24 Brand Identity PresentationAD349_pr06_Kai_Mendoza_w24 Brand Identity Presentation
AD349_pr06_Kai_Mendoza_w24 Brand Identity Presentation
 
Culture advertisement from marketing ads
Culture advertisement from marketing adsCulture advertisement from marketing ads
Culture advertisement from marketing ads
 
Family Reveal
Family RevealFamily Reveal
Family Reveal
 
Hailey's On It! Road Trippin' Storyboard Sample 2
Hailey's On It! Road Trippin' Storyboard Sample 2Hailey's On It! Road Trippin' Storyboard Sample 2
Hailey's On It! Road Trippin' Storyboard Sample 2
 
CONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTS
CONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTSCONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTS
CONTEMPORARY PHILIPPINE ARTS FROM THE REGIONS NATIONAL-ARTISTS
 
Media - Broadsheet new - Copy.ppt x
Media - Broadsheet  new - Copy.ppt          xMedia - Broadsheet  new - Copy.ppt          x
Media - Broadsheet new - Copy.ppt x
 
Script My Project class clown recent draft.pdf
Script My Project class clown recent draft.pdfScript My Project class clown recent draft.pdf
Script My Project class clown recent draft.pdf
 
Sample Board from Disney TVA - Hailey's On It!
Sample Board from Disney TVA - Hailey's On It!Sample Board from Disney TVA - Hailey's On It!
Sample Board from Disney TVA - Hailey's On It!
 
POWER MIGRACIÓN PARA LA ASIGNATURA DE .pptx
POWER MIGRACIÓN PARA LA ASIGNATURA DE .pptxPOWER MIGRACIÓN PARA LA ASIGNATURA DE .pptx
POWER MIGRACIÓN PARA LA ASIGNATURA DE .pptx
 
Arsen Pochkhua (Georgian artist, 1923 - 2001)
Arsen Pochkhua (Georgian artist, 1923 - 2001)Arsen Pochkhua (Georgian artist, 1923 - 2001)
Arsen Pochkhua (Georgian artist, 1923 - 2001)
 
Hailey's On It! Road Trippin' Storyboard Sample
Hailey's On It! Road Trippin' Storyboard SampleHailey's On It! Road Trippin' Storyboard Sample
Hailey's On It! Road Trippin' Storyboard Sample
 
Lesson 4: Arts and Artisans Art App.pptx
Lesson 4: Arts and Artisans Art App.pptxLesson 4: Arts and Artisans Art App.pptx
Lesson 4: Arts and Artisans Art App.pptx
 
Irma Kukhianidze (Georgian, 1970) part.3
Irma Kukhianidze (Georgian, 1970) part.3Irma Kukhianidze (Georgian, 1970) part.3
Irma Kukhianidze (Georgian, 1970) part.3
 
Patrick Star Show: King Neptune's Ball (Revisionist) #1
Patrick Star Show: King Neptune's Ball (Revisionist) #1Patrick Star Show: King Neptune's Ball (Revisionist) #1
Patrick Star Show: King Neptune's Ball (Revisionist) #1
 

Howard noah moblilepresentation

  • 1. The Adult Literacy League By Noah Howard November 20th, 2014
  • 2. Problem? In the world we live in, it’s imperative to have a mobile friendly website. • Usability • Easy navigation • Improved aesthetics
  • 5. Mobile use still on the rise?
  • 6. How do websites work across platforms? • Progressive Enhancement • Graceful Degradation
  • 7. Content Management Systems A CMS such as “Magnolia” can be very helpful in creating content for a mobile device.
  • 8. Difference in code? • HTML for desktops and laptops • WML, IOS, Android for mobile devices
  • 9. Recommendations • Use coding that will work across all platforms • Make sure to check the URL in every browser • Use CMS technology designed to work with mobile devices • Make sure the layout is mobile friendly
  • 10. Would you want this to be you? There is no difference between the mobile site and the desktop site. Desktop Mobile
  • 11. Would you want this to be you? Desktop Mobile
  • 12. You want to be them! Do you see the difference? Mobile Desktop
  • 13. You want to be them! Are they look remotely similar? Desktop Mobile
  • 14. My plea • Understand how? • Understand why?
  • 15. Sources • Dawson, A. (August 18th, 2010). “Mobile Web Design: Best Practices”. Retrieved from http://sixrevisions.com/web-development/mobile-web-design-best-practices/ • Faletski, I. (November 18th, 2009). “7 Tips to Make your Mobile Site Friendly”. Retrieved from http://www.sitepoint.com/7-tips-to-make-your-web-site-mobile-friendly/ • Ma, S. (January 17th, 2011). “Designing for the Mobile Web: Special Considerations”. Retrieved from http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web- special-considerations.php • Ma, S. (March 21, 2011). “10 Ways Mobile Sites are Different than Desktop Sites”. Retrieved from http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from- desktop-web-sites.php

Editor's Notes

  1. We live in a very progressive world. Technology has grown exponentially in the last hundred years and has become more advanced than in the previous thousand years. We went from big box desk tops to mobile devices that fit into the palm of your hand. When a company creates a website for a desktop device, it usually doesn’t take into account what the website would look like on a mobile device. Companies need to be as progressive as technology has been. You should no longer concentrate on what the site will look like on a desktop, but now you must think about mobile devices as well. Mobile devices need to be easy-to-use. A website cannot be too condensed or complicated for mobile devices. It needs to have the same type of usability as it does on desktops, as well as improved aesthetics so that it retains its professional look on a smaller device.
  2. Take a look at how many more devices were shipped from 2009 through 2013. In 2009, there were 35 million smartphones shipped in the first quarter alone. At first glance it appears to be remarkable until you observe that just four years later, 315 million smartphones were shipped in the first quarter. That is about nine times more units shipped in in a period of four years.
  3. Desktops and Notebooks were the way to go for many years. You can see the steady increase in shipments starting in 1995. Both took a while to get established and increased slowly. Today growth in the sales of tablets has been immense. In a four year period, the sale of tablets reached heights that desktops and notebooks had never reached in a twenty year span.
  4. From May of 2013 to May of 2014, web usage on mobile devices has increased from 14 percent to 25 percent around the world. That means that mobile devices are starting to become more of the norm for web browsing. Again, this is not a small increase in a ten year span, this is over the course of one year. The world is changing drastically and quickly and its all headed in the direction of using mobile devices.
  5. When working with websites across different platforms, the coding has to be literate across all of the platforms. Many mobile devices don’t support the coding of desktop viewed websites so there are certain actions that can be done to adjust to the newer technology. Progressive enhancement is when the site establishes a base level experience for all of its users. As the browser is able to support more complex coding, more advanced functionality can be added to the site. Graceful degradation is pretty much the opposite of progressive enhancement. The site is built for the newer browsers while the technology does not work to its full potential in older versions of the browser. While the basics of the site will be available, the advanced functions or pictures might not work. With the growth of mobile devices, both progressive enhancement and graceful degradation must be taken into account when creating sites for all platforms.
  6. A content management system is an application that allows for editing and modifying the content on websites. These programs are usually used by people who are not well-trained in website design. The program keeps things simple for the user and helps create what the user has in mind. Magnolia makes you a rock star when it comes to creating and editing content. Magnolia specializes specifically in content management on mobile devices and can be a great asset to “The Adult Literacy League” moving forward.
  7. HTML works across desktop and laptop platforms but sites must be done in different code in order to work on mobile devices. Some mobile devices support WML while certain companies support only their versions. Apple devices use IOS technology while Google devices use Android technology. Code must be written in a way that can be supported by all of these technologies. It isn’t in the best interests of your company if your website can be accessed only from a desktop but can’t be fully accessed on an I-phone or Droid.
  8. Now, when it comes to the Adult Literacy League, I have a few suggestions on how to make sure its website can be used and accessed across all devices. The first is to make sure that the content is written in coding that can be read by all platforms. Time and energy should be spent to make sure that it can be accessed easily on all devices while ensuring that the site does not become out too cluttered on mobile devices. The Adult Literacy League should also check its URL in every browser to make sure it’s supported. A tiny mistake can prevent the website from showing up in certain browsers. If the site doesn’t work in a browser, it certainly won’t work in that browser on the mobile device. Another recommendation is to use a CMS program that can help. Not everyone can be an expert in designing websites, CMS technology will make life a lot easier. Lastly, it’s very important that the layout of the site fit perfectly in accordance with mobile device’s smaller screens.
  9. When you create your website to show up on mobile devices, you want to make sure the site fits well with the device. Take a look at these pictures. The first is a picture of mets.com on a desktop and the second is mets.com on mobile. Are there any differences? The site was not created for mobile devices. Neither he text nor pictures fit the screen of a mobile device. Everything is cluttered and the small writing makes it difficult or impossible to read the captions.
  10. The same can be said for steampowered.com. The desktop version is the same as the mobile version. Everything was shrunk in order to fit the screen of the mobile device. Anyone visiting this site on the mobile device is going to be unhappy with what comes up. No one wants to strain his eyes by trying to read the content. There is no style change or resizing of images. The change of the device (mobile vs. desktop), requires appropriate modification.
  11. Now take a look at the UPS website. On the right you have the desktop version of the website. Everything is explained and the navigation is easy. On the left you have the mobile version of the website. It is completely different from the desktop version. The writing and captions fit the small screen and the navigation is incredibly easy. The main page doesn’t have everything that the desktop version has, but it specifically gives the user what he wants. There is no nonsense or searching around. If I want to check my shipment it’s in the middle of the screen and requires no scrolling. UPS makes sure to prioritize all the content that a customer might want.
  12. If you take a look at the Chase website on the right, you can easily tell that it was set up for a desktop. When you take a look at the Chase website on the left, you will know that it was created for mobile use. A good mobile website should have be easy to use. Chase couldn’t fit everything on to the small screen of a mobile device that it could fit on to a desktop screen. For the mobile site, Chase limited the options to what people will need the most. Pictures and stories were eliminated because they are not necessary.
  13. This brings us to the end of the presentation. It is imperative for us to see where technology is going. We cannot create websites that don’t take into account the mobile users. The use of mobile internet is growing every year. If we are left behind, we might never be able to catch up. We have seen the differences of how sites appear on multiple platforms, it’s easy to understand what needs to be done. Be sure to create code that is used across all platforms in order to keep up with the competition. Understanding the need to update is probably the most important aspect I want you to take away from the presentation. Don’t try to be like other websites or other companies. Try to keep up-to-the-minute in this quickly changing world. Before we know it we will be creating new media because websites on mobile devices and desktops will be a thing of the pas!.