Jake Rayson

Get Chunky with your Data

2013-04-30T00:00:00+00:00

Occasionally someone asks me my opinion about web design. Woe betide them, as they are inundated with a reading list, people to follow, websites, videos and articles.

It happened again today, and yet again top of my list is Content Strategy for Mobile by Karen McGrane.

It is a brilliant book, as I said to my friend:

Buy it, read it. Make everyone else read it.

To get a flavour of the book, have a look at her Adapting Ourselves to Adaptive Content video.

The essence is chunky data. Break your data blob into tasty chunks and structure it to reflect your organisation’s purpose and then you can do so much more.

And then it dawned on me: chunky data articulates purpose and functionality, which then informs the accessible approach of progressive enhancement, the flexiblity and future-friendliness of Responsive Web Design and the principle of Modular CSS.

Go get your copy now, go on.

Chunky Bacon, which sounds almost the same as Chunky Data, from why’s (Poignant) Guide to Ruby

Changes: a new responsive theme

2012-10-15T00:00:00+00:00

There are some big changes ahead for everything and everyone, this much-neglected blog included.

First of all, I won’t be blogging for ZDNet any more. Theoretically, this means more time for this, my portfolio/rant site. We shall see.

Secondly, I have started work on a new responsive blogging theme for Nesta called NestaPress. There’s nothing much in the GitHub repo as of yet, but one of the exciting parts is that I’ll be using Inkscape to create the mockups. I love Inkscape, in all its SVG vector goodness, and the file’s are all plain text too, so the goodness can be spread like a giant lump of marmite. Let’s hope you like marmite.

Thirdly, I am branching out into the field of permaculture and sustainable living. I think this is because I’m getting older and getting bored of designing and building websites for what are essentially totally useless products (you know who you are).

This is exciting because I am going to get to make stuff I think is useful and beautiful. I will, of course, keep my avid readers posted.

Less broken

2012-07-02T00:00:00+00:00

I’ve spent the day rebooting the Memset VPS that I manage. I made the foolish novice mistake of trying to install Ruby on Rails on the server, rather than using the excellent and mostly-free-until-you-need-lots Heroku hosting.

Which means this poor portfolio site has been ever more neglected. I’ve fixed the basic layout for the larger desktop view (go on, expand your browser, see the ugliness in full flowing action). But it needs some work.

And then, finally, mobile layout last (I know, I know).

Trouble with Rem

2012-06-29T00:00:00+00:00

In the midst of my langorous and leisurely responsive redesign, I noticed that my text sizing is all over the shop.

Turns out the problem was in my use of rem, the relative ems in CSS3, the use of which I pinched from @Malarkey’s blog post on his responsive web design boilerplate (in the bit about the mixins). I didn’t pay attention during the appropriation, so I missed one crucial point:

The font size is relative to the base font size. Hence the term relative ems.

Doh. I’d set the base font size on the body to 1.1 rem. Now I’ve used @snookca’s recommendation of setting html font-size to 100%.

Time to clear up the ensuing font mess…

Retrospective modularisation

2012-04-30T00:00:00+00:00

This website, by any standards, is pretty darned small. Just a five pages and a blog. So, how complicated could the CSS possibly be? 613 lines, 9 sections and some headaches. That’s how complicated.

The worst of it is, I am retrospectively making the site responsive, with just two breakpoints at 520 and 1024 pixels. It is fiddly, to say the least.

To help clear things up, I’m implementing @snookca’s Scalable and Modular methodology. At the moment, my styles are mish-mashly organised by element, function and page:

Variables
Mixins
Typography
Links
Page elements
Navigation
Specific pages
Breakpoints
Hacks

The trouble with this is that colour and typography are higgeldy-pig with margins and padding. Not good. For example:

#primary-nav li a {
  background-color: #283135;
  letter-spacing: 0.13rem;
  line-height: 2.6rem;
  padding: 0 1.2rem 0.1rem;
  margin-right: 26px;
  border-radius: 3px;
  text-shadow: 1px 1px 1px #1A2023;
}

Jonathan’s approach is to abstract the CSS rules into five categories:

Base
Layout
Module
State
Theme

This way, it’s easier to refactor a section, for example, when you are creating variations for responsive design.

That’s all very well for the theory. Now, let the practice commence!!

It’s not broken, I built it that way

2012-04-27T00:00:00+00:00

In case you were wondering why this website looks broken when viewed in a browser over 1200 pixels wide, it’s because I designed it that way.

Here is a picture for those people not lucky enough to have a big screen monitor:

This website viewed in a browser over 1200 pixels wide

For those that don't like massive single columns and no margins or padding, you are very much in luck, because I am responsibly building this website responsively.

@growdigital

Responsively dull AND exciting

2012-04-24T00:00:00+00:00

I have neglected my portfolio site of late. Sure, I’ve added some screengrabs to my portfolio, showcasing some exciting, cutting-edge HTML emails. But I have failed miserably to convert the site to a fully responsive design.

In conversation with a colleague over a bowl of hot noodles, he slurped that Responsive Web Design is a very exciting concept but dull to implement.

I can see where he’s coming from. There is the initial design, the fun bit, playing with colour combinations and fonts, tweaking layouts and icons. And then you have to do it all again. At least twice.

And then with the markup, you have to tweak all the margins and paddings, not just the page layout. Only what @malarkey calls ‘design atmosphere’ remains the same.

What a lot of work. But it’s worth it,for as the fog of tedium lifts you are presented with the clarity of The One True Website for all Platforms.

@growdigital

Margin top on headings

2012-03-13T00:00:00+00:00

Many, many years ago, I was a QuarkXpress whizz. It’s easy to see how being a jobbing artworker led on to a life of markup: stylesheets were the stuff of good document management, then with Quark as now with CSS. Plus ca change etc.

I was in the habit of setting only bottom margins for paragraphs, as it’s only the headings that require top margins to separate blocks of content.

But what I’ve always found a pain is setting a top margin for a heading only for it to bump against it’s containing element. Sure, you could use an nth element CSS selector to target the first heading but alas it isn’t cross-browser.

Now, however, with all-new-improved HTML5, because you are actively encouraged to think in terms of chunky standalone data blocks, you can have multiple (embedded) h1s on a page. This makes life far easier, because now there is only one h1 per block, all h1s have margin-top:0; as they’re all first in their containers.

Hooray.

I like NestaCMS. A lot.

2012-03-06T00:00:00+00:00

I’m sat on a train, with a dodgy old laptop, a flaky 3G signal from my manky old mobile, and a battery that’s oozing more juice than a month old banana. I’m pulling in to my stop in 10 minutes, yet amazingly I still have time to type up this blog entry in Markdown, save it, git push and then git push heroku.

And it’s up and it’s live, and I’m not even a programmer! Amazing.

This is, of course, down to the magnificent NestaCMS, combined with the awesomeness of GitHub, built on the glory of Ruby and Sinatra.

Really, if you’re a web designer with not much programming nous/experience but you like plain text and simplicity, give Nesta a go.

Get it out!

2012-02-20T00:00:00+00:00

This is my blog! The first draft of my new portfolio blog.

This website is constructed with Nesta CMS, a lightweight, text-oriented, Markdown-centric, GitHub-friendly, Sinatra-frameworked, Ruby-origined Content Management System.

You can subscribe to my newsfeed, on topics as diverse as HTML and CSS, Linux, graphics, design, good practise and commonsense.

I’ll write more later and at greater length about the delights of Nesta, Git, Heroku & Sublime Text. Until then, Get it out!.