SlideShare uma empresa Scribd logo
1 de 34
Making Sites
Mobile-friendly

    Meghan Palagyi
Can Drupal sites look
  good on mobile
Can Drupal sites look
  good on mobile

        Yes!
Mobile Sites &
Mobile Apps
Mobile Sites &
    Mobile Apps

A mobile site is navigated to through a
  mobile browser like Opera or Safari
Mobile Sites &
    Mobile Apps

A mobile site is navigated to through a
  mobile browser like Opera or Safari
Mobile Sites &
    Mobile Apps

A mobile site is navigated to through a
  mobile browser like Opera or Safari


     A mobile app is a custom built
application that users download to their
                 device
Internet on the Go
Internet on the Go
• 11” to 17” laptops
• Netbooks
• Tablets and iPads
• iPhones and iPods
• Android phones
• Feature phones
Does your site
work in every
Does your site
   work in every
• Content visibility
• Layout hierarchy
• Text size
• Navigation and menus
• Image re-sizing
Is your site
reaching your
Is your site
   reaching your
• Early-adopters vs. late-adopters
• Technology interest level
• Hand-eye coordination and agility
• Browsing frequency
Designing for Without
 Comfortable Limits
Designing for Without
     Comfortable Limits

• Size of canvas
• Target Audience
• Needs
• Location
Planning: Things to consider
when designing in a mobile
           world
Planning: Things to consider
 when designing in a mobile
            world

• Touchscreens and touch navigation
• Accessibility
• Performance
• Page ‘Pace’
Method: Using
@media queries
Method: Using
 @media queries
• The adaptive, responsive approach
• Mobile first, designing for the
  fastest use from the beginning

• Design your theme with @media
  queries
Method: A
separate mobile
Method: A
 separate mobile
• Create a sub-theme specifically for
  mobile device use

• Need to integrate either browser or
  device detection

• Can be easier for pre-existing sites
• Should include the option for users
  to view the ‘desktop’ version
Mobiletools
Mobiletools
• drupal.org/project/mobile_tools
• Contrib module that allows you to
  manage a mobile sub-theme

• Choose which devices use which
  theme

• Can also assign permissions for
  mobile users
Which Method?
Which Method?
• Quote from original article
    “Responsive Web Design” by Ethan
    Marcotte
•   Fluid grids, flexible images, and media queries are the three
    technical ingredients for responsive web design, but it also
    requires a different way of thinking. Rather than quarantining
    our content into disparate, device-specific experiences, we can
    use media queries to progressively enhance our work within
    different viewing contexts. That’s not to say there isn’t a
    business case for separate sites geared toward specific devices;
    for example, if the user goals for your mobile site are more
Testing your Site
Testing your Site
• Test on actual devices to see your
  site

• Browser add-ons
• Mobile simulators
Cutting Out
 Content?
Cutting Out
         Content?
• Faster and more tailored
• Core information of site
• Not what people are expecting to
  see

• Can control with @media queries
  and mobile tools
Milk at the
Grocery Store
Milk at the
    Grocery Store
• Mini Display up front by the cashier,
  pints and gallons of skim, 2% and
  whole

• Full selection in the refrigerated
  section, know exactly where your
  brand and flavor of soy milk is
Making Sites Mobile-friendly
• Meghan Palagyi
• On Drupal and Twitter:                   dead_arm

• Resources:
 •   http://alistapart.com/articles/responsive-web-design/

 •   http://drupal.org/project/mobile_tools

 •   http://mobileportland.com/videos/myth-mobile-context

 •   http://www.springbox.com/mobilizer/
Thanks!
• Meghan Palagyi
• On Drupal and Twitter:                   dead_arm

• Resources:
 •   http://alistapart.com/articles/responsive-web-design/

 •   http://drupal.org/project/mobile_tools

 •   http://mobileportland.com/videos/myth-mobile-context

 •   http://www.springbox.com/mobilizer/

Mais conteúdo relacionado

Destaque

Adapter Poxy Pattern
Adapter Poxy PatternAdapter Poxy Pattern
Adapter Poxy PatternPhilip Zhong
 
Wordpress Security & Hardening Steps
Wordpress Security & Hardening StepsWordpress Security & Hardening Steps
Wordpress Security & Hardening StepsPlasterdog Web Design
 
裏Ocufes Oculus Riftを買ったおかげで出来たこと
裏Ocufes Oculus Riftを買ったおかげで出来たこと裏Ocufes Oculus Riftを買ったおかげで出来たこと
裏Ocufes Oculus Riftを買ったおかげで出来たことHaruto Watanabe
 
Biotechnology Virtual Lab.Day 2a
Biotechnology Virtual Lab.Day 2aBiotechnology Virtual Lab.Day 2a
Biotechnology Virtual Lab.Day 2ajmori1
 
Introduction to videoconferencing in schools
Introduction to videoconferencing in schoolsIntroduction to videoconferencing in schools
Introduction to videoconferencing in schoolsEleanor Schuster
 
Kudavi 1.30.2016
Kudavi 1.30.2016Kudavi 1.30.2016
Kudavi 1.30.2016Tom Currier
 
2011 animal services presentation june 2011
2011 animal services presentation june 20112011 animal services presentation june 2011
2011 animal services presentation june 2011SupportHersheysBill
 
Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...
Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...
Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...leonvit2005
 
Deiounca duncan's resume 2011
Deiounca duncan's resume 2011Deiounca duncan's resume 2011
Deiounca duncan's resume 2011ladydee2011
 
Luopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksi
Luopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksiLuopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksi
Luopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksiKouluterveyskysely
 
Xpflow training ppt_update_may 2007-051807
Xpflow training ppt_update_may 2007-051807Xpflow training ppt_update_may 2007-051807
Xpflow training ppt_update_may 2007-051807Debjani Roy
 

Destaque (18)

Presentation1
Presentation1Presentation1
Presentation1
 
05974812
0597481205974812
05974812
 
Adapter Poxy Pattern
Adapter Poxy PatternAdapter Poxy Pattern
Adapter Poxy Pattern
 
Puy chosuantai2
Puy chosuantai2Puy chosuantai2
Puy chosuantai2
 
Wordpress Security & Hardening Steps
Wordpress Security & Hardening StepsWordpress Security & Hardening Steps
Wordpress Security & Hardening Steps
 
裏Ocufes Oculus Riftを買ったおかげで出来たこと
裏Ocufes Oculus Riftを買ったおかげで出来たこと裏Ocufes Oculus Riftを買ったおかげで出来たこと
裏Ocufes Oculus Riftを買ったおかげで出来たこと
 
Biotechnology Virtual Lab.Day 2a
Biotechnology Virtual Lab.Day 2aBiotechnology Virtual Lab.Day 2a
Biotechnology Virtual Lab.Day 2a
 
Introduction to videoconferencing in schools
Introduction to videoconferencing in schoolsIntroduction to videoconferencing in schools
Introduction to videoconferencing in schools
 
Issue 1 Sept 2010
Issue 1 Sept 2010Issue 1 Sept 2010
Issue 1 Sept 2010
 
Kudavi 1.30.2016
Kudavi 1.30.2016Kudavi 1.30.2016
Kudavi 1.30.2016
 
Digg power point
Digg power pointDigg power point
Digg power point
 
2011 animal services presentation june 2011
2011 animal services presentation june 20112011 animal services presentation june 2011
2011 animal services presentation june 2011
 
Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...
Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...
Ο ΡΟΛΟΣ ΤΩΝ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΜΕΤΑΡΡΥΘΜΙΣΕΩΝ ΣΤΗ ΣΥΣΤΑΣΗ ΤΟΥ ΦΟΙΤΗΤΙΚΟΥ ΠΛΗΘΥΣΜΟΥ...
 
Deiounca duncan's resume 2011
Deiounca duncan's resume 2011Deiounca duncan's resume 2011
Deiounca duncan's resume 2011
 
Twitter tactics
Twitter tacticsTwitter tactics
Twitter tactics
 
Luopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksi
Luopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksiLuopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksi
Luopa: Kaikki mukaan! Yhteisöllisyys Helsingin peruskoulujen voimavaraksi
 
Epics
EpicsEpics
Epics
 
Xpflow training ppt_update_may 2007-051807
Xpflow training ppt_update_may 2007-051807Xpflow training ppt_update_may 2007-051807
Xpflow training ppt_update_may 2007-051807
 

Último

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 

Último (20)

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

