iDevie
November 2017
M T W T F S S
« Oct    
 12345
6789101112
13141516171819
20212223242526
27282930  

Categories


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.

Smashing Magazine

Points to Consider

With the possibilities of desktop design, we can get away with, and take advantage of:

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.

Dribblr

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:

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.

Substrakt

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:

Showcase

Starbucks
Earth Hour
Regent College
Mike Scopino
Sony
Made By Splended
Food Sense
Warface
Sasquatch Festival

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.

Codrops


Comments 0
There are currently no comments.