Class 06 Notes

 

Topics

  • Flexible Images & Media
  • Capabilities
  • Organization
  • Content Strategy
  • Information Architecture: Communication Brief, Site maps, Wireframes

Today’s class objectives are to gain a better understanding of:

  • How do you make images and media flexible?
  • What are the capabilities to consider when designing for mobile devices?
  • What is the process for thinking about mobile first?
  • What is the important tips to remember regarding organization (navigation) for mobile web?
  • How is IA (Information Architecture) different for mobile design?

Errata

Be sure that your CSS files are in the correct order:

 

  <link href="css/reset.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">

 

Differences between margins and padding

– aka Resolution to the Confusion, thanks to Candice
  • Margin: to separate a block from things outside it.
  • Padding: to move the contents away from the edges of the block.

Rules

1. When setting flexible margins on an element, your context is the width of the element’s container.
2. When setting flexible padding on an element, your context is the width of the  element itself element’s container.

This is actually an error in my book, and in my original research: the divisor should be the same for margins and padding—that is, the width of the element’s container. This will be fixed in the book’s next printing, and I believe A Book Apart will be offering corrections to the electronic version. – Ethan Marcotte

Take 3: The “Correct” HTML5 Two Column Layout

The third time is the charm:

You may download the files here:
http://www.cavanaugh.smcgrdes.com/grdes75/_html5/html5-two-column-correct-style-flexible.zip

http://cavanaugh.smcgrdes.com/grdes75/_html5/html5-two-column-correct-style-flexible/


Flexible images

img {
max-width: 100%;
}

The max-width: 100%

the max-width: 100% rule can also apply to most fixed-width elements, like video and other rich media

img,
embed,
object,
video {
max-width: 100%;
}

.figure {
float: right;
margin-left: 1.8181818181827%; /* 12px / 660px */
margin-right: 1.8181818181827%; /* 12px / 660px */
width: 48.484848484848%; /* 320px / 660px */
}

Be sure to remove the height from the heading div. 

So we’ve cracked the problem of flexible images and media—right? One CSS rule and we’re done? — BECAUSE THIS JOB IS NEVER EASY

The max-width in Internet Explorer

The cold, hard truth is that Internet Explorer 6 and below don’t support the max-width property.

But in a separate IE6-specific stylesheet, include the following:
img,
embed,
object,
video {
width: 100%;
}

See the difference? IE6 and lower get width: 100%, rather than the max-width: 100% rule.

A word of warning: tread carefully here, for these are drastically different rules. Whereas max-width: 100% instructs our images to never exceed the width of their containers, width: 100% forces our images to always match the width of their containing elements.

Most of the time, this approach will work just fine.


Capabilities

This is what mobile capabilities allow you to do:

Mobile capabilities allow you to reinvent ways to meet people’s needs using exciting new tools that are now at your disposal.

+ Location detection

Location detection is a big deal because it allows mobile web experiences to use your current whereabouts to deliver relevant information.

Find My Pizza (Web App)
www.findmypizza.net
What’s the difference between this Web app and a Native app?

 

+ Device orientation/accelerometer

Accelerometers let us know when the device has been pivoted, tilted or rotated so our websites and applications can respond accordingly.

Accelerometers can also tell us the rate at which a device is moving in someone’s hand.

Bump (Native)
http://bu.mp/company/
Shake it (Web App)
http://shakeit.mobi/ 

 

+ Touch

From simple actions like “pull down to refresh” and “swipe for more options,” new interactions are slowly becoming expectations. But touch can go beyond simple interactions and sometimes drive the entire way an application is used.

Paper by FiftyThree from FiftyThree on Vimeo.

Chalk (Web App)
http://chalk.37signals.com/
Flipboard (Native)
http://flipboard.com/
Web App inspired by Flipboard
http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/

