Designing Websites for Known Content

June 20, 2016 • By

True web designers are a rarity these days.  The usual—and very lazy—solution employed by most people offering design services is simply to take a template created by somebody else, modify it slightly, and then squish and bend their client’s content until it fits into the template design.

This is not a good practice to be utilizing, and it’s literally the exact opposite of how things are supposed to be done.  There’s this trite old saying that “Content is King”, and that really means content first, design second.  If you think about it for a moment, kings are not really supposed to be squished and bent, are they?

So really the best websites are those which are designed to fit the content that they were created to present, and not the other way around.  Unfortunately due to the prevalence of wishy-washy clients with a “build it first, fill it later” mentality and no clear idea of what they want to say, every designer at some point has had to build a site filled with nothing more than the dreaded “Lorem Ipsum” text wall.

If you can find a client who truly understands the value of good content and is willing to make that a priority, it is equivalent to finding a diamond in a huge mountain of coal.

1. Read, examine and stare at the content until you can’t bear to do it a moment longer

Your inspiration for this new site should come from the content itself.  As you read through it, examine your feelings and this should guide you towards the correct design.

2. For textual content, determine the level of each block

Blocks are just paragraphs, but some paragraphs are supposed to have more weight than others.  Paragraphs of different types can be sorted into levels, for example:

  • heading
  • sub-heading
  • by-line
  • regular text
  • block quote

Those are just some possibilities, but every document is a bit different.  Some will have more levels and some will have less.  If you assign each of these different block levels a number, you can print out your content and use a pencil to indicate the numeric level of the block.  Once you’ve done this, you can use the information for style mapping.

3. Create a style map

If wire frames and prototypes are the preludes to a website, then a style map is a prelude to a style sheet.  You create it just as a basic spreadsheet which will contain:

  • the numeric code for each block level you defined in the previous step
  • the unique class name you are going to assign for each one
  • font face and/or family, font fall-backs
  • font size, font color, font weight
  • any special formatting instructions that apply

Once you have the style map created, it’s very easy to create a style sheet from that.  It’s worth noting that the style sheet you create for your content should be stored as a completely separate file from the style sheet you create for your page design.  Modularity gives you freedom, and of course you should always separate content from design to the maximum extent possible.

4. Define a layout for each snap point on your grid

Now that you know how your text blocks are supposed to look, you should decide what shape the text is going to take.  It’s unlikely you’ll want to span it all the way across the page, so work out how wide you want the text column or columns to be, and how non-text items are going to enter the flow.  Don’t forget to take into account that you’ll probably need to change the layout for smaller devices.

5. Draw up the prototype and get approval from the client (if necessary)

You don’t want to waste time coding if you have a fussy client.  Always get approval for a design before you set to work on actual development.  For now, it’s best to simply mock up a simple prototype in your favorite prototyping tool (Inkscape, for example) so everyone can see your vision of how the finished site should look.  Hopefully the client likes what you’ve done and greenlights it, otherwise you’ll have to start over.  But it’s still better than if the same thing happened when you’d spent hours or even days coding an example.

6. Do the initial build

It’s time now to roll up your sleeves and get typing.  Here is where it gets a bit tricky, because you need to write up all your HTML and cut and paste each text block into the right tag pair (maybe H1, maybe P, maybe something else).  It’s quicker to just create all the tag pairs in their raw form and paste the text blocks in, an d then go back later and add the class names to your opening tags.

7. Review the end result and check that it matches your design

Actually it’s best to test as you go, but in the end the finished product should look like your original design or it should be better.  If it’s not, that means you’ve made a mistake somewhere and you’ll need to find it and fix it.

8. Do some user testing

This is the most difficult part of the job, and you’d better hope you have a thick skin because user test participants can be far rougher on your ego than even the most persnickety client.  Still, you won’t want to release something that isn’t perfect, and if the users simply don’t take to the design at all, you should be confident enough in your ability to go to the client and let them know the design isn’t working and that you’re going to take a new approach.  There’s no shame in this.  The shame comes from knowingly releasing a design that isn’t perfect, and you can count that double if you add the site to your portfolio.

9. Finish off the job and get paid

This is the only part of the whole process where you can’t be certain of the outcome.  Hopefully your client is a decent sort of person and pays up without a fuss.  If you’ve done everything right, it will surely increase the chances that your client is willing to pay for your hard work, even if they have no clue as to how hard you actually had to work.

Designing sites to fit content is always much better than designing a site first and then fitting content into it.  It means you’re aware of exactly what you have to fit.  There will always be times when you don’t get that luxury, but when the opportunity is there, grab it with both hands.  There’s never anything good about Lorem Ipsum.

header image courtesy of The Fox And King