Session 1: One of the most important considerations for Mobile UX is form design. Often standard checkboxes, radio buttons, select lists, and buttons are too small to effectively tap. Furthermore the form layout may not be conducive to touch interaction when mouse or trackpad pointers are the basis of the design scheme. Today we will look at the difference between laying out forms for mobile devices versus laptop or desktop machines. Here’s a few articles that explain some of the important factors involved in mobile form interaction.
Form design for usability across desktop and mobile
How to Optimize Your Checkout for Mobile Devices
10 Ways Mobile Sites Are Different from Desktop Web Sites
jQuery Mobile includes a variety of interface objects optimized for mobile. In today’s demo we’ll look at creating a simple web form that takes advantage of these tools.
Session 2: After the Google Fu presentations we will have studio time in order for each of you to show me what you have prepared for your project milestones assigned during week 3. With the remaining time I will demonstrate one more features in jQuery Mobile that we have not yet reviewed.
Google-Fu
http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
This site offers the user to use a simple css mobile navigation system without using javascript or jquery.
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
Here you can use just css to have a panel style navigation without using any javacript or jquery.
http://blog.teamtreehouse.com/flexbox-next-generation-css-layout-arrived
This article explains some of the fetures of using flexbox in css instead of the “block/inline” display types.