Posts Tagged: Web design

Over 2013 I immersed myself in the emerging discipline of Responsive Web Design, reading dozens of articles on it, spending a day at a workshop and another at a conference about it, building a half dozen websites with it, and writing pages and pages of notes on it all. It’s been an interesting journey and I’ve made a few U-turns on what I thought would be best practice, but it’s time to boil my thoughts down to a post or four. First up what RWD really is:

Before the buzzword, the responsive Origin Story:

The ideas behind responsive web design were initially set out by Ethan Marcotte in his 2010 talk at An Event Apart, which is well worth watching as it’s proven seminal. Boiling it it down to practical axioms, the main tenants were:

  • Media Queries: A method of delivering different CSS rules to pages of different width, allowing page layout and typography to change to fit different sized screens without changing the content or the HTML.
  • Flexible images: Images online have historically been fixed widths to aid browser performance, but thanks to browser evolution and some new CSS there’s a simple way of making foreground images squishy, and another to make background images stretchy, so either way you’re golden.
  • Fluid Grids: Instead of using pixel values for arranging layout, use EMs (a measure relative to font size) for heights and percentages for widths. Very quickly you’ve got a fluid layout that responds to browser widths.

Riding the wave of the mobile explosion the idea of Responsive Web Design took off in a big way, but the meaning’s been clouded, overused and buzzwordised. It started – and at its core still is – a design philosophy, a few CSS tricks that enable a new kind of fluid design. The likes of Jeremy Keith have been evangelising the screen-size independent approach for a decade now, but designing liquid layouts and fluid grids can be difficult without a very good understanding of web technologies and it’s hard to represent in Photoshop; an awkward and ill-suited tool for representing any non-static design.

Four years later that mobile explosion might be old news but it’s only becoming more diverse with every new phone, tablet or “phablet” released. It’s self-evident but often overlooked that mobile devices are increasingly the first choice for social: facebook, twitter and emails full of links being shared. Those links don’t open apps, so sites need to look decent on these multi-platform multi-resolution devices.

RWD and fluid design offers ubiquity, flexibility, content parity and cross-device future-friendly thematic consistency. It’s about generalisation not optimisation. It’s less about the mobile, tablet and desktop views, more about the gaps and the overlap between them that an increasing number of devices fall into. It’s not a silver bullet; you need great design, a solid performance strategy and probably progressive enhancement to deliver the goods. It’s also not just something for developers to worry about.

Next on RWD, navigating the sea of buzzwords to work out if Responsive is really what you need!

Fools rush in

Interwebs

As a front end web dev it’s standard for a producer to give me a site to build, telling me to start with a given page. I often have no knowledge of the project but like a good little worker I open up the right PhotoShop comp and get straight to work styling it up. Of course this is a terrible idea.

I’ve been building sites for ten years now, large-scale international sites for seven: I know very well that they’re not built page by page. That didn’t stop me diving straight in and starting out my current project with the homepage header. Seems legit, right? But a cursory glance over the designs won’t uncover the layers to the onion or the pitfalls scattered around dozens of PSDs. Just that lowly header has 3 configurations for desktop, tablet, and mobile view, 3 more for the home-page-specific version, 2 more for scrolled-down view in tablet and desktop and the main nav has 2 compacted toggleable states: hover for scrolled down and on-click for mobile. Responsive gone awry.

TLDR: the header has about ten views.

For non markup monkeys, imagine a transformer with 10 forms. Each one may be simple but all coexisting in the same space it’s a nightmare. If I’d taken a step back at the beginning of the project to grok the site I’d have been able to minimise the impact; rationalise the design, keep things modular in places and siloed in others, and gotten through it in half the time. Instead in my haste I’ve fallen foul of every pitfall, rewritten everything three times, gained a few white hairs and frustrated poor PMs wondering what’s taking so long. DERP.

Note to self: next time go all Ackbar on their asses.

ackbar_its_a_trap

The drawing board

Bloggery

I’m working on a new version of all this. AGAIN. Tooling up with command line stuff like ruby, git and grunt, learning the nifty nuances of Sublime Text 2 and trying out all the CSS preprocessors. LESS is OK, Stylus wound me up the wrong way, I’m probably going with SASS in spite of it needing Ruby.

It’s all pretty fun but ridiculously time consuming so I’m gonna blog less til I get something live. In the meantime here’s a blogpost I did for VML about my first time at a developer Meetup thingy, here’s some photos I did for Pass This On and here’s a few from the last Sink the Pink.

Responsive Day Out

Interwebs

The Responsive Day Out was a barebones web conference put on by Jeremy Keith et al in Brighton. It had an engaging fast-paced format and served as a great state of the nation on the practical aspects of RWD. I’ve sketched together a few of the points I found most interesting… Sorry, it got pretty long.

