Skip to content
By Brian Biddle

Beautiful Degrading

Designing for the Real World: Graceful Degrading for User Profile Pages
January 17, 2020

Graceful degrading is a strategy for handling web page design for a variety of different browsers, both old and new. I’ve seen humorous examples even deployed where the entire site would load in black and white for users who were on an outdated browser.

I like the concept, and I think it has an application in design where a layout can still function, look good, and not feel broken when specific content is missing, specifically on pages that data being provided by the user drives. I put this approach to the test as I worked on the redesign of user profile pages for

I’m sure most developers roll their eyes when they receive a design that has been spit-polished to the nines and looks ready for a night out on the town. The feedback generally goes something like this:

Developer: I’m always wary of designs that depict nice and consistent post images. Virtually no profile will look like this design unless there is heavy editorial assistance.

This feedback is sound and true, and any developer worth their weight should provide this type of input. Any designer worth their weight should also do their best to push the limits and be willing to create an innovative, beautiful design. They would also be fooled into ignoring their dev’s wise words.

My father works in the financial sector, providing a unique set of analytical skills that blend technology and money to provide analysis of where a company should focus. He’s a CPA that knows code and data. I love going to him for guidance on financial decisions as he will give me three outcomes: best, most probable, and worst case.

I believe a designer should showcase all three of these probabilities when delivering a design for developer review.

Best: The hi-polished, “night on the town” layout mentioned earlier. This design is the best foot forward. How it should look, and what generally sells the idea to stakeholders.

Most Probable: This layout version focuses on reality. Content or images may be missing, headlines may be too long, or profile pictures are not uploaded, and this is how it will look.

Worst Case: The user has not provided all the data we envisioned. The layout at this point may not be grand and win you any awards, but it should still hold up and provide a solid user experience. Here, some excellent UX should be deployed to encourage the user to complete their profile and leave visual and text clues as to what information is missing.

Once all three cases are shown, and there’s useful input given from your developers, a final set can be presented with confidence. You may have missed some things, but that’s where iteration comes into play.

Posted in: