Design Responsively
As a designer or developer, it’s your responsibility.
I’m sitting in JFK International Airport right now, waiting for a flight back home. Taking a quick glance around me, I see a handful of people on their tablets or smartphones browsing the modern web or on social media. More than anything, I see lots of pinching and zooming happening. It’s 2013, and even with the mass adoption of smartphones over the last five years, so many websites today still have terrible mobile experiences.
With more people consuming content on more mobile devices in more places than ever before, it’s time more developers & web agencies do something about it. I’ve put together a few ways to start getting your site optimized for every device, and making your work more future-proof.
Focus On Your Content
The primary reason anyone designs and builds a website is to showcase content. With that in mind, no matter what your device is, your layouts should complement your content in the most logical and appealing way possible. Don’t design your site to display perfectly in just one resolution. Ensure your website is responsive and your content can display beautifully at any resolution. This will ensure you’re accessible across the ever-growing variety of devices available today, and in the future. Before designing any layouts or writing code, develop a plan for your content and document it.
Avoid Building Mobile Websites
Should you make a mobile website? No. Absolutely not.
At Anchour, being accessible on more devices doesn’t mean designing mobile websites. Have you been to a “mobile website” and enjoyed the experience more than the full version? Probably not, and that’s because most mobile websites are usually stripped-back versions of desktop sites with missing navigation, content, and functionality.
For many people today, their smartphone is their computer. Smartphones will soon have nearly every capability a PC does in a much smaller package. With this in mind, the best option is to design one great website that works flawlessly no matter what the screen size, operating system, or browser.
Mobile-First
If you’ve followed the mobile web movement at all over the last few years, you almost certainly have heard of mobile-first design.
A beautiful, underrated aspect of mobile viewports is that prioritizing important content is critical, which can force designers to simplify navigation and strip back decoration. Applying these mobile principles to larger screens will allow for a better experience on desktops as well.
You can argue that designing for mobile-first ultimately comes down to personal preference, but there are clear benefits for designers and developers to take this approach. As a designer, removing clutter and unnecessary decoration from your site will allow you to optimize content for less screen real-estate. This is a good thing.
There are plenty of articles and books that talk more about Mobile-First in great detail, and I’d recommend learning more about this topic. After all, if you’re not designing with a clear content strategy in place already, why are you designing in the first place?
Compatibility & Accessibility
Want to be accessible on every device and browser? Don’t rely on JavaScript.
Some people don’t know what JavaScript does and disable it in their browser. Some people have very bad internet connections. There are also some “smartphones” on the market that are terrible at supporting even the simplest JavaScript functions. Therefore, to make a truly accessible site, it needs to at least function without JavaScript.
There are great ways to have a stripped-back, lightweight website while also giving a cutting-edge experience across all devices. Today, the quickest and easiest solution for me is to use a tool like Modernizr, which provides great browser detection tools for HTML/CSS and many other great accessibility features.
For testing purposes, try disabling Javascript on your device’s browser to make sure things still work decent, and improve your site accordingly. Testing involves a lot of trial and error, but once you get the hang of writing code that’s dinosaur-device-friendly, it becomes second nature.
Breakpoints
Using breakpoints to target very specific devices (like iPads and iPhones) is bad practice and not forward-thinking. Resolutions are always adapting and improving, so your design might end up being obsolete by the time “The Next Big Thing” is released.
Not too long ago, everyone was targeting 1024x768 screens because it was a safe desktop size, and easily the most common resolution. In just a few short years, everything has changed. Instead of picking specific screen sizes for your website to look great on, ensure your content and layouts are beautiful at all breakpoints.
The best screen size to design for is every size.
Consider Retina Displays
With the recent rise in ultra-high-resolution displays for everything from smartphones to tablets to laptops, many developers are using media queries to optimize their sites for these displays. The market share for these screens is rising fast, and optimizing for Retina is definitely something to keep in mind in the future. Most desktop screens have a DPI under 140, but technology is evolving quickly. Many phones and tablets now have very high resolutions, so using higher resolution images and using high-quality web fonts are a couple of ways to cater to these displays. Thankfully, detecting these high-resolution displays is super simple.
Some devices have pixel density ratios between 1 and 2, like Google’s new Nexus 7. The displays are not necessarily dense enough that you’d need to load 2x images for it, but it’s something to keep in mind. Although I just introduced two methods, there are many articles that get much more in-depth on ways to serve high-resolution graphics for your site and move toward a cross-platform-friendly web. Learn from them, and choose a technique that’s right for you.
What’s Next?
You don’t need to make sure your site looks exactly the same on all platforms. You need to make sure it’s easy to use and optimized for all platforms. Cross-platform consistency isn’t the key. Every device has different strengths, so it’s perfectly fine that your website does too, as long as the content of your site can be viewed and interacted with everywhere.
The internet is everywhere and accessible on screens of all shapes and sizes. If people aren’t able to access or enjoy your website on the device they’re using, then your work was for nothing. Frivolous decorations and animations are overrated and content is often forgotten.
Focus on your content, use media queries, and don’t forget about the devices that don’t exist yet. Everybody’s experience is important.
Let’s stop talking about responsive design, HTML5, and CSS3 like it’s a revolution happening in the future. At Anchour, we’re designing a mobile-friendly web because the future is now. Enterprises like Microsoft, Starbucks, and The Boston Globe have all been boasting fully-responsive sites for a while now.
They’re not perfect, but they’re trying. I think it’s time we all do the same.