Design workflows

Sarah Parmenter (who’s podcast I’m now addicted to) started the day off speaking about how RWD has turned the processes for creating sites on their head and we’re all “winging it” to an extent, especially with designing fluid sites. Fluid is hard: When I did a percentage-based site for Nestlé Foods back in ’07, it was so challenging I never went back!

Sarah’s approach to design deliverables was interesting too; Photoshop stays part of her design process but when it comes to sign-off it’s all about content hierarchies, pattern sets and style guides. I’ve never been a fan of “make it like the PSD” and these days it’s not only missing transitions and interactions but an infinite number of portal sizes too!

This idea of getting away from futile and increasingly irrelevant pixel-percision was shared by Laura Kalbag:, in her talk on maintaining look and feel cross-device, focusing on what should remain the same to give a continuous and recognisable experience no matter how users choose to view the site. She also had one of the best quotes of the day in an effort to encourage people to share RWD failures as well as successes: “If you’re not ashamed of what you did 3 months ago, you’re not keeping up”.

Design Patterns

David Bushell also spoke about device-agnosticism, particularly interactions and not relying on device-specifics like swipe or hover. He was one of those that touched on the myopia of designing with particular devices in mind, there are just too many false assumptions made: High pixel-count doesn’t necessarily mean large screen (retina screens), large portal size (Macs) or that the viewer is even near their screens (TVs).

His navigation design patterns struck a nerve as on my most recent project changing constraints meant I had to throw out the designer’s version of the mobile nav altogether and jury-rig a new version in an evening. I’d have liked more time to implement one of those fancy off-canvas solutions though.

Josh Emerson‘s bit on Asset Fonts was also full of the fancy nift. I’ve used iconfonts before, but not well. I’d love to make custom asset fonts a regular part of my development, swapping out hover sprites for ICOmoon. This CSS pattern in particular is so awesome it actually gave me shivers.

Assum CSS pattern

Performance

Having people in to talk about the nuts and bolts of exemplary enterprise-level Mobile First solutions was a real treat: massive sites done right! Tom Maslen spoke about BBC News and Andy Hume on the Guardian‘s approach. They both take progressive enhancement to the next level, where instead of just adding a bevels or slightly nicer animations they’re putting in sliders, galleries and videos.

As someone with a handful of responsive sites under my belt I’ve got my head around the basics of media queries and adaptive images; the obvious next step from having things look good on mobile is to have things run well on a phone connection too. You know when somethings in the zeitgeist when it’s on A List Apart. Pointing Y-Slow at my blog highlights a load of embarrassing red flags that I didn’t care so much about when I was learning LESS, WordPress and responsive design; sorting that’s next on the list but it’s just the tip of the iceberg.

In the month since the conference I’ve been energised to check out a bunch of new des/dev podcasts, some new (to me!) front end tools, and ponder processes and tooling at work. I jumped at the chance to go to a workshop with the inimitable Brad Frost, driving force behind This Is Responsive for more of the same RWD juju. It’s good stuff.

Dix Pix + Site Done

Bloggery Photography

I can’t remember the last time I’ve been this productive. Last night I posted maybe my favourite set of Danpaps pics yet, from Shake Yer Dix last Saturday. They took a while as I’m less practiced whittling crowdshots than pics of posers, but I’m really happy with the result.  Selective B&Wing and front-curtain shenanigans definitely helped; I love the blurry-yet-sharp look.

As well as that I’ve finished the About page for my site which is all about ME. It’s a bit wordy at the moment; I’d love to add some irreverent datavis type infographics to it but that’s just content. The fact remains that (tweaks aside) I HAVE FINISHED MY WEBSITE. Ermahgerhd.

Also I changed the header font again. About a half-dozen times actually. Do you hate it?

LOOK AT MAH SITE

Bloggery Photography

ERMAHGERD SERGERHLS TERK THURR LERNCH. But who cares: LOOK AT MY SITE! I’ve come to the end of a design phase and I’d just love any and all feedback. Srsly you guiz. I’m not fussy.

Since my short-lived love of Diablo 3 petered out (VERY DISAPPOINTING BLIZZARD) I’ve been pouring my gamified goal-oriented nervous energies into real life for a change. (Of course website design and development counts as real life, how dare you, shaddup.)

I’ve gotten rid of the footer and the header’s looking pretty sweet with a randomised “HIYA” and an amazing illustration from Mark Goldby. The top nav’s been cobbled together from a icon font, one of the links from which slides in a panel showing the archives. I’m not sure about the main header font but I’ve not found a better one yet, and the twitter feed looks a bit busy and might need a tweak…

