LukeW’s Notes on Jason Grigsby’s Mobile First Responsive Design from An Event Apart 2014

summary of a post by LukeW on  

Users expect sites to load in less than 2 seconds

Slow sites are the main reason shoppers abandon eCommerce sites

Here are some technical details of what you can do to improve your site’s performance on mobile:

1 Build mobile-first responsive designs

  • Start with baseline mobile experience and enhance with a media cascade from small to large screens
  • By building mobile first, you focus on key screens, flows and interactions. Your desktop site will also benefit from this focus

2. Keep CSS images in their place

  • Scope images inside media queries and set up media queries to isolate different sized images
  • Override images in CSS media queries mostly works, but not on Android 2 devices

3 Conditionally load Javascript based on capabilities

  • The Ajax Include pattern serves simple default elements to mobile and enhances at larger sizes

4 Deliver different sized images to different screens

  • Resolution switching: load the most appropriate assets
  • Consider changing image crops at different sizes

5 Handle high res images carefully

  • Display requirements can cause 3000% difference in memory requirements between devices
  • eCommerce sites often serve optimized images and hi res only on demand
  • Make sure your Javascript isn’t downloading both hi res and optimized images

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s