1. My focus is Design, HTML, and CSS.

2. Sometimes I write JavaScript, but my skills are more suited to Design, HTML, and CSS.

3. I like core technologies. Being close to the metal suits me (HTML, CSS, JS). I don’t particularly enjoy working with frameworks, especially in recent years, where core technology has matured. If someone asks me to take on a Vue project or use Tailwind, it's not for me.

4. Focus on the basics. What makes a site look great? Brilliant typography, sublime photography, and art direction.

5. Focus on one CMS. As I write this, I've journeyed through three content management systems: WordPress to Perch to Statamic.
   I haven't touched Perch for a couple of years now. Consequently, I can't even remember how to install it. Content management systems are deep and complex, and riding more than one horse is a path to mediocracy.

6. Stay away from gimmicks. Related to (4), in my experience, clients tend to focus on things that either ruin the basic experience of the web or add very little value to their site other than annoying users. Let's take scrolling, as an example. Clients and agencies fixate on this. Maybe because they think they need to stand out in some way? Parallax scrolling, full-page scrolling, scroll-snapping, infinite scrolling, crazy animation, etc. All of this is complex, terrible, and simply breaks too many things—hashtag anchors, page positions, or being able to flick through a page quickly to find something. Take cars—no one's ever thought, “wheels are boring, let's make them square”—because wheels fundamentally provide the best experience. Similarly, on the web, native and basic is the best fundamental experience.

7. I should try and control my part of the project. Before taking on a job, I should ask myself, “how much control will I get over the look and feel of the website?” I'm much happier—and it's a better website—when the client trusts me.

8. Always think about my focus. How much does the project stray out of my core area of focus? If it does stray, can I stick to my focus? For example, I don’t want to get involved in any e-commerce projects myself, but if I do, I only want to take on a design and CSS role for those projects. Don't blur the lines.

9. Stay away from “unbillable bollocks”. Related to the previous point, sometimes I lose half a day to figuring something out—typically outside my core focus area. This stuff is so obscure that it's almost impossible to bill it to clients. Ergo: code is complicated, and the only way to make a fruitful and stress-free living is to focus on things I can solve with high confidence.

Articles that align with my Principles

• No, Absolutely Not

• Great Designers Realign

• A Dao Of Web Design

• The Art of Not Thinking

• It's Easier to Revise than Create

• Declarative Design

• More Transparent UI Code

• Can CSS be too modular?

• Are You Single?

• HTML Semantics

• CSS Guidelines

• Introversion

• Creativity Petting

Quotes that align with my Principles

The Real Shortcut is to do it right the first time. Anything else is a welcome invitation to start again or clean up some cut corner. – Geoff Graham

Cameron Moll's Good Designers Redesign, Great Designers Realign post has urged me to improve a design rather than throw it out. The more I practise this idea with my own sites, the more I'm convinced that re-alignment is not just the path to correcting things but also the path to self-improvement as a designer. This article is about taking the idea of design re-alignment and applying it internally. Reflecting on and improving my past work over the last couple of years has resulted in a deep satisfaction that's reinvigorated my approach to new work, and I wish you could feel this way too.

As a side note, I run a Discord group called Design Critique—please feel free to join and get free advice.

I Debug My Personal Sites

If you're looking to improve your design skills, I recommend starting with your own website. Designing for clients can undoubtedly help you improve, but it will never lead to significant development because you're restricted by the client's vision of what a website should be. I've lost count of how many times a client has referenced a boring site like BBC News as an “inspiration”. The truth is clients have no idea what's possible. Exploring without someone figuratively standing over your shoulder is both liberating and allows you to find your own style.

I became a better designer when I stopped hitting the reset button; I stopped redesigning my site. Instead, I started critiquing it; I dug into what was actually wrong with it. I threw my ego out and asked around, and when I saw Jack McDade offering 5-minute video critiques, I asked him to lay into my site too.

One of my favourite phrases ever is 'debugging design'. I first heard Laura Elizabeth mention it on Shop Talk Show Ep 317. Debugging design means trying to objectively understand why a design 'feels' good or bad.

