- 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 Add Every Resolution as a Breakpoint
There are thousands of devices currently available in the amazing Internet of Things. Attempting to add a breakpoint for every single one of them is an absolute waste. Device fragmentation is major part of knowing what to code for, but you shouldn’t be thinking of your design in terms of how every single device is going to view it. Instead you should take a much more manageable approach. Either break your design up into abstract sizes, or start stretching your design out and when it starts to look bad, add a breakpoint and adjust as needed to correct your design.
If you are basing your design on a loose size grouping, the following list may be useful:
- Small: This should be the smallest size you plan on supporting. For many, this is the width of an iPhone 5 or similar-sized Android screen
- Medium: This size is generally geared towards the large-screen phones and small-screen tablets
- Large: Desktops, laptop, and large tablets reside here
- Extra Large: From cinema displays to HD Televisions, this is the style for screens with plenty of space
Creating design abstracts for various sizes can also help you determine the experience you want to give your users. A mobile experience may include off-screen navigation and a simplified header or specialized footer. The desktop experience may have a full-sized navigation bar and include different images, styles, and JavaScript. Different still may be the HD or “10 foot” experience, a design that will look good and work well on large screens with an interface tuned to the use of peripheral devices.