Next up will be yer standard “about page” song and dance, but I have to design it first so if you see any issues, problems, breakages or unspeakably ugly things, let me know!

Web design trends: Parallax and Responsive

Articles Interwebs

I’m still eyeball-deep in the explore phase of my new site redesign, which has meant a lot of research into the state of web design trends. There’s clearly two big ones going on at the moment and they’re both tricky to visualise without a lot of examples, so I’m going to whittle down my overflowing bookmark bar and point out the dozen best examples I’ve found.

Parallax!

Linking in with the 2010 craze for one-page websites; these are sites where the backgrounds, foregrounds and/or midgrounds animate relative to the position of the scroll bar to make it look like they are moving faster or slower than expected. It started with the Nike site, and now everyone’s doing it. Easier shown than told though! Click and scroll up and down to witness the nifty.

  • Mark Lawrence Design is the personal site of a designer, it’s pretty arty and freeform with things swooshing in from every direction as you scroll down. Nifty!
  • On the other hand Quality Cabinets is a “just” a commercial, almost brochure-ware site, but it still uses a restrained parallax on their homepage effect to very nice effect.
  • I can’t decide if Dentsu Network over-uses the parallax, but it’s certainly very striking when you use the left hand navigation to get around the page.
  • A charity appeal on a sector jobs site Authentic Jobs uses a well-drilling analogy to get through the page, striking water at the end.
  • The Nizo sign-up page is slick and minimal…
  • While swiss design firm Ala decided to go in the opposite direction, showing off everything you could ever possibly want to do with scrolling-based animations. It’s a leeetle busy.

Responsive design!

In a nutshell these are sites that change depending on the width of the device, which is becoming critical in a time of increasing web device plurality. Technically they’re a combination of three techniques: auto-sizing columns (using % widths instead of px), auto-sizing images (by setting their widths to 100%), and using Media Queries to serve up a different styles at very wide or very narrow widths. To see the changes you’ll have to vary your browser width.

  • The website for the dConstruct 2011 web conference by the inestimable ClearLeft is predictably one of the quintessential responsive design sites. The columns shrink, the images resize and flow and at narrow widths it switches layout to a more “mobile friendly” design.
  • Stephen Caver has another true responsive site, using three layouts instead of two. This one’s interesting because of the CSS3 used to get some pseudo-parallax texture effects when you widen and shrink the portal size.
  • Andersson-Wise has BIG PICTURES YAY. Slightly basic layout but this demos the technique of stretching an image to fill the space, where usually the images have a maxwidth.
  • Forefathers doesn’t actually use resizing columns or images – focusing instead on Media Queries – so this an example of adaptive design similar to what I already use on my site. It’s much less fluid so it needs four distinct layouts at different widths to get it looking as good, and it’s a bit less future proof as it’s difficult to predict what portal sizes new web-enabled devices will have. Still, at the moment it still looks great. Plus there’s a monkey.
  • Andrew Revitt‘s page is another example of adaptive design with four layouts. It also uses a double background to make a better use of what space is left over at the sides.
  • The Happy Bit is a lovely little adaptive design site, but it uses five CSS layouts at different widths… On anything but a tiny site it’s a bit much.

At first I got very excited about the parallax-type sites, but looking under the hood the markup behind all those different scrolling elements is actually pretty ugly and unsemantic. I’d never be able to compress my site to one page anyway. So instead I’m going to focus on responsive design, which certainly has more longevity, though I still hope to throw some subtle parallax elements in there.

Dauntingly. what both these techniques have in common is they’re a big step away from websites being frozen HTML interpretations of static Photoshop documents; they move, they change, they flow. It makes my next stage – amateur wireframing – kinda tricky.

Picwork, webwork

Bloggery Recaps

I really need to stay on top of my photos. I whittled 1000 pics down to 200 and tweaked them within an inch of their lives last week. Exhausting though it was I’m kinda chuffed with the results, though it does make me wonder what I could achieve with a “real” camera. My new favourite thing when I’m working on a pic and it still looks a bit rubbish is to make it black and white and whack the contrast and clarity up. I SO ARTY. Good times. Anyways this week it’s getting a bit silly as I’ve been trying to do the same with another 600 pictures, including ones from Dom/Dolly/Chris’s birthday night out which was amazing. Any night out that features a lot of facepaint or makeup is amazing, it always improves the vibe, I don’t know why.

I’ve updated my set of favourite pics and made it so those are the ones that appear on the front page of this site, which is pretty nifty. The portfolio section is complete too, with improved navigation that I’ve extended to the other pages, and the CV page is ACTUALLY up to date for the first time in years! I’ll probably trim and prune at it like an errant bonsai for weeks yet – the compulsive editor that I am – but it’s nice to have something done that’s been “pending” for so long. Added to the recent work on how the site looks at varying widths, and the whole thing’s kinda finished! It’s a slight embarrassment really, I’m going to have to think up more things to augment. Perhaps a bit of jQuery.ajax shenanigans next?

