User-Centric Mobile Design Presentation by: Amanda Lynn Ferry
Mobile Constrains: • • • •
Small screens makes screen real estate important Data usage becomes a concern Load time impacted heavily by file size Accessed by a mobile-minded audience
Users are not sitting down to view your site. They are on the move and easily distracted.
Mobile Capabilities • Touch-based interaction • Geolocation detection • Orientation of viewport It is important to keep in mind the environment in which the user will be accessing your site. What interactions are they used to, and what might not be. Actions which are easy with the use of a mouse may be difficult on touch screen devices.
Mobile Workflow • Mobile–first approach ensures thoughtful allocation of web real estate • Responsive web design (RWD) techniques can allow users to access most necessary with ease when implemented with the user in mind. • At this stage it is easiest to plan for possible future changes in content and layout. • Consolidating navigation items forces you to focus your content to you target audience.
Mobile Design Tips • Trim down content to only the most important • Stack content blocks vertically with the most important at the top. • Use vertical navigation and pull-down menus • Hide unnecessary content using display:none; • Consider placing the navigation near the bottom of the screen/page as mobile users will be accustomed to the bottom navigation patterns which mobile devices frequently use natively.
Practical Example • The following slide shows a site wireframe • Using this as a guide we can build the site with a mobile-first approach
Practical Example First we will inventory the blocks of content we have to work with: • • • • • •
Logo Navigation Title Social Media Icons Featured slider/Image Article/post copy
• Recent Articles • Ad space • Footer
Practical Example Next we will order these by importance 1. 2. 3. 4. 5. 6. 7. 8. 9.
Logo Navigation Title Featured slider/Image Article/post copy Recent Articles Social Media Icons Footer Ad space
Practical Example We now have a wireframe which uses mobile first principles. We have decided what will be most important to the mobile user and completely gotten rid of the things that don’t matter. As we scale back up to our desktop version we will begin to align the content horizontally until they fit back into our original design at full width. The key to this process is managing breakpoints based on content, not on the set resolution of any specific device. The technology will change and your users will thank you in the end.