Loading...


When considering mobile options for your website, there are a lot of ways you can choose to go. Graceful degradation web design is one strategy you may be considering to make your website usable on mobile devices. In this blog post, we’ll take a look at the impact of choosing graceful degradation for your website’s mobile design and when you should choose a different design tactic.

What Is Graceful Degradation Web Design?

Graceful degradation web design is the process of mobilizing your website from a pre-existing desktop design. With graceful degradation, you must shift and reshape your site’s layout to fit mobile devices. A hazard of graceful degradation comes from the fact that the mobile experience is a second thought and considered based on the experience that has already been created for the desktop. This way of mobilizing your site is most often and most effectively used if there is a restricted budget and a pre-existing site designed for the desktop that you aren’t ready to redesign. It is definitely not recommended to start a new website design from the desktop and work back to mobile.

Graceful Versus Progressive

An alternative to graceful degradation is progressive enhancement web design. With progressive enhancement, you are designing your website with the mobile user in mind – mobile first. As you increase the screen size, you then add to the design with additional website enhancements that might not fit into the design presented on the mobile device. Progressive enhancement allows you to ensure that the experience is as fast and streamlined as possible for the mobile user, who typically will have spotty internet and low tolerance for load times. Common gestures and actions that are mobile specific, such as swiping and tapping, can be accounted for with progressive enhancement.

Overcoming Mobile Roadblocks

There are several roadblocks for delivering a great online experience on mobile devices, including limited available resources (in available bandwidth and computing power) and restricted screen size/resolution. Each of the design strategies mentioned above can be used to help you overcome them, though with different results.

One way to reduce resources when delivering a mobile experience is to utilize JavaScript to load different images based on device and even physically altering the HTML markup on the page for different devices so that large images that are designed for desktop won’t be served on a mobile device. This tactic can be used in graceful degradation, but once again, it will be to force the mobile experience on a desktop design. In desktop design, menus, loader icons, thumb placement, and mobile-specific gestures are not considered. These little things, which make a big impression to the mobile user, are missed. Small animations and transitions can take a mobile site to the next level in user experience.

When considering the smaller screen size and resolution, again graceful degradation has its cautions. What you typically see with a desktop first design is a highly elaborate design with a layout that isn’t accommodating for small screens, including global elements, such as buttons, text, or menus, that aren’t built for the mobile user. All of these features become an issue when designers and developers struggle to break them down from their original position in a desktop design for smaller devices. Another reason why a mobile first design is preferred.

Ultimately, you can use graceful degradation to deliver a “good enough” mobile experience when resources are limited and you don’t wish to overhaul your site. Before you decide to go this route instead of a full, responsive redesign with progressive enhancement, however, consider that you will still have to do the work of testing to ensure your graceful degradation design works across all devices, which will add to the cost. You may not end up with as graceful of a solution if you had just reworked your site to begin with.

 

Go from Leveraging Graceful Degradation Web Design to the Blog

Return to the Unleashed Technologies Home Page