I started looking at designs I liked—by my favourite designers—then I “debugged” them. I looked at individual components and tried to understand what made them effective objectively. I asked myself what made them effective on their own and then what made them more effective in the bigger picture.

The next bit was crucial—I decided that if I couldn't make any significant improvements to a component, I threw away that part of the design. “Part” is the significant word here. I became a better designer when I learned to throw things out. “In writing, you must kill all your darlings”, said William Faulkner. Well, the same applies to design.

You can see an earlier version of my own site from Jack's video critique. I'm not sure how well this post will age, but at the time of writing, you'll see some things from that video I've kept (colour scheme, intrigue section), some things I've since improved (typography, simplicity, scale), and other things I have thrown out completely (iconography, photo).

One of the reasons I love digital design so much is that you can revise it. Don't overthink things; instead, trust the process of experimenting, pausing, reflecting, and throwing away without consequence.

I Collect Things and Follow Weird People on Dribbble

Over the years, I've learnt to collect unexpected designs and things I like in a scrapbook. My scrapbook is simply a folder full of screenshots. Whenever I start a new project, I flip through these designs and find a design direction that might suit the new project.

At first, I worried this might result in copycat sites, but it never does in the end. Through rebuilding something similar with different goals in mind, there are inevitable deviations. Most often, large deviations. I'm going to be completely honest here and say that I absolutely loved the 10x18 site when it came out. I scrapbooked it in 2018 and found it again when I was redesigning the podcast site I co-host. I'm comfortable enough to share this inspiration because even though there are some similarities—the display typeface and graduated colours—I feel like the site I designed is significantly different. Everything's a remix, as Kirby Ferguson says.

The other thing I do is look through Dribbble. And let me quickly say the rubbish-ing of Dribbble annoys me. Things look good on Dribbble, and there is no shame in that. You should be aiming for things to look good.

People rubbish Dribbble because it tends to showcase pixel-perfect solutions—rather than problems and processes. Well, yes—this is what you'll see if you look through popular posts or conventional “inspiration”.

The fix? Follow weird people with different skills. If you're a web designer, don't follow people that make websites. I follow a craft beer maker and graphic designers that choose unusual typography, layout, and symbols, such as Bold Monkey or Bastien Allard.

Finding My Identity

As much as I admire particular designers, I realise it's essential to avoid becoming a carbon copy of them for my own self-validation. I've been trying to understand what sort of art direction produces the best results for me. What do I enjoy? What do I identify with?

Instead of seeing all these things as crutches, I am trying to embrace them as “my thing”.

Here's what I've written down…

1. I'm drawn to neon hues with high-contrast colours and confined textures

2. I like very stylised, abstract imagery

3. I love striking, slightly left-field display typefaces

4. I reach for “hairline” borders a lot. I think this is because they emphasise contrast.

Educating Myself on Design

With practice, I'm getting better at design debugging and realigning myself, but sometimes formal education and references also help.

Just leaving these here…three paradigm-shifting resources for me have been Typewolf's Flawless Typography Checklist, playing with type scales, and using HSL to design colour schemes. I leave these references cautiously because I dislike being confined to a scientific approach when it comes to design. For example, I like alignment, but I hate formal grids—they feel like spreadsheets to me. I find that great design tends to happen accidentally.

Despite this, design education has helped me. If I change something's defaults, I now understand the consequences—for example, I know opting for a higher line-height on my body text may “breathe” more but will result in poor readability.

Somewhat ironically, I've been sitting here for the last 15 minutes trying to find a way to wrap up this article elegantly. My list of references is a weak ending. But maybe that's OK. I'll step back, critique, and re-align this article at a later date.

1. Jack voted for the Republican “platform”

2. The web community is largely left or centre-leaning.

3. The GOP is not so much a platform right now, but a populist cult with trimmings of fascism.

With over 500 replies, the Twitter community pulled Jack's post apart. While he undoubtedly deserved the fact-checking, many people went beyond.

As someone who has recently joined the Statamic community, I spent a few days reconciling my feelings. Sure, Jack’s post was a little more nuanced than “I support Trump”. Nonetheless, Jack voted for Trump’s party, which troubled me. I wasn’t the only one struggling. A few notable people reached out to me privately, and other Statamic users have been soul-searching…

