SlideShare a Scribd company logo
1 of 20
Old School Vs. Mobility
      Is your website up to date?
Remember this type of
    Computer?
Meet the new
Connection!
Is Your Website Mobile
        Friendly?
Think: Mobile First!
         Mobile is Seeing Explosive Growth

• Sales in Smartphones and Tablets are expected to
out ship the global PC market in 2012.

• By 2013, mobile data users will triple one billion.
             Data taken from: http://www.netmagazine.com/features/mobile-first
Think: Mobile First!
            Mobile forces you to focus.

• While the typical website is 1024X768 pixels

• Mobile sizes are around 320X480 pixels

HUGE difference in size! Thinking mobile forces you
to focus on the content that is important instead of
graphics and design.
            Data taken from: http://www.netmagazine.com/features/mobile-first
Think: Mobile First!
          Mobile extends your capabilities.

• Precise locations from GPS towers

• Wifi

• Integrated Audio
            Data taken from: http://www.netmagazine.com/features/mobile-first
Ways to Make Your Website
  More Accessible On
Smartphones and Tablets...
Add alternative text to
        images
Validate markup
Progress enhancement
Skip out on the Flash
Bad Examples:
www.SixtiesPress.com
• Way too many colors
• Links galore
• No organization
www.PandMComputers.com
I wish I could give you a list of
bad things about this website
but, unfortunately it would not
load on my smartphone.
Good Examples:
Orbitz
Expedia
Presenter’s Notes
Hi ladies and gentlemen from Abstraxion Design Company. My name is Cheri Hoke and I will be your presenter this afternoon. This
presentation is called Old School vs. Mobility. Is your website up to date?

As you may know, being mobile extends beyond using a laptop. The Internet is widely used on mobile phones, tablets, iPads, etc. We no
longer need to sit in front of a desk to be able to research topics online, read and answer email, chat, reach out to others via social
networking. No matter where we are in the world, whether we are at work, shopping, at the park, or the beach…we now have the
capabilities to carry these sources of communication along with us. This is why it's important for business like yourself to design a website
that is accessible not only to those with disabilities but for those that would perhaps view your website from mobile devices.

Being an advertising agency, I realize your website would need to be more visual rather than contain a vast library of text. However, have
you ever considered creating a website that detects mobile devices? This is an option you may want to consider. It will give you the ability
to get your information out there, allow you to down size your images to allow them to show up on smartphones, as well as allow you to
keep your website with your full digital portfolio.

Mobility is seeing an explosive growth in sales. More an more every day, cell phone carriers, companies such as Apple are seeing a huge
rise in sales for smartphones and tablets such as iPad. In 2011, sales forecasters have predicted that there would be a huge increase in
smartphones and tables for 2012. This increase was said to out ship the global PC market and by 2013, the mobile data users would
triple one billion.

Mobility makes you focus on what's important. It's no lie that making your website more accessible for mobile devices, you have to focus
on what content is more important and what needs to be cut out. A typical website is designed to fit the size of 1024X768 pixels as you
may know. But did you know that for a mobile device the average size is 320X480 pixels? That is a huge difference!

Mobility extends your capabilities by such benefits as precise locations from GPS towers. We all love those check-ins on the Facebook
App so all of our friends can see that we are dining out at the new restaurant in town or attending a party at so and so's house! Also,
mobility gives you the opportunity to use a Wifi connection instead of using up way too much data one month and end up spending way
too much on your cell phone bill. Integrated audio is another want and demand.

How can you make your website more accessible for smartphones and tablets? Here are some ideas to ponder:
• Adding alternative text to images. By doing this, it allows for someone that is disabled or can't see your image to see what is there. For
instance, if you have an image that provides a link, your viewer will not miss that particular information.
• Validate your markup. By validating your markup language, you are eliminating potential errors that may cause visual problems for your
website.
• Progress enhancement is the separation of HTML, CSS, and Javascript. This allows websites the ability to become enhanced
depending on the web browser's capabilities.
• Skip the Flash! Smartphones do not have the ability to read Flash code or Javascript. A better solution would be applications such as
Quicktime if video or audio is needed.

