It’s a Small World Wide WebIt’s official, the mobile web 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.

H O W D E S I G N L I V E • 2 0 1 6

Small Screens, Big Possibilities

Chris ConverseWeb: chrisconverse.com // Web: codifydesign.com

Twitter: @chrisconverse // LinkedIn: /in/chrisconverse // YouTube: /chrisconverse

1 of 11

Small Screens, Big PossibilitiesChris Converse

Responsive Design vs. Responsive ExperienceResponsive 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 DesignRearranging all elements to fit the

available screen

Responsive ExperienceAltering the behavior of the design and experience based on available

screen size, or other factors.

(The example to the right represents an expandable mobile menu)

2 of 11

Small Screens, Big PossibilitiesChris Converse

Video and AnimationWhile 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 ConferenceAnimated sprite sheet

Philadelphia Museum of ArtFrame blending

3 of 11

Small Screens, Big PossibilitiesChris Converse

SteamAnimated sprite sheet

Mobile GalleryRandomized frame switching

AdvertisementAnimated HTML elements

Video and Animation continued

4 of 11

Small Screens, Big PossibilitiesChris Converse

Interactivity

Touch Storytelling”Touch Storytelling” is a term we made totally made up at Codify Design Studio. Our idea was to create agraphic 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 PossibilitiesChris Converse

Interactivity continued

Interactive AnimationsAnimated 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 PossibilitiesChris Converse

OptimizationsYour site’s performance can make as much of an impression as its content.

Accelerated Mobile Pages ProjectThe Accelerated Mobile Pages (AMP) Project is an open initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.

Learn more about this initiative:

www.ampproject.org

Improving Performance on Mobile When considering user experience for mobile, speed of download is a huge factor. People are typically using a cellular data plan when browsing on phones, and website performance is rarely optimal under these circumstances.

Read these FREE articles:

Optimize Graphics for the Mobile Web

Improve Website Performance on Mobile Devices

Convert PNG-32 to PNG-8With the help of FREE software utilities, you can achieve semi-transparent (8-bit transparency) within a PNG-8 file, often reducing the file size by more that 70%.

Review this brief tutorials at Lynda.com:

Creating Smaller Web Graphics with PNG-8

7 of 11

Small Screens, Big PossibilitiesChris Converse

Access to HardwareMobile 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.

AccelerometerAn accelerometer is an electromechanical device used to measure acceleration forces. Such forces may be static, like the continuous force of gravity or, as is the case with many mobile devices, dynamic to sense movement or vibrations

Check out these FREE articles:

How to Use the Gyroscope of Your iPhone in a Mobile Web App

Motion Events (Apple)

Touch EventsIt is possible to significantly speed up, or extend the capabilities of your web page with touch events.

Check out the FREE article:

Multi-touch Web Development

Watch a tutorial on Lynda.com:

Create an iPad Web App

Device Camera and MicOne of the funnest technologies to come to web browsers in the last couple years is the ability to access the webcam and microphone without the need for a third party plugin.

Check out this FREE article:

Accessing the Device Camera with getUserMedia

GPSYour mobile web page can access the GPS features, if available, on a mobile device. This can be useful for people trying to find your place of business, or to tailor information based a user’s location.

Check out this FREE article:

HTML5 Tutorial: Geolocation

8 of 11

Small Screens, Big PossibilitiesChris Converse

Web AppsWeb 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• Runs “headless” version of browser• More screen real estate• Allows more immersive experience

Local Storage• Store info on each user’s device• Use a cache manifest to store files locally• Can run without an internet connection

Native App-like Experiences• Announcements• Favorites• Navigation Drawer

9 of 11

Small Screens, Big PossibilitiesChris Converse

Frameworks and UtilitiesThere are many frameworks available that will help you in developing more engaging, user experience son mobile devices.

ModernizrModernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Check out these FREE articles:

modernizr.com

iScrolliScroll is a high performance, small footprint, dependency free, multi-platform JavaScript scroller.

cubiq.org/iscroll-5

jQueryjQuery is a fast, small, and feature-rich JavaScript library.

jquery.com

jQuery MobilejQuery Mobile framework takes the “write less, do more” mantra to the next level

jquerymobile.com

PiqsureShare and explore high resolution photography on any screen.

piqsure.com

MegavisorCreate swipe-able galleries for any device. Use this player to bring your 3D photography to life.

megavisor.com/en

PhotoSwipeTouch optimized photo galleries.

photoswipe.com

AngularJSAngularJS lets you extend HTML vocabulary for your application.

angularjs.org

10 of 11

Small Screens, Big PossibilitiesChris Converse

Examples, Downloads, and Coupons

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: R E S P O N S I V E

Download Sample FilesGet some of the sample files from this workshop directly from Codify Design Studio via their Drobo 5n network drive.

Shortcut: co di f ydesign.com/go/ how

Experience the Examples

Try out some of the examples from the workshop on yoru own device.

Shortcut: co di f ydesign.com/go/ how

11 of 11