—Jon Hicks

Maybe politics shouldn't matter, but in this election, I think they do. Like, I dunno, would you shop at a grocery store that wilfully gave money to the Nazi party? Not exact equivalence but we're getting there, and I think this is what lies behind the outrage and intolerance in the tech community. To clarify how important I think the US 2020 election is was, even though I’m British and I live in the UK, I was hugely worried about what a Trump win would mean for the world.

If you think my Nazi metaphor was ham-fisted, then let's take a moment to reflect on how Trump is attempting to undermine democracy as I type this. As Greg Gilbert said, “This really is a defining moment for American morality and intellect: if you can't see the fascism on display, you understand nothing; if you do and still support it, you lose all credibility”.

So which side of this statement is Jack on? Ignorance, or wilful support? As a supporter of his product, I‘d really like to know, just like Matt Damon really needed to know if Sarah Palin thought dinosaurs were here 4,000 years ago.

And while the idea of "voting for the platform" rather than the leader usually adds up, it's too difficult to accept this logic with Donald Trump at the helm of the GOP. Even now, after he’s been voted out, his crony supporters continue to wage war against the media free-speech, science, and immigrants (which America is founded on). I find all this offensive, and I guess lots of the web community on Twitter do too.

—a member of the Statamic community, annonymous

It’s a shame the world is so messy and complicated. Ideally, we’d easily be able to buy food, clothes, and products from companies and people we respect and align with at competitive prices. Despite new feelings of conflict I have for Statamic, I feel nothing but good vibes from its community. There is no snark or vitriol—a far cry from the feather-spitting Twitter comments I’ve seen recently.

Here are two of their community guidelines:

1. Treat others in the way you want to be treated. Respect each other; we’re all on the same team here, so let’s have fun, share what we know, and hopefully learn something new! No bullying, harassment, foul language, racism, sexism, or bashing other software and/or communities. Generally, just be awesome to each other.

2. Don't bash other platforms (e.g. WordPress, Drupal, Craft, etc). They all serve their purposes, markets, and provide livelihoods for thousands of developers. Please be welcoming to those coming from those communities to check out Statamic. Hopefully, they'll find something they love more, but it won't happen every time.

This is the kind of community I want to be in—and despite Jack’s views, there is no mention of religion or politics to be found. I literally searched the entire Discord history for “Trump” and “Christian”—and found nothing. Nadda.

I totally understand the people that no longer want to use Statamic—drawing a line in the sand is a valid way to protest. I also considered leaving the Statamic community, “voting with my wallet”. For those not already invested in Statamic, it’s easy retribution. For those already invested, things are harder. “I wonder if that investment has made me more willing to accept/work to rectify the dissonance Jack’s post brought”, someone said to me.

Finding myself similarly conflicted, I’ve decided to continue using Statamic (for now) because:

1. Jack followed up his initial post with something more thoughtful.

2. The team and community are good people (unintentional reference, I know, I know).

3. I have invested too much in the product to abandon it, and as much as I kid myself, I am a business.

4. I don't believe the other CMS choices are anywhere near as good. Craft and Kirby—yes possible—but nowhere near as polished.

Check Yourself Before You Wreck Someone Else

There is so much gutless reductionism in the tech industry. Incidents like these break out every few months, and I see people descending like sharks, often rephrasing identical points just to be part of the feed. I've seen popular Twitter tech folk get attacked in the past—two names come to mind—both decent people. Debate and critique are great, but people do get personal—even if they say it's not personal.

I bet you’ve bought from Amazon before, where workers are treated no better than robots and aren’t allowed to have bathroom breaks. Maybe you continue to occasionally use Facebook despite its complicity with Cambridge Analytica scandal, Brexit, and the 2016 US election. Maybe you continue to take an Uber after the Travis Kalanick scandal. Or if none of this, you've probably had an iPhone, and may want to check Apple’s ethical score. We all have our blind spots.

I hate to play the vegan card but I'm going to. As someone who’s been broadly vegan since 2015, I know and continue to enjoy the company of lots of people that overlook murder because they conveniently enjoy the taste of meat—despite the ubiquity of substitutes and growing scientific evidence that meat and dairy cause cancer. Heck, I still follow several high-profile web Twitter people that proactively post photos of murdered carcasses on their BBQ. How much thought do you think they've put into their photos? Do you think they spare a moment to consider how the meat got there? How did the cows feel? How did the pigs die? Out of sight, out of mind; an inconvenient truth; I digress.

My point is—have the capacity and compassion to understand there are shades of grey. Resist condemning people that may not understand your point of view.

—Pete Clark

American companies succeed thanks to the talents of entrepreneurs of all races, religions, abilities, genders, and sexual orientations—Chris Sacca

More Leadership and Less Gentlemen—One thing I had quietly observed since being in the Statamic community is a lack of diversity in leadership. Three white males (and at least two very-Christian) run the company. Collectively they call themselves the ‘gentlemen’. If you need help, you can even email “gentlemen@statamic.com”. I appreciate this is no-doubt designed to inspire some gallantry and it's kind of warm-feeling, but in reality, it keeps the company—along with its views—small.

“Gentleman” while used to refer to a passing collective is fine, e.g. “There’s a group of gentlemen over there having drinks”. But “Gentlemen” as a club—feels like antiquated gate-keeping language. You may baulk at this—“trust a liberal to find meaning where there is none”, etc., but think how you would feel as a woman joining the Statamic community. I would consciously or subconsciously feel an invisible ceiling—like the Statamic team are unlikely to consider a woman employee. I've been in the community long enough to know this is not their intention, but language matters.

Jack’s post was a personal one but maybe if he had a more diverse team—one more affected by Trump’s policies—he might have considered running it by them first, and it would never have passed critical thinking and review. Experiencing the periphery of other people’s struggle is how we grow to understand.

Please drop the gentlemen thing. Call yourself super-heroes, team, or whatever, and move out of your bubble. Update January 2021: Jack privately reached out to me after reading this post and changed this—thank you.

Improve Your Values and Critical Thinking—Jack, please follow through on the “New Focus” promises you made in your follow-up post. Maybe add another channel to Discord where ideas can be discussed in a safe environment. A related point: I find it truly weird how nothing has been said about this incident in Statamic’s Discord channel—not even something diplomatic in Jack’s defence. I can only assume the silence is awkward embarrassment or disagreement. I’ve had private conversations with a few notable members of the group. One pointed out “I wonder if the Statamic community is more tolerant of Jack’s post because of the demographic. Almost all white guys in the Discord group—a bit of a silo/bubble”.

Another idea from a Discord group member—“I wonder if Statamic could do more to highlight social issues. They were noticeably quiet during the BLM movement. Understandably, a company might choose to stay silent—their v3 upgrade notification says something like ‘integrity is what you do without anyone noticing when it won’t benefit you’. But now that Jack has been so vocal about his stance, he’s single-handedly spent all of the goodwill capital built up, and one way to reverse that might be to more visibly support causes that contradict Trump’s policies (climate change, BLM, etc.).”

As much as I try to separate Jack and his values from Statamic, it’s pretty hard—he's put himself and his personality into its marketing more so than other CMS platforms. If you want your product to be successful amongst a—let's face it—widely left-wing segment, your values are important.

I'm now going to offer an optional hour of in-person (or Skype!) training for all my web clients, where I will explain not only every aspect of the admin but also video record the whole session.

Don't worry—I'll only record the 'screen' video! But our conversation will also be recorded in audio. So if a client remembers me explaining something cool to them in the session, they can grab the video and scrub through it to watch everything explained again.

I'm thinking of covering:

• Navigation management

• Image cropping

• Showing how the system optimises images, and what to be aware of

• Basic SEO optimisations to improve your chances of getting people to click through from Google or Bing search results

• Social media optimisations like Facebook and Twitter previews

• Understanding the heading hierarchy, and text formatting for SEO

• Keyboard shortcuts for editing

Just to be clear this would be an extra cost outside the project(!), but still, a cool option to have, I think.

Although they didn't come out and say it, I couldn't help but feel like they were disappointed and they felt that their website was broken.