I have provided you with a few bad example of how websites will either look or not load properly on a smartphone device.

First I have a website called Sixties Press. Sadly, I cannot tell you what this website was about because I could not see it on my
smartphone. As you can see here, there are way too many colors, there are too many links, and no organization of the website. In all,
this website is a total mess!

Secondly, I have a website called P&M Computers. This website would not load at all on my Blackberry. After about 10 minutes of
trying to load, I received an error and my browser shut off.

Out with the bad and in with the good!

Orbitz was a great example of mobility. The site loads properly and instantly. No problem.

Another great example was Expedia. This site, no problem.

Do any of you have any questions you would like for me to address?




                                              References:
                                   Images taken from Google Images.

http://www.netmagazine.com/features/mobile-first
http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php
http://mashable.com/2011/08/05/mobile-design-priority/

More Related Content

What's hot

460finalprest
460finalprest460finalprest
460finalprest
ari_rang
 
5 ideas presentation
5 ideas presentation5 ideas presentation
5 ideas presentation
jamie_s92
 

What's hot (20)

What Lies Ahead for HTML5
What Lies Ahead for HTML5What Lies Ahead for HTML5
What Lies Ahead for HTML5
 
No Breaks
No BreaksNo Breaks
No Breaks
 
Fairphone - Unboxing and first impressions
Fairphone - Unboxing and first impressions Fairphone - Unboxing and first impressions
Fairphone - Unboxing and first impressions
 
10 Tips To Drive More Traffic To Your Mobile Site
10 Tips To Drive More Traffic To Your Mobile Site10 Tips To Drive More Traffic To Your Mobile Site
10 Tips To Drive More Traffic To Your Mobile Site
 
Mobile Recruitment Presentation
Mobile Recruitment PresentationMobile Recruitment Presentation
Mobile Recruitment Presentation
 
Letsgomo_whymcommerce
Letsgomo_whymcommerceLetsgomo_whymcommerce
Letsgomo_whymcommerce
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
101 Landing Page Optimization Tips
101 Landing Page Optimization Tips101 Landing Page Optimization Tips
101 Landing Page Optimization Tips
 
460finalprest
460finalprest460finalprest
460finalprest
 
The newbies guide to traffic generation
The newbies guide to traffic generationThe newbies guide to traffic generation
The newbies guide to traffic generation
 
SoLoMoBooks: Discovering Books on the Go
SoLoMoBooks: Discovering Books on the GoSoLoMoBooks: Discovering Books on the Go
SoLoMoBooks: Discovering Books on the Go
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Mobile Marketing & Student Recruitment: What's Hot & What's Not in 2011
Mobile Marketing & Student Recruitment: What's Hot & What's Not in 2011Mobile Marketing & Student Recruitment: What's Hot & What's Not in 2011
Mobile Marketing & Student Recruitment: What's Hot & What's Not in 2011
 
Going Mobile: Vacation Rentals in a Device-Driven World - VRMA Europe 2013
Going Mobile: Vacation Rentals in a Device-Driven World - VRMA Europe 2013Going Mobile: Vacation Rentals in a Device-Driven World - VRMA Europe 2013
Going Mobile: Vacation Rentals in a Device-Driven World - VRMA Europe 2013
 
Ipadvertising
IpadvertisingIpadvertising
Ipadvertising
 
5 ideas presentation
5 ideas presentation5 ideas presentation
5 ideas presentation
 
Portfolio/Test
Portfolio/TestPortfolio/Test
Portfolio/Test
 
NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...
NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...
NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...
 
Refresh Dublin: a pragmatic approach to mobile
Refresh Dublin: a pragmatic approach to mobileRefresh Dublin: a pragmatic approach to mobile
Refresh Dublin: a pragmatic approach to mobile
 
Mobile First Is Performance First
Mobile First Is Performance FirstMobile First Is Performance First
Mobile First Is Performance First
 

Similar to Hoke cheri project4

Kevin niles mobiledevices
Kevin niles mobiledevicesKevin niles mobiledevices
Kevin niles mobiledevices
kcsniles
 
