From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
The web development community has come up with endless solutions, best practices, and tools for coding a responsive design with ease. While the vast majority of websites can be made responsive now, it’s time to push the envelope further. It’s easy to pay attention to great coding best practices, but sometimes the best design practices for various screen sizes get pushed aside.
Many resources on responsive design cover the basics — make use of excess space on desktop, make things simpler on mobile. Yet, many don’t go beyond this basic knowledge. With various screen sizes coming out each day, and even the big players like Apple switching things up with the new iPad mini, we need to evolve the way we think about design and the user experience as well.
Desktop
We see most of the attention for user interface principles when it comes to desktop websites. With extra space on-screen and the likelihood that a user is using a keyboard and mouse/touchpad, there are far more design possibilities while still maintaining a positive user experience. Yet, we must still abide by some guidelines, and if planning for a responsive design in the future, we can make sure that design can flow seamlessly between different screen sizes.
Points to Consider
With the possibilities of desktop design, we can get away with, and take advantage of:
- Extensive grid-like layouts, which allow the user to easily scan for content they may be interested in or tying to find.
- Horizontal navigation, sub-menus, mega-dropdowns, and more, all for easy-to-filter content.
- More pages for a more interactive and extensive experience on a desktop site.
- Places for advertisements, side content, additional blurbs, or call to action elements.
- Clickable areas that can help guide the user, like breadcrumbs, which would not otherwise be usable on smaller touchscreens.
- Access to more technology, including those that could influence design and the user experience.
- Fat footers, asides, and much more.
Websites should take advantage of the extra capabilities of a desktop site to give the users more options. Users should be tempted to come to a desktop version of a site after checking it out on mobile or a tablet, giving the user more possibilities to interact and gain from the website.
From a user experience perspective, be sure to still create desktop designs that are flexible, and down to a particular size, are still easily usable with keyboards and traditional desktop usage. Netbooks, while not as common as they used to be, are still around, and users will try to interact with a website just as they would with a typical computer – keyboard, mouse, touchscreen-less, and all – only smaller.
Tablets
Tablets are becoming more popular everyday, and as prices go down and more brands come about, there is a strong possibility that their popularity will only continue to grow. Many do not believe this is a short-lived trend, but a new permanent way of interacting with the web. Because of this, we must learn to not treat websites optimized for tablets as “second best” to their desktop counterparts, but instead, as a separate and equally important web experience for users.
One of the biggest features of tablets that we must accommodate for is that fact that they are touchscreen. This requires a whole new approach to the way we design, because it is an entire to approach to how users interact with websites. When tablets first came about, many users only went to view websites in a static way, and sacrificed the same amount of interaction they could get with a desktop. While it still may make more sense to provide full interaction only on desktop sites, we now have a responsibility to design user experiences where a user can interact with websites on tablets more easily, because that’s what they’ll be expecting.
Points to Consider
So how to we accomplish this goal? A new trend for responsive design that’s coming about is making responsive designs more app-like in interface, design, as well as functionality. When designing for tablets, take interface design inspiration from native tablet applications. Many of the features include:
- Larger touch areas, especially for navigation. Without the precision of a mouse or touchpad, larger areas that one can touch with a finger are essential.
- Tabs, accordions, and more can be particularly helpful in touchscreen design, and to save space on the smaller screen area. Don’t just think of how one would use these features on a desktop, such as in a sidebar area, but rather for interaction with the entire website. For example, allow users to move between entire sections of the website with the ease of tabs, much like they would on an app.
- Tablet design used to mean simply taking the same, or very similar layout of the desktop site, and squishing it together so it fits on the screen. This isn’t the way to go though. While you can easily do this and still make a website look presentable, you could be sacrificing far too much in usability.
- Use buttons or button-like design for simple actions, main links, etc.
- Additional button-like navigation, such as back and forward buttons can be useful for those navigating with a touchscreen, and especially with a device that may have a less than user-friendly browser. (Don’t assume your user has the exact same brand of tablet you have.)
- Designs should be optimized for retina display. While it’s only iPads that have retina display for tablets at this point, we can expect to see the technology grow. Nonetheless, with the majority of tablet users being iPad users, this should be taken into consideration anyway.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Smartphones, Mobile
Saving space is the most important thing to consider here, as well as creating a user experience that isn’t sacrificed because of that lack of space. When designing for mobile, like with any user experience planning, it’s important to know why people visit websites on the devices they do. While a desktop user may be going to a website for a more extensive search and interactivity, a mobile user tends to just want content, or do very simple actions — and quickly too.
Points to Consider
Along with the same touchscreen considerations as tablets (think larger touchable buttons/icons, app-like design), mobile can benefit from some other useful design patterns:
- Keep interaction in its simplest form. Cut out any extra capabilities, and allow the user to focus on the most important actions.
- For website with excessive content, make it easy to sort through and filter. Users don’t always like typing in search items on mobile, and while a search form can be helpful, also offer useful categories or a search filter sort of navigation.
- Use minimal design, enough to brand the website but not take over the usability of the website.
- Bigger fonts and better type display. Don’t force the average user to zoom in!
- Add text summaries to bigger pieces of content to save space, allowing the user to easily ignore content they don’t want.
- Get creative with tabs, accordions, navigation, and other forms of space saving methods.
- Make sure popups, notifications, ads, and more are either non-existent on mobile, or user-friendly to deal with if they are absolutely needed.
- If possible, make sure there are a minimal number of pages on a mobile site. This is not always possible depending on the type of website, but if it is, use javascript to swap out content (e.x. tabs) to avoid lengthy page loads.
Showcase
Conclusion
It is estimated that tablet and mobile use will outweigh desktop use by as early as 2015. Considering this, we need to not only learn the best practices for coding responsive design, but also designing for them. It can be helpful to treat each experience as a separate design concept, while still maintaining unity in design among the three different stages: desktop, tablet, and mobile. Always remember to keep images retina-friendly, in particular for mobile and tablet use, touch-friendly, and content display appropriate where needed. The biggest problem to tackle among various screen sizes, though, will be organizing content and it’s relative navigation for the best user experience possible.
Do you have any more tips when designing the differences for each of these scenarios? How does your design easily transfer between various screen sizes, while still maintaining best practices for each?
Credits: Printable iPhone 5 Template used in main image by Matthew Stephens.
Thanks for the write up. Love how new technology and thinking develops a new aesthetical direction.
As always a nice read in the morning, this pages is like my newspaper.
I’m not a designer, but as developer, I need my web apps and websites look good as they work. And thanks to sites like this, we gain a lot of good information about this topic.
Thank you
Thank you for this great article. For me as a web designer or front end developer the easiest way to make my website compatible in all devices is to use a framework , i am using “skeleton boilerplate” which makes my life easy it is flexible and easy to understand
Good article and great website.
It would be interesting to know what approach to take regarding file sizes and actual file content. I wouldn’t want to load all the big desktop images on a mobile site, but still I want it all under the same hood using media queries. E.g. no m.site.com redirect or separate version.
Maybe a future posts for you all gurus. Keep up the good work!
I tend to do use separate mobile and desktop stylesheets, while still using the same pages. For large images that are relevant to the design, I use background image that can easily be swapped out on desktop/mobile. So, when using completely separate stylesheets, on mobile only the mobile stylesheet is downloaded, referencing only the mobile background images. For all other images (using an img tag), there are of course plenty of responsive images plugins (JS) available that will help do the job. 🙂
There are a lot of great points in this article. It would be ill advised though to assume tablets and mobiles are the only device classes where we should be concerned with touch. With Windows 8, touch has broken out of these device classes into laptops, ultra-books, and desktops.
My advice would be to always design for touch. We can/should be making elements larger so they are easier to interact with/read no matter what the device.
We should develop for touch when touch events are support.
Excellent point — my personal computer is even a touchscreen and I failed to mention this! I think the biggest concern would still be on tablets/mobile though, because on a desktop, even if its touchscreen, there is a keyboard and mouse option, which is usually the primary input source anyway. Of course, you make an excellent point — it doesn’t hurt to think about touchscreens on desktop to improve the user experience if they are using them at any given time, and how that implementation will likely grow in the future.
We can say the same with retina display too — with the new Macbook having retina display as well. Put the focus on implementing it with mobile, but we should always be reminded that retina, touchscreen, and more are all coming to desktops soon!
Great article! I love how now user experience is something that not just a select few think about, but it is becoming more and more embedded in our design practices. After all, we’re not designing only for designers, we are designing for the end-users and they will not come back to the website if the experience doesn’t run smoothly.
awesome
Very thoughtful analysis of UI design guidelines for responsive web. I’d add that it’s important while designing for smart phones to strike a balance between assumptions about the “mobile context” and the burgeoning demographic of users accessing the Internet solely from a mobile device. Those users (31 percent of Americans as of June 2012), may need access to all the desktop content, not just a pared down “mobile” version. Things to think about as designers create new ways to deliver content through these channels.
Check out Karen McGrane’s article “Uncle Sam Wants You (To Optimize Your Content for Mobile)” over at A List Apart for more stats and insights!
Cheers
Sarah Bauer
Navigator Multimedia
Good article!
However, you should add one thing to your list, since for me that’s one of the greatest drawback of the “Responsive Web Design”.
Be careful when you decide to change something between 2 breakpoints (hiding content, adding content, changing display…) because sometimes, the final user can be really lost if there’s too much differences between 2 versions of the same page.
Besides, I believe that the user should always be able to choose his favorite kind of display (layout/menu/etc.), and if he wants to see the desktop version on his mobile phone, he should be able to do it. With RWD and especially due to media-queries, user is not anymore able to choose the version of a website he wants… What a pity 🙁
I think that you should not think in “devices”. It could be anything… a computer in a car, a fridge or glass. You can’t predict what your users are using.
Hi,
thank you for sharing such interesting thoughts!
I’m reading more and more about the increasing need to create different interfaces for different devices; and I can’t help asking myself a question: how shall we manage the inevitably related increased budget with our clients?
The creation of different interfaces means more production time and, in turn, more budget for the clients.
Thinking about how difficult it is to have them take the cost of the only desktop version, I think it will be a great challenge to educate them to the new multi-design needs and the related increased budgets.
Here in Italy, it’s not unusual to be asked to design for desktop, tablet and smartphone without increasing the bill!
How do you think abotu that ? Which strategies should be considered as to this issue?
Nice write up overall, first off. But I have a bone to pick, and it isn’t just you that is doing this. I have seen a ton of write up’s lately talking about ‘retina displays’ and acting as if they are unique to Apple. Apple wasn’t the first company to have a hi-res screen. Further more, there are multiple devices with much higher ppi than any of the Apple ‘retina displays’.
If you are going to write an article and make these blanket claims, could we at least do a little research first on the ‘facts’ you are throwing out there, especially something as basic as claiming only one tablet or one company has a ‘retina’ level display (btw, retina is marketing, not a real technical term). Every major player is making ulra-hi-res devices, from phones all the way to computers. Heck, the highest ppi device is 100+ ppi above the iPhone, and 200+ above the iPad.
Thank you so much for great article.Responsive website design might turn out as a great way to progressively enhance even small budget projects for mobile devices.
Thanks for the link.. i am sure you will love — http://www.uxzeal.com
Thank you for these tips, just a small thing I would like to mention, If you do have so many categories in your website that would increase your navigation’s size, add some small pictures like 16X16 pixel or whatever the size you want so the user can differentiate easily while navigating through your website.