In contrast to their mood, I'm often delighted—and not because it's an opportunity to charge them, but because this is what I expect to happen with every web project—through adding more content and using the website, the client has come to realise more explicit requirements and higher ambitions.

The fallacy of v1

To be totally honest—as inspired as I am—I never really enjoy building 'version 1.0' websites.

The unfortunate truth is that 'version 1.0' of a website never quite knocks it out the park because there's so much groundwork to cover and so many unknowns. Clients rarely have all the content they need; they'll change course mid-way through the project; the design takes a while to come together because we have different ideas; often the budget runs out, and so I don't have the polish time I'd like. Instead, I look forward to version 2; or heck even version 1.1.

Once we've built your initial site we can start laying on some polish; things are much clearer, we can make up for the course correction that came out version 1, and I can fix all the little niggles.

I feel the same about my website, honestly. Even now as I write this post, I am reluctant to publish it before I improve my site. But I know this post will look better soon when I get the chance to improve things.

In contrast, in my experience clients tend to think of their website as a 'one-off' that they rip apart every three years or so, only to get re-built. I'm writing this blog post to try and convince them otherwise (if they're reading!).

Take the iPhone as a good example—let's compare the original 2007 iPhone to the 2017 iPhone 'X'. The product is still fundamentally the same—rounded icons on the screen, fits in your pocket, makes phone calls, etc. —but they've slowly polished it over the years to great effect.

Apple doesn't throw the baby out with the bathwater; they refine. Updating your website is like upgrading your iPhone—do it regularly and make incremental improvements.

Don't abandon your investment

And so the most disappointing thing is when I build a website for a client, and I revisit it a couple of years down the line, only to see it replaced by something completely different. What a waste! And this isn't a personal/emotional thing—I just think it's a total waste of money.

I tend to write down a ton of ideas for improvements and new features towards the end of the project. If only they'd commissioned a v2 of their current website. Maybe the client didn't think long-term, or perhaps they kept quiet about what they didn't like, or they mistakenly thought 'version 1' was my complete and total vision for the website.

What really baffles me is when a client replaces my custom designed-and-developed website with some awful standard WordPress template, which has all sorts of performance problems, and a totally generic design, making their brand seem like a fly-by-night.

If you've done this before, or are teetering on the edge of doing it, instead of taking the 'rip-it-down' approach, I urge you to have an honest conversation with your web designer. If you come to them with a budget, they'll be more than happy to improve things, and won't get defensive about what's already there. As a web designer, I expect your website will be an ongoing conversation, to be critiqued and re-imagined, and so should you.

My dream is for a client to come to me out of the blue and say 'you built this website for me a year or two ago. It's working ok but I've had a good year and want to re-invest. I'm not sure how to improve it, but here's my budget—do you have some ideas?'

I try to reflect this when providing services myself—not that I don’t have skill.

Things I try to stick to:

• Always try to reply within 24 hours, even if it's just to say 'I'll get back to you later in the week.'

• Sometimes you need to juggle multiple projects, and that's fine, but always try to let clients know when you'll be working on their project, even if it's in a couple of weeks—so they don't think you've abandoned them.

Running with the jacket analogy a bit more—let's say you want to be able to go outside in the Winter. Well—just get a decent jacket, right? So you can get yourself out there. Fast forward a year, and you decide to start dating, or maybe you're going to business meetings. You want to attract a certain class of person—after all, “clothes maketh the man”/woman, as Shakespeare once said. At this point, you want a jacket that makes you look good. You want it to fit snug around your body; you want people to realise you care. You also want to spend a bit more, but if it lasts you a few years, you don't mind…

I'd say the jacket metaphor works pretty well for websites.

I mostly wanted to expand on these and cover a few different examples, and more importantly, some gotchas that stopped me picking this up as quickly as I should have. Maybe you've arrived here as a sceptic. Maybe you're scoffing pixel pies and laughing at the complicated em-based maths you'll find here. Well, maybe I wasn't ever that cynical, but I certainly put off looking at ems for a long time.

My Background

I've long resisted moving from Pixels to Ems. I was in the 'I could do without the maths' camp.

That's not to say I was dogmatic about ems; I could appreciate the advantage of bumping font sizes in one go. But being frank I would rather change multiple fixed font sizes than figure out all the maths.

