HOW DESIGN LIVE • 2016 Small Screens, Big Possibilities

Chris Converse Web: chrisconverse.com // Web: codifydesign.com : @chrisconverse // LinkedIn: /in/chrisconverse // YouTube: /chrisconverse

It’s a Small World Wide Web It’s official, the is now king!

As of last summer, most web traffic sources report more website searches, visits, and sharing, are being done on mobile versus desktop computers.

With these smaller screens come big possibilities. Behind these screens await many features that can enhance the user experience of your web content. Learn what is possible as we explore features available in mobile devices and web browsers. Activate phone numbers as tap-to-call links, change your content based on GPS coordinates, or even make adjustments based on the accelerometer.

In addition to layout and functionality, we’ll also explore the possibilities of combining content with touch events. We’ll explore creating swipe-able content, making interactive galleries, and even create touch-driven animations.

1 of 11 Small Screens, Big Possibilities Chris Converse Responsive Design vs. Responsive Experience Responsive design can encompass more than simply rearranging elements of your layout. A responsive experience takes into account the entire user experience — both inside and outside of the design experience.

Responsive Experience Altering the behavior of the design and experience based on available screen size, or other factors.

Responsive Design (The example to the right represents Rearranging all elements to fit the an expandable mobile menu) available screen

2 of 11 Small Screens, Big Possibilities Chris Converse Video and Animation While video playback is excellent on mobile devices, using video as a design element is very limited. Autoplay is disabled on most every mobile device in order to save bandwidth. This poses certain challenges when looking to incorporate video and animation into your mobile web designs.

Below are two different solutions to combining elements of video with your mobile designs.

Adobe ADIM Conference Philadelphia Museum of Art Animated sprite sheet Frame blending

3 of 11 Small Screens, Big Possibilities Chris Converse

Video and Animation continued

Mobile Gallery Randomized frame switching

Steam Animated sprite sheet

Advertisement Animated HTML elements

4 of 11 Small Screens, Big Possibilities Chris Converse Interactivity

Touch Storytelling ”Touch Storytelling” is a term we made totally made up at Codify Design Studio. Our idea was to create a graphic that would change as you moved your finger across it. Depending on the location of your finger, we’d update the graphic to represent the current state of the story.

5 of 11 Small Screens, Big Possibilities Chris Converse Interactivity continued

Interactive Animations Animated graphics can represent abstract, intangible, or otherwise hard-to-grasp concepts. Adding an interactive component to animation allows you to represent various relationships to a particular situation. These relationships may represent certain geographic locations, consequences in financial investments, or even various states of a medical condition.

6 of 11 Small Screens, Big Possibilities Chris Converse Optimizations Your site’s performance can make as much of an impression as its content.

Convert PNG-32 to PNG-8 Accelerated Mobile Pages Project Improving Performance on Mobile With the help of FREE software utilities, you can The Accelerated Mobile Pages (AMP) Project When considering user experience for mobile, achieve semi-transparent (8-bit transparency) is an open initiative that embodies the vision speed of download is a huge factor. People within a PNG-8 file, often reducing the file size that publishers can create mobile optimized are typically using a cellular data plan when by more that 70%. content once and have it load instantly browsing on phones, and website performance everywhere. is rarely optimal under these circumstances. Review this brief tutorials at Lynda.com: Learn more about this initiative: Read these FREE articles: Creating Smaller Web Graphics with PNG-8 www.ampproject.org Optimize Graphics for the Mobile Web

Improve Website Performance on Mobile Devices

7 of 11 Small Screens, Big Possibilities Chris Converse Access to Hardware Mobile devices contain many technologies that survey the world around them, and let you capture that information. Below are some great articles and tutorials that will explore the many possibilities of combining the mobile web with device hardware.

GPS Accelerometer Touch Events Device Camera and Mic Your mobile web page can access An accelerometer is an It is possible to significantly One of the funnest technologies to the GPS features, if available, electromechanical device used speed up, or extend the come to web browsers in the last on a mobile device. This can be to measure acceleration forces. capabilities of your web page couple years is the ability to access useful for people trying to find Such forces may be static, like the with touch events. the webcam and microphone your place of business, or to continuous force of gravity or, as is without the need for a third party tailor information based a user’s the case with many mobile devices, Check out the FREE article: plugin. location. dynamic to sense movement or vibrations Multi-touch Web Development Check out this FREE article: Check out this FREE article: Check out these FREE articles: Watch a tutorial on Lynda.com: Accessing the Device Camera HTML5 Tutorial: Geolocation with getUserMedia How to Use the Gyroscope of Your Create an iPad Web App iPhone in a Mobile Web App

Motion Events (Apple)

8 of 11 Small Screens, Big Possibilities Chris Converse Web Apps Web apps provide a power alternative to native app development. Based on standard web technologies, web apps can provide many native app-like experiences while maintaining all of the flexibility of a traditional web site. And the best part...? NO APP STORES!

Save to Homescreen Local Storage Native App-like Experiences • Runs “headless” version of browser • Store info on each user’s device • Announcements • More screen real estate • Use a cache manifest to store locally • Favorites • Allows more immersive experience • Can run without an internet connection • Navigation Drawer

9 of 11 Small Screens, Big Possibilities Chris Converse Frameworks and Utilities There are many frameworks available that will help you in developing more engaging, user experience son mobile devices.

jQuery PhotoSwipe Modernizr iScroll jQuery is a fast, small, and feature- Touch optimized photo galleries. Modernizr tells you what HTML, iScroll is a high performance, small rich JavaScript library. CSS and JavaScript features the footprint, dependency free, multi- photoswipe.com user’s browser has to offer. platform JavaScript scroller. jquery.com Check out these FREE articles: cubiq.org/iscroll-5 modernizr.com

AngularJS jQuery Mobile Piqsure Megavisor AngularJS lets you extend HTML jQuery Mobile framework takes the Share and explore high resolution Create swipe-able galleries for any vocabulary for your application. “write less, do more” mantra to the photography on any screen. device. Use this player to bring next level your 3D photography to life. .org piqsure.com jquerymobile.com megavisor.com/en

10 of 11 Small Screens, Big Possibilities Chris Converse Examples, Downloads, and Coupons

Download Sample Files Get some of the sample files from this workshop directly from Codify Design Studio via their Drobo 5n network drive. Shortcut: codifydesign.com/go/how

Experience the Examples

Try out some of the examples from the workshop on yoru own device. Shortcut: codifydesign.com/go/how

HOW Design University Get Chris’s Creative a Responsive Web Design course for only $25.

This course was designed to teach you to create a web page that can adapt it’s layout to fit on any screen sizes across devices, as well as on paper when printed.

www.howdesignuniversity.com/courses/ responsive-web-design

Use coupon code: RESPONSIVE

11 of 11