But for a brief moment the site is done. It’s been a long road and shit. Here’s some of the Best Bits! I.E. some mercifully low quality screenshots of what my site used to look like in its previous iterations. Also my first use of images in the blog for an age, I should do that more. It’s not like I’m short on jpegs.

Mynciboi: done in dreamweaver. Sorry. To be fair it was 2002 and I had no idea what I was doing.

Mynciboi 2.0: don’t remember how I coded it but it was a Blogger back end.

Mynciboi 3: Ugly.

Mochaholic I moved to Movable Type coz I was a GROWNUP.

DanGovan 0.5: never actually coded up! Shame. I liked it but most people said it was awful.
They were wrong, right?

DanGovan 1.0: Simple, classy, ever so slightly plagiarised.

Cya next month for more stuff you don’t care about! AND OMG STOP JUDGING ME.

Caffeinated Tornado

Bloggery

Whoa, it has been ALL GO on the webdev front. The homepage is done and all nifted up, though there’s room for more work. The blog is looking all nice right down to the blockquote styling, the return of “random thoughts” and an awesomely compact archive navigation which leaves no need for jquery shenanigans! I’ll have to use them elsewhere instead. The info page done with an overly detailed site history that nobody in their right mind would be even vaguely interested in, the 404 apology page is done and pointed at, the only big pieces missing are the CV and the “past work” page. The former’s going to take a while to get up to scratch and I’ve been collecting screenies for the latter.

Other things I’d like to add:

  • Navigational “here” state that also turns off the link, with a js/css combo.
  • Dynamically swap out the intro text on the front page for nifty hints on mousing over other parts of the page.
  • Pull out date of last blog post somehow?
  • Get that and other hover-behaviour to fade in and out.
  • Draw in more tweets and get the area to scroll down on hover
  • Homepage details: border along the top etc.
  • Poster-ised photo of myself on the info page.
  • Both “work” and “cv” will probably featuring a nested-list nav on left and entries on left structure.
  • Hide “commenting not allowed” copy from single-post blog pages.
  • Snaz up the 404 somehow. Giant punctuation?
  • Style the (horrible) blogsearch section. For some reason ExpressionEngine makes it a separate, table-ridden subsite. Ugh.
  • Contact details? Though I don’t want a spammable link and email forms always feel crude…
  • Suddenly become a genius at typography and refine all the fonts throughout.

New Lease

Bloggery

Stream of consciousness ahoy. It’s 2010 and time to overhaul this half-finished website, so I’m trying to work out exactly what I want to do with it. I don’t spend a lot of time blogging so much these days so I should tuck that in the back somewhere behind a splash page or some such, while I tweet a fair bit so that should be brought in front-and-centre. It needs a combined cv / portfolio area too, instead of having that separate.

Anyways that sort of stuff is relatively simple, what’s trickier is what I want it to look like. A palette of red, white black and grey is a given, because, well, it’s my site and I like those colours. But beyond that, it has to be SNAZZY! (But doable.) I’ve been looking through blogs and web pages that are ostensibly nifty looking for something along the right lines. Here’s a few that I thought were Plus Nift. I was just bookmarking them til I thought it’d be useful to note down why

  • denisechandler Love the header, the wacky bees and the menu reaching over to the side of the page. Simplt but really impactful. Is that a word? Oh sod it.
  • sursly.com Ok, this looks like nothing, til you click a link and you’re all like WOAH WHAT JUST HAPPENED. Hiding the scroll an putting a bunch of stark graphics between the “pages” is fully nift.
  • mikeambs.com Very simple. I like minimalist stuff and this is that. Similarly blog.squarespace.com, I’ve seen the little marks on the edges like that in a few places now and it’s a nice touch. I’m sure there’s a better word for it but hey.
  • jeffsarmiento.com Wee details are also good though, and this has loads of that. I particularly like how the secondary column feels undeniably secondary.
  • colly.com Probably represents the my idea in webdesign. I’m not aiming anywhere near that high, to be honest, but it’s good to keep a benchmark of awesome in the back of your mind.
  • northtemple Love the NORTH widget thingy. Awesomesauce.
  • urbanlandscapelab Minimal colours, nice use of negative space, love the header/footer and the bright green blip when you click a link. Nice.
  • matthamm Textured background vs flat foreground + slight bevel = subtle text that pops sufficiently anyways.

With any luck I’ll add some more sites/ideas/etc here. Woop!