And additional capabilities may be here soon, including:

  • Direction: from a digital compass
  • Gyroscope: 360 degrees of motion
  • Audio: input from a microphone; output to speaker
  • Video and image: capture and input from a camera
  • Dual cameras: front and back
  • Device connections: through Bluetooth
  • Proximity: device closeness to physical objects
  • Ambient light: light/dark environment awareness
  • NFC: Near Field Communications through RFID readers
Use of camera
Card Munch (Native)
http://www.cardmunch.com/ 

Device Testing Lab

64 Digital’s device testing station. Photo © 2012 64Digital.


Designing Mobile First

At this point we’ve talked about reasons for designing and developing web experiences for mobile first. A mobile first approach:

  • Prepares you for the explosive growth and new opportunities emerging on mobile today.
  • Forces you to focus and prioritize your products by embracing the constraints inherent in mobile design.
  • Allows you to deliver innovative experiences by building on new capabilities native to mobile devices.

Organization (Navigation)

But the organization of mobile web experiences also needs to:

  • Align with how people use their mobile devices and why.
  • Emphasize content over navigation.
  • Provide relevant options for exploration and pivoting.
  • Maintain clarity and focus.
Tip 1: Mobile usage generally consists of a couple of interaction types:
  • Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
  • Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
  • Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
  • Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

Aligning with mobile behaviors also naturally aligns your website with real-world needs. Since a mobile experience can be accessed anywhere and everywhere, you need to think through how it can be useful to people wherever they may be.

Tip 2: Focus on Content instead of Navigation

Pivot and Explore

As a general rule, content takes precedence over navigation on mobile… Too many mobile web experiences start the conversation off with a list of navigation options instead of content.

Facebook recently redesigned their mobile web experience.

Discussion: ESPN

http://m.espn.go.com/wireless/

Tip 3: Though bottom menus are useful for further exploration they probably shouldn’t just duplicate a menu that can be found elsewhere

Getting back

Tip: Adding another back button in your mobile web experience’s header only confuses things. Someone using the site must ask, “Do both of these back buttons do the same thing?”
So when designing mobile web experiences, you can leave “back” back in the native app. If you need to provide people with a quick way to go “up” a level in your site consider a label other than “back.”

Tip 4: So while navigation menus fixed to the bottom of the screen might be a good idea in some native mobile applications, the variable presence of web browser menus and physical controls below the screen on mobile devices means they are often a poor idea in mobile web experiences. If you need a fixed menu, better to fix it to the top.

One eyeball, one thumb

The user needs clear, focused designs to get things done—not lots of navigation options getting in their way.

Organizing Mobile

When organizing your mobile web experience, think through how you can align mobile behaviors with your customer’s needs.

  • Mobile use cases like lookup/find, explore/play, check-in/ status, and edit/create allow you to think through how your site will be used on mobile and adjust its structure appropriately.
  • Focusing on content first, navigation second gets people to the information and tasks they want quickly.
  • Relevant and well-placed navigation options allow people to dive deeper or pivot to explore other parts of your site.
  • Reducing the amount of navigation choices and chrome on key tasks maintains clarity and focus on what people need to accomplish—helpful when they are hurried or in less than ideal situations.
  • And when they do have some relaxing time on the couch with their mobile, people will still appreciate the simplicity of your design!

Information Architecture

Rather than creating static screenshots, designers rely even more than ever on quick sketches, wireframing and making rapid HTML and CSS prototypes by ‘designing’ in the browser.

Tips

  • Making as much use as possible of paper, use it to test ideas at different sizes
  • Designing in the browser and work with HTML as early as possible, using Fireworks/Photoshop for creating assets rather than full layouts

Responsive Design Process

http://responsiveprocess.com/

Case study

http://danielmall.com/work/crayola/

Sketch Sheets (Thanks Murray!)

http://sneakpeekit.com/mobile-sketchsheets/
http://sneakpeekit.com/pad-sketchsheets/
http://sneakpeekit.com/browser-sketchsheets/#tab-32-4

 Wireframing kits

http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

Leave a Comment