Making Sites Mobile-friendly

Editor's Notes

• #2 A quick overview of the current state of mobile affairs! \n
• #3 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
• #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 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
• #7 \n
• #8  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
• #9 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
• #10 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
• #11 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
• #12 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
• #13 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
• #14 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
• #15 Ethan Marcotte\n\nhttp://www.alistapart.com/articles/responsive-web-design/\n\nhttp://www.abookapart.com/products/responsive-web-design\n
• #16 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
• #17 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
• #18 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
• #19 \n
• #20 \n