Making Sites Mobile-friendly

  • 2. Can Drupal sites look good on mobile
  • 3. Can Drupal sites look good on mobile Yes!
  • 5. Mobile Sites & Mobile Apps A mobile site is navigated to through a mobile browser like Opera or Safari
  • 6. Mobile Sites & Mobile Apps A mobile site is navigated to through a mobile browser like Opera or Safari
  • 7. Mobile Sites & Mobile Apps A mobile site is navigated to through a mobile browser like Opera or Safari A mobile app is a custom built application that users download to their device
  • 9. Internet on the Go • 11” to 17” laptops • Netbooks • Tablets and iPads • iPhones and iPods • Android phones • Feature phones
  • 11. Does your site work in every • Content visibility • Layout hierarchy • Text size • Navigation and menus • Image re-sizing
  • 13. Is your site reaching your • Early-adopters vs. late-adopters • Technology interest level • Hand-eye coordination and agility • Browsing frequency
  • 14. Designing for Without Comfortable Limits
  • 15. Designing for Without Comfortable Limits • Size of canvas • Target Audience • Needs • Location
  • 16. Planning: Things to consider when designing in a mobile world
  • 17. Planning: Things to consider when designing in a mobile world • Touchscreens and touch navigation • Accessibility • Performance • Page ‘Pace’
  • 19. Method: Using @media queries • The adaptive, responsive approach • Mobile first, designing for the fastest use from the beginning • Design your theme with @media queries
  • 21. Method: A separate mobile • Create a sub-theme specifically for mobile device use • Need to integrate either browser or device detection • Can be easier for pre-existing sites • Should include the option for users to view the ‘desktop’ version
  • 23. Mobiletools • drupal.org/project/mobile_tools • Contrib module that allows you to manage a mobile sub-theme • Choose which devices use which theme • Can also assign permissions for mobile users
  • 25. Which Method? • Quote from original article “Responsive Web Design” by Ethan Marcotte • Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more
  • 27. Testing your Site • Test on actual devices to see your site • Browser add-ons • Mobile simulators
  • 29. Cutting Out Content? • Faster and more tailored • Core information of site • Not what people are expecting to see • Can control with @media queries and mobile tools
  • 31. Milk at the Grocery Store • Mini Display up front by the cashier, pints and gallons of skim, 2% and whole • Full selection in the refrigerated section, know exactly where your brand and flavor of soy milk is
  • 33. • Meghan Palagyi • On Drupal and Twitter: dead_arm • Resources: • http://alistapart.com/articles/responsive-web-design/ • http://drupal.org/project/mobile_tools • http://mobileportland.com/videos/myth-mobile-context • http://www.springbox.com/mobilizer/
  • 34. Thanks! • Meghan Palagyi • On Drupal and Twitter: dead_arm • Resources: • http://alistapart.com/articles/responsive-web-design/ • http://drupal.org/project/mobile_tools • http://mobileportland.com/videos/myth-mobile-context • http://www.springbox.com/mobilizer/

