Session 1: One of the most common techniques for improving the mobile web application user experience is to show/hide the universal navigation with a simple menu, or “hamburger” icon. This is a very simple technique that uses a combination of CSS3 media queries and JavaScript. In today’s demo we’ll look at this technique as well as explore more examples of how to apply jQuery Mobile features to our work in progress.
Session 2: After our Google-Fu discussion and mockup critiques let’s continue demonstrations using jQuery Mobile. Specifically today it will be important to have a functional, responsive navigation system in place. In order to do this we will have significant changes to the CSS across our media query breakpoints. A responsive slide out panel might be the best way to achieve this.
Mobile Web Application Milestone #1
Due: Week 4, Session 2
Be prepared for the milestone by implementing a fully function and responsive navigation system into your template work in progress. Also make sure you are able to illustrate this functionality by having placeholder content in place.
1. Have a hideable and responsive navigation system in place
2. Illustrate how your template responds at various breakpoints
3. Have placeholder content on a minimum of three pages or content areas
This first link showcases navigation design and what to consider by offering a “problem” and “solution” to each example.
Article 1
The next link gives several jQuery and CSS animation effects.
Article 2
The last link shows what is trending in web and mobile design for 2015.
Article 3