Design for Mobile Media

In this ever-evolving industry, I have learned that there are different methods and techniques to every media. More recently, I have been learning various standards for designing for mobile. I attend programming seminars as a designer because it is important for a designer to have an understanding and basic knowledge for programming in order to understand the possibilities and constraints of a medium.

As a result, I attended an online class by Amy Hoy and Thomas Fuchs entitled HTML5 Mobile Pro Workshop that focused on building mobile web apps with CSS. I have a working knowledge of HTML and CSS and own a mobile device. I thought that the class would be a great next step in gaining great knowledge of mobile design. The class focused on mobile media, CSS transformations, the program Canvas and CSS animations.

The class began with an overview of HTML5 by Amy Hoy. She described the reality of mobile design and development being the timely development of custom code (style sheets) for different browsers and platforms. However, developers and designers are learning the best ways to limit different style sheets just as developers have dealt with Internet Explorer when developing websites. Much like when the web began, mobile is always changing and moving.

Amy also explained in the class that when designing a website UI, one must consider hover state and large areas of interactivity. When designing for mobile UI, a designer must learn that there are elements that differ from online desktop websites: hover states, caching file sizes, multiple tabs, and the ability to click accurately in small areas. However, on the up-side, things that are gained on mobile are geolocation, linking to phone numbers, multitouch and pocketablility. As a designer, the multiple gestures and small canvas area are items that need to be evaluated in the defining of the project and functionality.

Hoy said that there are 3 guiding questions for UI design that need to be asked. First, where is the user going to use the phone? Second, where is the user? Third, what can the user do? When designing an application, I need to think about the physical location of the user when using the application, the type of internet and cell phone connection they will have when using the device and if they have the ability to use both thumbs during their gesturing. As a designer, I must consider screen obscuring from thumbs and hands which is very different from a desktop mouse icon.

Thomas Fuchs informed me how HTML5 works and what encompasses HTML5. HTML5 is a family of many technologies: animation, 3D, CSS3, video, offline apps, audio and geolocation. The beauty of HTML5 is that it allows for much more powerful styling with CSS3. When working with HTML5 Webkit browsers are the most flexible since it is open source. However, reality is that connection speeds are unpredictable when designing for mobile. When prepping graphics for HTML5, Thomas provided the following graphic on what is possible on various platforms.



For the iOS and Android, there are some key graphic preparation techniques that Thomas provided that was very useful for a designer. Pixel units are relative to a viewing device. When creating iOS graphics, file sizes for images must be smaller than 10MB, JPEGs should be less than 2 megapixels, and PNGs are great for iOS file formats. For default rendering of fonts, the iPhone 4 uses Helvetica Neue which is a lovely font. The Android does not support animated GIFs and has no subpixel antialiasing.

I learned about the program Canvas and CSS3 from Thomas. Canvas is a tool for 2D bitmap graphic creation. Interestingly, in order for the user to make a 1px graphic in Canvas, they have to create a .5 pixel coordinating system in order for it to render correctly. This program heightened the speed for the user and renders pixels line circles images, etc. fast. However, it doesn’t generate an HTML/DOM overhead file. CSS can be used to create visual design elements to assist in performance speed and graphic preparation. CSS transforms take fully rendered elements rotates, scows or scales an element; CSS Transitions can smoothly animate CSS properties from one value to an other, including sub-properties; CSS Animations smoothly animates CSS properties between keyframes of the animation. Since I also create video and motion graphics, I learned that when compressing video for mobile devices, a designers need to use H264 for iPod setting.

Source: http://html5mobilepro.com/
To learn more you can visit Amy Hoy’s blog at:
http://slash7.com/about/