Recommandé
Contenu connexe
En vedette
En vedette (18)
Dernier
Dernier (20)
Making Sites Mobile-friendly
- 1. Making Sites Mobile-friendly Meghan Palagyi
- 2. Can Drupal sites look good on mobile
- 3. Can Drupal sites look good on mobile Yes!
- 4. Mobile Sites & Mobile Apps
- 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
- 8. Internet on the Go
- 9. Internet on the Go • 11” to 17” laptops • Netbooks • Tablets and iPads • iPhones and iPods • Android phones • Feature phones
- 10. Does your site work in every
- 11. Does your site work in every • Content visibility • Layout hierarchy • Text size • Navigation and menus • Image re-sizing
- 12. Is your site reaching your
- 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
- 22. Mobiletools
- 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
- 24. Which Method?
- 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
- 30. Milk at the Grocery Store
- 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/
Notes de l'éditeur
- A quick overview of the current state of mobile affairs! \n
- 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
- 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
- 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
- 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
- \n
-  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
- 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
- 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
- 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
- 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
- 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
- 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
- Ethan Marcotte\n\nhttp://www.alistapart.com/articles/responsive-web-design/\n\nhttp://www.abookapart.com/products/responsive-web-design\n
- 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
- 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
- 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
- \n
- \n