Mobile First by Luke Wroblewski

Cross posted from Akamai Community blog post: https://community.akamai.com/people/B-3-4NFR75/blog/2014/11/11/mobile-first-by-luke-wroblewski 

I just completed reading the book "Mobile First" by Luke Wroblewski. Being a pioneer of this idea, he has some very good suggestion that I think would help us site designers in developing a multi-device web presence.

Here are some of my notes from the book. Hope this is useful for you as well.

Mobile First Strategy

Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

Constraints on mobile - embrace the constraints!

Best practices to work around the constraints of a mobile device:

1. use image sprites
2. bundle together and minify CSS & JS
3. limit or remove dependencies on heavy JS libraries
4. limit the use of CSS grid system
5. use proper HTTP headers to ensure files are appropriately cached
6. take advantage of modern browser capabilities like Canvas and Appcache in HTML5
7. Use CSS3 properties for rounder corners, gradients, text shadows and box shadows.

Organizing content - content over navigation

1. Align with how people use their mobile devices and why
2. Emphasize content over navigation
3. Provide relevant options for exploration and pivoting
4. Maintain clarity and focus

Types of Mobile applications / websites - this classification is a very good model

1. Lookup / find (urgent info, local)
2. Explore/Play (bored, local)
3. Check In/Status (repeat / micro tasking)
4. Edit / Create (urgent change/ micro tasking)

Categorize your website or app and adjust the structure accordingly.

Actions (not very applicable for the kind of work at Akamai PS)

1. ensuring that touch targets are appropriately sized and positioned
2. being familiar with common touch gestures and how they map to people’s objectives
3. covering the loss of hover based integration
4. making sure we don’t forget about indirect manipulation along the way

Input 

1. Use mobile optimized labels
2. Take advantage of input types, attributes and masks to make mobile input easier.
3. Choose right layout for sequential, non-linear, and in-context forms

Other tips

1. Avoid dropdown - too touch intensive.
2. For common inputs, use a incremented/decrementer e.g. no of tickets 

Layout

1. let mobile device know that you are creating designs to fit them - use the meta viewport tag:  <meta name="viewport" content="width=device-width">
2. Be flexible, fluid and responsive in your layouts.
3. know the right break-points so that user experience is not impacted
4. reduce to the minimum amount necessary - site should have enough things to get the work done and no more
5. Account for devices with higher screen density by making available higher resolution images for devices that support it.
6. Account for device variation with responsive design or server side variations