← Back to blog

Tips for designing and developing around content in the browser

• 🍿 4 min. read

I've started thinking of things that would help with designing/developing around content in the browser, and built up a list of tips. Some I've tried and tested, some I'm just getting into (like OO CSS/style tiles).

Designing around content

Tip #1 Be ruthless on reducing content

OK OK - not CSS per-se, but less content means less CSS. If you're working on improving an older site, before the design phase starts make your content earn it's place. Often with older sites over the years business can slowly add more and more business related content without thinking of the users needs, and what once was an initial small site can spiral out of control easily. Justify whether content deserves to be in your new site (does it supports your user? does it support your business's new site goals? is it still relevant?).

Tip #2 Work with actual content, seeing it in place early on

Prototype if you can, and use real content instead of Lipsum text. See your titles at actual word length rather than the imagined ones that always fit, and think about potential minimum and maximum content sizes, and how they might view on a smaller or larger screen.

Tip #3 If you can, work with a freelance copywriter/content person

Professional copywriters/content people are worth their weight in gold. Not only do they bring a laser like focus on content, but they don't have any of the political baggage/bias that comes as being a regular employee, so can act in a neutral way when dealing with difficult stakeholders. Plus, however good you think your command of english and writing good copy is, theirs is better - they're trained, like expert little content-ninjas, and do it all the time.

Tip #4 Prototype early (if you can)

There's loads of good writing on the web about prototyping in HTML and CSS and style tiles - the sooner you can get tangible things in front of clients the better - fail fast and find out what doesn't work before you get to the development stage.

Developing around content

Tip #1: Start small

Design around your content in a small viewport, resize larger bit by bit and add in targeted media queries when things start to look strange.
Benefit: you're not designing for specific devices, so your site is likely to flow better on other (untested!) devices.

Tip #2: Inline media queries

Rather than have a single media query for lots of elements at the foot of your stylesheet, inline or "bubble up" your CSS media queries under your CSS element declarations.
Benefit: Easy maintenance. You will find that (if you use fluid widths where possible) you will end up with far less media queries than you think. Inlining media queries saves you from the whiplash one gets zipping to the bottom of a css file when comparing styles.

Tip #3: Go OO

Try writing OO (Object oriented) CSS (watch this great video from Harry Roberts on large scale CSS architecture), and don't be afraid to use multiple classes on elements if it means you can reuse things. If you start with your mobile CSS as a baseline, then you can layer on adjusted styles as your viewport gets larger.

Benefit: Better, cleaner, more modular CSS. Check out both @csswizardry on OO CSS and guidelines and @snookca on SMACSS as they have lots of great info on OO CSS out there.

Tip #4: Use a flexible grid system

There are lots of good grid systems out there (both responsive and fixed). When using Drupal I've found that I didn't always have control of the markup for some of Drupal generated output. Making design elements use different grid columns classes when you couldn't modify class names in your markup easily was a challenge.

I looked at things like frameless, cssgrid and blueprint but ended up rolling my own. Rather than using the CSS grid classes directly in the markup, I created a separate grid stylesheet with grid classes, then added my existing css classes alongside grid classes in the grid css directly.

Benefit: This kept the markup nice and clean, the grid stays neatly out of your markup, and sits just in your CSS. This then allows you to override specific elements using media queries. Need to change it in the future? just one place to edit.

Read around the subject

Bit of an obvious one, but the thing I love about the web industry is the willingness of people to share their thoughts online and help move things forward.

A few of the great resources for developing/designing around the responsive web, content and CSS:

Know any more good resources? Want to chat about responsive design? Find me on twitter and say hello....

Check out other things I've written tagged: design code

← Back to blog