They say “content is king” on the web, but it’s a statement I find a lot of designers sort of forget about. When it comes to designing websites, we tend to create layouts that might look beautiful, but are extremely restrictive when it comes time to put the content in. Things get even trickier when you factor in responsive design (although that’s for another post). Here are some examples that I’ve come across:
Designing for Fluid Content
As designers, we want to create works of art from our web designs, but that doesn’t mean we should throw content out the window. Without content, would it really even be a website at all?
The first step to designing for fluid content is figuring out what kind of content the site is going to feature. Talk with your content creators, strategists, SEO specialists, and the client to learn more about the type of content the site will contain, as well as the goals of that content (and the site in general). Arming yourself with this knowledge will allow you to make more realistic designs that better meet the client’s needs.
Getting a better idea of what the content is will help a lot in making design decisions, but it isn’t the end-all solution. The web is a big ball of wibbly wobbly, dynamic stuff, which means things are going to change. The content going into a site today might not be the same as tomorrow. While this is admittedly difficult to account for, there is something you can do right now to help bridge that gap. Every time you start designing a new pattern, ask yourself “what if?”:
- What if this headline is really long? What if it’s really short?
- What if this button text wraps to the next line?
- What if the size of this image changes?
- What if we don’t have an image?
- What if the content includes a list? Or images, PDFs, or videos?
- What if there isn’t a lot of content on the page? What if there’s a ton of content?
- What if these columns aren’t the same height?
- What if the user doesn’t fill out all of their profile information?
Taking these kinds of things into account during the design process will make your work more resilient, and prevent a few headaches later down the line when the developers begin to implement your design. And if you’re having trouble coming up with questions to ask, get a fresh pair of eyes on the project, whether it’s another designer, developer, or even someone writing the content. The more questions you can answer before moving to development, the better.
Issues in the Process
Although this post focuses on considering fluid content in your designs, this isn’t merely a design issue. In my experience, it tends to be systemic. The content creators generally aren’t involved in the process of building the website at all, which means they might be writing content that doesn’t match the desired outcome. At best, they might be handed a content guide to work off of, but this goes back to the restrictive nature of how we handle content on the web. Do we really want to force our content into a layout, or do we want to create layouts that *respond* to our content in a way that is fluid and makes sense? Try to work with your content creators to figure out what their needs are. Do they prefer single column layouts? Do they want the flexibility to create editorial-style layouts? The answers to these questions can help shape your design, and should be accounted for in the project’s scope so that the development team can create the tools to manage these types of varying content.