The mobile website kit.templated
The mobile website kit.templatedThe mobile website kit.templated
The mobile website kit.templated
bwiredgroup
 
Tablet p4
Tablet p4Tablet p4
Tablet p4
trav73
 
Graydient Creative_LR
Graydient Creative_LRGraydient Creative_LR
Graydient Creative_LR
Shawn Spartz
 
Bowens noah mobile presentation
Bowens noah mobile presentationBowens noah mobile presentation
Bowens noah mobile presentation
tical3522
 
Cmjh mobile magazine
Cmjh mobile magazineCmjh mobile magazine
Cmjh mobile magazine
Chris Munce
 
LMA13 responsive design_final
LMA13 responsive design_finalLMA13 responsive design_final
LMA13 responsive design_final
Robert Algeri
 

Similar to Hoke cheri project4 (20)

Pierson lisa mobile_presentation
Pierson lisa mobile_presentationPierson lisa mobile_presentation
Pierson lisa mobile_presentation
 
Johnson stephanie mobile_presentation
Johnson stephanie mobile_presentationJohnson stephanie mobile_presentation
Johnson stephanie mobile_presentation
 
Benefits of Mobile Website
Benefits of Mobile WebsiteBenefits of Mobile Website
Benefits of Mobile Website
 
Kevin niles mobiledevices
Kevin niles mobiledevicesKevin niles mobiledevices
Kevin niles mobiledevices
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 
The mobile website kit.templated
The mobile website kit.templatedThe mobile website kit.templated
The mobile website kit.templated
 
Tablet p4
Tablet p4Tablet p4
Tablet p4
 
Mobile seminar-worksheet
Mobile seminar-worksheetMobile seminar-worksheet
Mobile seminar-worksheet
 
optimize website for mobile marketing
optimize website for mobile marketingoptimize website for mobile marketing
optimize website for mobile marketing
 
Why Your Company Needs Responsive Web Design by Ronn Torossian
Why Your Company Needs Responsive Web Design by Ronn TorossianWhy Your Company Needs Responsive Web Design by Ronn Torossian
Why Your Company Needs Responsive Web Design by Ronn Torossian
 
Graydient Creative_LR
Graydient Creative_LRGraydient Creative_LR
Graydient Creative_LR
 
5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App5 Top Web Design and Development Tips for an Awesome Web App
5 Top Web Design and Development Tips for an Awesome Web App
 
Bowens noah mobile presentation
Bowens noah mobile presentationBowens noah mobile presentation
Bowens noah mobile presentation
 
Project 4: Mobile and Tablet Design for Collins Catering & Events
Project 4: Mobile and Tablet Design for Collins Catering & EventsProject 4: Mobile and Tablet Design for Collins Catering & Events
Project 4: Mobile and Tablet Design for Collins Catering & Events
 
ur mobile - build your mobile world
ur mobile - build your mobile worldur mobile - build your mobile world
ur mobile - build your mobile world
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Cmjh mobile magazine
Cmjh mobile magazineCmjh mobile magazine
Cmjh mobile magazine
 
Chris Davis Mobile/Tablet Design Presentation
Chris Davis Mobile/Tablet Design PresentationChris Davis Mobile/Tablet Design Presentation
Chris Davis Mobile/Tablet Design Presentation
 
LMA13 responsive design_final
LMA13 responsive design_finalLMA13 responsive design_final
LMA13 responsive design_final
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 

Hoke cheri project4

  • 1. Old School Vs. Mobility Is your website up to date?
  • 2. Remember this type of Computer?
  • 4. Is Your Website Mobile Friendly?
  • 5. Think: Mobile First! Mobile is Seeing Explosive Growth • Sales in Smartphones and Tablets are expected to out ship the global PC market in 2012. • By 2013, mobile data users will triple one billion. Data taken from: http://www.netmagazine.com/features/mobile-first
  • 6. Think: Mobile First! Mobile forces you to focus. • While the typical website is 1024X768 pixels • Mobile sizes are around 320X480 pixels HUGE difference in size! Thinking mobile forces you to focus on the content that is important instead of graphics and design. Data taken from: http://www.netmagazine.com/features/mobile-first
  • 7. Think: Mobile First! Mobile extends your capabilities. • Precise locations from GPS towers • Wifi • Integrated Audio Data taken from: http://www.netmagazine.com/features/mobile-first
  • 8. Ways to Make Your Website More Accessible On Smartphones and Tablets...
  • 12. Skip out on the Flash
  • 14. www.SixtiesPress.com • Way too many colors • Links galore • No organization
  • 15. www.PandMComputers.com I wish I could give you a list of bad things about this website but, unfortunately it would not load on my smartphone.
  • 19. Presenter’s Notes Hi ladies and gentlemen from Abstraxion Design Company. My name is Cheri Hoke and I will be your presenter this afternoon. This presentation is called Old School vs. Mobility. Is your website up to date? As you may know, being mobile extends beyond using a laptop. The Internet is widely used on mobile phones, tablets, iPads, etc. We no longer need to sit in front of a desk to be able to research topics online, read and answer email, chat, reach out to others via social networking. No matter where we are in the world, whether we are at work, shopping, at the park, or the beach…we now have the capabilities to carry these sources of communication along with us. This is why it's important for business like yourself to design a website that is accessible not only to those with disabilities but for those that would perhaps view your website from mobile devices. Being an advertising agency, I realize your website would need to be more visual rather than contain a vast library of text. However, have you ever considered creating a website that detects mobile devices? This is an option you may want to consider. It will give you the ability to get your information out there, allow you to down size your images to allow them to show up on smartphones, as well as allow you to keep your website with your full digital portfolio. Mobility is seeing an explosive growth in sales. More an more every day, cell phone carriers, companies such as Apple are seeing a huge rise in sales for smartphones and tablets such as iPad. In 2011, sales forecasters have predicted that there would be a huge increase in smartphones and tables for 2012. This increase was said to out ship the global PC market and by 2013, the mobile data users would triple one billion. Mobility makes you focus on what's important. It's no lie that making your website more accessible for mobile devices, you have to focus on what content is more important and what needs to be cut out. A typical website is designed to fit the size of 1024X768 pixels as you may know. But did you know that for a mobile device the average size is 320X480 pixels? That is a huge difference! Mobility extends your capabilities by such benefits as precise locations from GPS towers. We all love those check-ins on the Facebook App so all of our friends can see that we are dining out at the new restaurant in town or attending a party at so and so's house! Also, mobility gives you the opportunity to use a Wifi connection instead of using up way too much data one month and end up spending way too much on your cell phone bill. Integrated audio is another want and demand. How can you make your website more accessible for smartphones and tablets? Here are some ideas to ponder: • Adding alternative text to images. By doing this, it allows for someone that is disabled or can't see your image to see what is there. For instance, if you have an image that provides a link, your viewer will not miss that particular information. • Validate your markup. By validating your markup language, you are eliminating potential errors that may cause visual problems for your website. • Progress enhancement is the separation of HTML, CSS, and Javascript. This allows websites the ability to become enhanced depending on the web browser's capabilities.
  • 20. • Skip the Flash! Smartphones do not have the ability to read Flash code or Javascript. A better solution would be applications such as Quicktime if video or audio is needed. I have provided you with a few bad example of how websites will either look or not load properly on a smartphone device. First I have a website called Sixties Press. Sadly, I cannot tell you what this website was about because I could not see it on my smartphone. As you can see here, there are way too many colors, there are too many links, and no organization of the website. In all, this website is a total mess! Secondly, I have a website called P&M Computers. This website would not load at all on my Blackberry. After about 10 minutes of trying to load, I received an error and my browser shut off. Out with the bad and in with the good! Orbitz was a great example of mobility. The site loads properly and instantly. No problem. Another great example was Expedia. This site, no problem. Do any of you have any questions you would like for me to address? References: Images taken from Google Images. http://www.netmagazine.com/features/mobile-first http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php http://mashable.com/2011/08/05/mobile-design-priority/

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n