Notas do Editor

  1. A quick overview of the current state of mobile affairs! \n
  2. This is a question that a lot of clients are asking, and the answer is yes. They will say they want a mobile app, but there is a distinction between a mobile site and an app.There are considerations when building and designing, and helping your client decide what they actually need is an important role.\n\nhttp://www.ternbicycles.com/\n
  3. users navigate to a site through a browser, like safari on an iphone. This is different from a web app, which is a customized mobile application that a developer would build for your company and that requires a user to download in order to use. \nisepta.org\n
  4. users navigate to a site through a browser, like safari on an iphone. This is different from a web app, which is a customized mobile application that a developer would build for your company and that requires a user to download in order to use. \nisepta.org\n
  5. users navigate to a site through a browser, like safari on an iphone. This is different from a web app, which is a customized mobile application that a developer would build for your company and that requires a user to download in order to use. \nisepta.org\n
  6. \n
  7.  the site does not need to be exactly the same on every device just as it is not exactly the same in every browser. It’s a webpage, not a piece of paper, but what it does need to do is work, and deliver the content as earnestly as it can\n
  8. Take your audience into account.\nWho are you trying to reach? The average technology skills from age to financial levels varies, therefore you can not exclusively design your site in the most modern browsers, without consideration for fallbacks or older browsers if your audience is not an early-adopter crowd\nYou can't design for every instance of every user, but you can design a site that is hardy and up to usability standards\n
  9. Designers like to know their limits, so how does that affect your work when you don’t know how your user is going to be viewing your site?\n\na poster is a poster no matter where you put it\n\ndevelopers skill budget and time are still constraints\n\n
  10. 3. Planning: Things to consider in a mobile world\n              Touchscreen\n-conscious of content\n-we've let our sites get flabby because of faster connections, but now we need to consider the mobile use-case\n                  -there is no hover on a touch screen\n                        while it is great to do CSS3 hover things when there is a mouse, there is no hover on a touch screen\n                        navigation that requires hover drop downs isn't the best, but if you do it, need to make sure that there is a landing\n                  -also take into consideration that type needs to be bigger, and the contrast needs to be strong so that the content is readable \n            Accessibility\n                  -mobile phones have made huge strides for people with physical impairments, mainly through voiceover\n                  -ensuring that your code and page hierarchy follows accessibility standards and is concise will allow these users to access your site \n\nPerformance\n                  -people do have 3G and 4G, but not everyone so the load time is something to keep in mind, a super heavy site that takes forever to load is not doing it's job\n                  -type kit is a great way to serve up different fonts, as is @font-face, but they both can slow down your load time. Caching helps as does optimizing them, so consider balancing how much a nice or different font adds to you r design, versus how much it weighs on your page load. *don’t call the whole font-family if you only need a couple weights\n-a slide show or huge image on your homepage doesn't really lend anything to a user on a hand held device, either scale it down or chuck it if it isn't integral, and if it isn't integral why is it on your site in the first place?\n\nPage pace\nscrolling\npeople are now comfortable with scrolling up and down for content. above and below the fold does not mean anything on an endless screen, but the first thing on a page does\nalso 1 page with javascript takes less time to use than navigating through 3 steps of menus to individual pages, so condense if possible\nthe functionality of momentum-scrolling and find also allows users to get to what they are looking for\n\n
  11. Using CSS: The Adaptive, responsive approach\nMobile first approach, either designing for the smallest screen first, and then adding extras as you move up\nOr designing with the idea that lean, efficient coding so that the site can hold up as technology continues\nDesign your site and theme with @mediaqueries to alter depending on the view-port\n      scaling images\n      text size appropriate for the screen\n      can keep the same layout and content as the ideal site, or can deliver a targeted thing, some content removed (images) \nShow thesis code\nNeed to have a very strong handle on css in order to implement it properly, is purely through css, so can use on any site, doesn't matter that if it is built with drupal. Wouldn't recommend using a base theme, but rather crafting from scratch, but probably html5 base \nhttp://mediaqueri.es/\n
  12. Alternately, you can design a mobile specific site like m.facebook.com. This is not a web 'app', but a mobile version of your site. This method uses a browser or device sniffing add-on, for example, WURFL, that first detects what device you are using. Upon detection of a mobile browser, you would then have your mobile site load. The option to switch to the 'regular' site is necessary, because the browsing preference of your user may be to use the page they are used to seeing on a desktop and then enlaging it, viewing in chunks, facebook.com\n
  13. Mobile Tools\nhttp://drupal.org/project/mobile_tools \nMobile tools is a contrib module that you can install on your drupal site. Using Browscap or Wurfl it allows you to select different browsers or devices respectively, and assign a theme to each device. For example, you could create a mobile theme, and assign that to all of the devices, or you could create a mobile theme and an ipad theme, and have all of the devices use the mobile theme except for the ipad, which would be served the ipad theme you created.\n
  14. Ethan Marcotte\n\nhttp://www.alistapart.com/articles/responsive-web-design/\n\nhttp://www.abookapart.com/products/responsive-web-design\n
  15. test in the actual devices\nthere are in-browser using add-on-s, resizing the browser window\nmobile simulators 1.e. x-code are also available that help to a certain extent\nhttp://www.springbox.com/mobilizer/\nat this point though, you really just need to check to see\n
  16. Debate over whether or not you should show or hide content what is the context of a mobile site http://mobileportland.com/videos/myth-mobile-context\n
  17. Grocery Store Example\nmini milk display at the front of the store for get-in get out shopping\nVS\nfull milk display in the back of the store, know where it is, \n\ninstead of only showing the mini milk display, which is faster, but then you limit people's ability to know where something is on a site that they are used to seeing on a desktop and may not have the option they were searching for\n\nPossible solution:\nhave the address, phone number at the top of a page when viewing mobility, then the rest of the homepage is the same as the desktop version, so people can find why they are looking for by soon and scroll, just in case\n
  18. \n
  19. \n