- 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
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Do Go Fluid, Fixed, or Mixed
If you have never worked with percentages, ems, rems, or other relative-value unit of measurement, then you will be in for some serious shock when working on your first mobile design. Where designs were once pixel perfect and everything could be precisely tuned to fit the page, prepare to be surprised when it comes to working responsively. Working with percentages and different device sizes enables some flexibility in element placement. This includes growing and shrinking. It also means that you find yourself with excess unplanned whitespace, or absolutely zero.
If you find yourself unable to work your design into one that is elastic or that still looks decent when stretched, you may want to opt for an adaptive approach. There are plenty of arguments about what responsive and adaptive mean, but at the heart, it boils down to whether your design is edge-to-edge (responsive) or has margins on the sides of (adaptive).
One of the pros of going adaptive is that you can create a pixel-perfect design for each breakpoint that you decide to use. This may work best to help ease your team into learning how breakpoints work. A con of this method is that you will need to plan accordingly or you will find that some users get a small column of information with very large side margins. This is somewhat akin to how users with a monitor resolution of 1280x1024 felt when viewing sites optimized for 800x600 screens a few years ago.
You can, of course, perform a mixture of both methods. Working with some teams I found that going responsive for the “mobile experience” felt more natural and “app” like. After I crossed into the large tablet or “desktop experience,” I changed to use an adaptive design with some elements appearing to use the full screen size, but with a content area that was fixed at a specific size per breakpoint. The beauty in using this is that users were given an experience and design that felt natural for the device they were on.