A few things eventually guilted me into giving them another chance, and if you're still bloody-minded, consider the following:

• If you're designing responsively, you would likely have at least made the mental jump between designing with fixed-width containers to designing with % containers. It might have been a bit of effort to adjust, but it was worth it, right? Then it would help if you also were questioning your beliefs on using fixed pixels for font size.

• Question when you should ever use fixed pixels. To design responsively is to create relationships between different elements. If your viewport expands, you probably want your main container to expand, albeit with a max-width. When your font size expands, so should your vertical paragraph padding, right? Thinking about these relationships is what convinced me to give ems another look.

• If you look at the most influential web speakers and writers on Twitter, most, if not all, of them favour ems or rems. Whilst I'm not too fond of web celeb pandering when many of your web heroes hold a particular opinion you should question why that is.

Reading

Read these articles if you want to ponder further...

1. Flexible Foundations by Trent Walton

2. Why Ems by Chris Coyier

Establishing a Baseline with P tags

We'll start by just getting our vertical rhythm using just p tags. Nice and easy, hey?

The first thing you need to do is set your font-size to 100%. This does make sure you're starting with the default font size used by browsers, which tends to be 16px. E.g. 100% would equal 16px, 150% = 24px, 200% = 32px, etc.

If you've downloaded the HTML5 Boilerplate as a starting point for your project, this is done for you in their reset. I tend to repeat this rule in the main section of my style.css anyway, just for easy access.

html {
  font-size: 100%;
}

Our next step is to specify line-height. To be honest, line-height is pretty arbitrary. Your typeface and the sense of space in your design will affect your judgement here, but generally, 1.3 to 1.5 is considered optimal.

html {
   font-size: 100%;
   line-height: 1.5; /* Magic Number / Line-height value of 24px */
}

Using these two values, we can derive our baseline figure; what Harry Roberts calls our 'Magic Number'. This is basically what we'll be using to set the rest of our proportions to create consistent rhythm.

In this case, our baseline will be 24px. You get this number by times' your font size by the line-height, e.g. since we are using 100% to get the browser default of 16px, in our case, it would be 16px * 1.5 = 24px. This makes sense if you think about it, we're saying 'times our font-size of 16 pixels by 1 and a half to get the total height for the line'.

The only other thing we need to do is set a margin-block-end property on our p tags. This needs to be a multiple of our baseline, i.e. a multiple of 24px in our instance. So let's set this to 1.5rem (16 * 1.5= 24px).

*FYI: We're using rems just to avoid any nesting complications that initially put people off the em unit, to begin with. If you want to know more about the difference between ems and rems, read Snook's article.*

So that's it; we've created vertical rhythm with p tags. But how do we test this? There are many tools to do this, Dan Eden's baseline.js, for example, but I really like xScope, a Mac design app that you can use for lots of things besides testing baselines. I like it over other tools because you can set a global hotkey to toggle it off and on quickly.

In xScope, you can set a baseline step by going to Guides > Guide Wizard in the menu. Then set the orientation to horizontal, bump Repeat guide to 50 and set moving gutter to the baseline figure we have, i.e. 24. Make sure the gutter has been set to 0, and click 'Create Guide.'

Now we're getting the hang of things, right? Other elements should be easy, but this is where you'll hit gotcha number 1 if you're not paying attention.

Let's say we want to add an H2 tag. What you need to know is HTML5 Boilerplate adds some default margins to H tags, and so does the browser naturally; therefore, we need to set a margin-block-end value for the h2, but we also need to reset the margin-block-start value.

To solve this as we style subsequent elements, you can either reset all top and bottom margins using a group selector to start each project with or add them one by one as you use them. I'd suggest you reset them one by one just in case you miss a style. Otherwise, your reset will kill some safe defaults.

We'll add the h2 to our vertical margin reset and pick our font-size...

/* Reset. Add elements to this Reset as you build up your vertical rhythm */
h2,
p {
  margin: 0 auto;
}

h2 {
  font-size: 2rem; / 32px /
}

You'll see I have put a pixel calculation next to the font-size for future reference. The thing to bear in mind is that once these first calculations have been completed, we never need to worry about them again because in later media queries we just bump the font-size up on the HTML selector.

