- Do Consider Your Content
- Don't Give Mobile Users the "Mobile Treatment"
- Do Serve Correct Assets
- Don't Serve Everything to Everyone
- Do Go Mobile First with CSS
- Don't Add Every Resolution as a Breakpoint
- Do Go Fluid, Fixed, or Mixed
- Don't Use a Framework if You Don't Need One
- Do Analyze and Optimize
- Don't Ignore Your Users
Don’t Serve Everything to Everyone
Not every mobile user has a broadband connection, and worse, many users may be roaming and paying an expensive premium for their data. Problems don’t just end with data however; every request for an asset or file is passed from device to tower to local network hub to internet provider and back again. As most of these connections are done wirelessly, the potential for data loss (as well as latency) is added. This can mean that your requisition may take 300ms, or it may end up taking 2000ms. Depending on the assets that you’re sending to the user, you may end up blocking the rendering of the page, sending multiple assets they are unable to use, or creating a page that takes minutes to load.
An easy way to limit some of your assets is to use feature detection, use a server side pre-processing solution such as mod_pagespeed, and use a responsive image method such as the picture element or srcset.