You get the REM font-size by taking your chosen pixel font-size and dividing it by the initial html font-size we chose. In our case we chose the default 100% (or 16px) for our initial font-size, therefore for a font-size of 32px that would be 32px / 16px = 2rem.

Just so we have another example, if you chose 36px for your h2 font-size, this would be a rem calculation of 2.25rem (36px / 16px).

Gotcha Number 2: Always work with the font pixel size first so you can easily keep things in line with the magic number, e.g. if you arbitrary decide on on a rem figure like 2.2rem, this might give you an odd pixel calculation of 35.2px, which would throw off your vertical rhythm.

To set up the proceeding vertical rhythm, we'll need to add a margin-block-end property of 1.5rem, which falls in line as a multiple of our 24px baseline (1.5 * 16px = 24px)

h2 {font-size: 2rem; /* 32px */
   margin-block-end: 1.5rem;
}

Once we have the vertical rhythm working between p tags and h tags, we can play with adjusting the breaks' height.

What I mean by this is, for me, the Heading 2 in the screenshot above feels wrong. The distance between the heading 2 + the previous/next paragraphs is the same. This makes the heading feel disconnected, and you're not sure which paragraph it belongs to. I see this on a lot of websites and dislike it. However, we can change it with a bit of maths.

The simplest way to do it is to add some padding above the h2. We just need to make sure it is a multiple of the baseline. Therefore we can add padding-top of 1.5rem, which is equal to our baseline of 24px (16px * 1.5 = 24px). This pushes our heading 2 away from the previous paragraph while maintaining our rhythm.

h2 {
      font-size: 2rem; /* 32px */
      line-height: 0.75; /* 24px / 32px */
}

Here are our maths if we wanted to bump the font size of h2s up to 37px:

h2 {
    font-size: 2.3125rem;  /* 37px */
    line-height: 1.297297297; /* We need to get to a multiple of 24px, therefore 48px/37px. Alternatively we could pull compress the line height by going down to a lower multiple: 24px/37px = .648648649 */
}

Taking the time to set this up will initially feel like a chore, but will save us maintenance later. For example, if we bump up the HTML font-size to 110% in a subsequent media query, our vertical rhythm will stay intact, with all paddings and font-sizes increasing proportionally. I think fixed pixels appear easier initially, and maybe less complex, but if you value the rhythm and proportion of your design, you should design responsively, relative units are your friends.

With the announcement of Google Chromebooks, here is an approach that is the complete opposite. We don't have to force local data on to the web because all our data lives_ on the web.

Personally I have been long advocating web apps and where possible I will work on the web instead of using a native app e.g. Why use Twitter App when you can just go to www.twitter.com and get the same experience? They have built-in keyboard shortcuts and I can get notifications via a Chrome. If I get a new computer I don't have to worry about downloading a native app and setting up my preferences again, the web app is exactly as I left it.

There are many advantages in working exclusively on the web, the key ones being:

• I can work from anywhere, on any computer

• I never have to worry about setting up my computer and preferences again

• I never have to worry about backup

• I get a consistent experience across different OS'

For the everyday worker, I am pretty sure they would have no problem switching to Chrome OS - the only habit they would need to change is using Google Docs rather than MS Office. However, for the web developer/designer it's much more difficult to use Chrome OS. Here are the problems we face...

1. We can't develop locally when working on a Content Management System like WordPress. No MAMP

2. Whilst we could use Firebug or Web Inspector there are no really good substitutes for a program like CSSEdit or a text editor like TextMate or Sublime Text

3. How do we transfer our changes to a web server? No FTP?

I would love to make the switch to working 100% in web apps; I believe that in 10 years from now it's inevitable that everything will be a web app, but at there moment there are too many things preventing me from pulling the trigger. I suspect the three above issues would be major show-stoppers preventing 99% of web designers from even considering Chrome OS. Some people would start arguing about the Adobe suite, but personally I design more in the browser, and Aviary looks like a reasonable substitute for me.

What about you? Can you suggest any workarounds for these issues? And what would you miss if you had to switch to Chrome OS?