Responsive break-whats?

As a bit of a refresher - responsively designed sites usually set a series of breakpoints (using Media Queries) where the layout changes at a particular page widths. In most cases these breakpoints have been decided upon based upon the screen widths of common devices (predominantly the iPhone, iPad etc).

A Content First Approach

In the comments of Zeldman’s article, Paul Robert Lloyd has the following to say.

 I advocate using breakpoints that take their lead from the content (again, content first). For example, a design doesn’t adapt because the viewport has narrowed, but because a certain line length becomes excessive, or a long heading takes up too much space.

In very eloquent fashion, Paul has managed to crystalise some of  the thoughts that I myself have been having over the Christmas break.

Keeping things fluid

Ideally, a responsive site should be at least partially fluid as well. That is to say, in between the different breakpoints, the design expands and contracts to fill the available space. This means that at whichever screen size or viewport you view the site, the design should be mostly optimised for that view.

With the knowledge that the content is liquid and will flow to fill the page in between our breakpoints we are given a new freedom. Instead of being bound to creating breakpoints that are targeted at an iPad held in landscape, or a netbook - we can start to create breakpoints dependant in what the content and the design require, safe in the knowledge that even if screen sizes fall in between, the design will still work.

Content Based Breakpoints

This allows us to start using breakpoints to shift and change layouts as the content needs. Paul uses the example of adapting because of line length or heading size. These are great examples, but are just the tip of the iceberg. We can adapt to break out header elements as space becomes available, and have more control over our image sizes rather than have them dictated by a device width.

I’m still formulating exactly what my thoughts are on all the practical outcomes - and obviously haven’t had a chance to try it out too extensively yet, but I am excited to give it a try and see how it works out.

I’ve also a few accompanying thoughts as well…

Pixel or Em Based Breakpoints

There’s an accompanying argument for setting our breakpoints in Ems rather than pixels. This ensures that your proposed layouts will continue to sit nicely whether the user has their font size at the default setting or scaled up or down.

On thinking about it, this is also a great way to do things but, I think, a decision that doesn’t necessarily impact whether you base your breakpoints on content or device.

Letting go of control

There is a mindset you really need to be in to embrace moving away from device-based breakpoints. You need to let go of control. No longer are you crafting perfect designs for iPhone, iPad, Android, browser etc. You no longer dictate exactly how a given device will show the design, but rather trust that the overarching decisions on where the layout should change will flow through appropriately in those devices.

This is merely a case of embracing the inherent flexibility of the medium in which we work, rather than fighting against it.

Time to try it out

Now that the thought of basing breakpoints on content rather than device is in my head - I need to try it out to see how it works in the real world. I’ll let you know how it goes.

What are your thoughts on basing your media query breakpoints on content rather than device?

This has brought to light first hand, the impact that a responsively designed site might have on development time and cost when it comes to making changes down the track.

In the past when I had changes to make to a site it was a simple job of adding the element to the markup,  and then styling it up. Throw in a bit of browser testing to double check, but it was a pretty quick and seamless process. Adding the same elements to a responsive design complicates this process quite markedly.

Old vs New

I personally favour a mobile-first approach - so my first step after getting the markup in place in is to set up the default styles for mobile users, and browsers that don’t support @media queries. From there I work my way through the various breakpoints making sure everything scales appropriately and looks correct on the way to the largest @media query. Then the final polishing is put into place for desktop and other larger-screen users. Then throw in some browser testing, and we are ready to go.

These extra steps are not a problem - they are actually quite important (and fulfilling) - but it is worth noting the extra development time this involves. In the same way that there is an extra time consideration for the initial design of a responsive site, there needs to be extra time allowed for it’s maintenance and additions.

A real-world example

Time for a practical example: I was tasked with adding a secondary navigational element for users who are logged into a site. A simple unordered list with 6 items does the trick and in the past some styles to get everything looking nice. At a guess somewhere under half an hour to get everything polished and nice.

By comparison, using the same markup but styling up the navigation to behave responsively like the rest of the site has come in a little over an hour in total. Not a huge difference on a small item like that, but in reality it is a 100% increase in development time, which could be felt quite strongly on larger adjustments.

Is it worth it?

My hope is that a client who understands the benefits of a responsively designed site will likewise understand the reason for, and the benefit of, the added time (and therefore cost). But anytime that money is involved, you can never be too sure.

What experiences have you had maintaining and updating a responsively designed site?

Let’s go back to the beginning. My background actually started out in traditional print design - I worked at a couple of places including an architect firm where I was responsible for document and presentation layouts, and a publisher where I did page layout and prepress work on a bunch of children’s magazines. Working in print was great - it set a firm foundation for my design sensibilities and there is a lot to be said about the thrill of being able to hold in your hands something that you made.

When I got married, my new wife and I honeymooned in Christchurch, NZ and fell in love with it. 12 months later we packed up everything we owned and moved countries. In New Zealand most of the print design work at the time took place in Wellington, rather than Christchurch - so after a little while of job searching I ended up getting a job with Cabbage Tree Creative, a web agency.

I had a little bit of experience with the web - having taught myself html and css whilst studying, and working at the print design jobs. But this was a whole other level. My TAFE course had covered interface design, and some aspects of site architecture and usability, but this was a crash course in everything web-based. Over the 2 years I spent there, I went from a web novice to an expert - feeling well on top of everything and loving the challenge of taking a gorgeous design and bringing it to life.

Jordesign was started (well kind of) on return to Sydney - doing contract work for a couple of clients I had lined up in advance. As time has gone by my workload has gone almost entirely web based - a sign of where my skills lie, but also the type of work there is demand for. Working for myself - I was the one responsible for keeping on top of trends and best practices, and it is something I still love to this day.

These days my best work is done on the front end. I love designing websites that are clean, elegant and communicate clearly. What I love even more is the challenge of getting my ideas to work in the real world - for anyone, on any device. The technology and possibilities on the web continue to change and accelerate at an alarming rate. Specialising in doing front-end work allows me to keep abreast of it, and deliver the best website possible - for both clients AND the end user.

How did YOU end up where you are now?

Overall it was a lot of work, but not as hard as I had thought. Of the 24 hour period i spent just under 16 of it actively working on the site (with a few hours for sleep, food etc) which is not too bad an effort for coding up a site (and making a bunch of design decisions on the fly) from scratch.

The most time consuming part was actually working within wordpress to set up the structure for my portfolio posts, and then getting them to output correctly in the templates. The styling of everything worked pretty well, with only a couple of little responsive-related tricky spots.

What’s notable

There’s a few things i am particularly proud of  - particularly the fact that the whole is responsive (well mostly, see below) and is visually optimised for most devices. I’ve taken advantage of some webkit animations for hover effects in the menu, and around the place which i think are pretty nice. You’ll need to view the site in safari or chrome to get the full effect.

I’m a fan of the portfolio section - it’s nice and simple but shows of the sites I have built with big images.

So what is missing?

The nature of the time constraints was that I couldn’t get everything done that I want to. Some notable elements missing are the current lack of a print stylesheet, and an overall lack of content. As you can imagine, the current state of the site is not completion - it’s just an interesting resting point. I’m going to continue tying up loose ends and tidying things up in the coming days.

Overall I would call the challenge a success. At the end of the day I have a brand new site I am proud of. I pushed myself, and feel a benefited from it.

The current version of the Jordesign website is really very limited in it’s scope. It was launched in a hurry with the new branding in conjunction with buying a house and moving to Wollongong. It has served well, but it is time for something more.

I’ve been working behind the scenes on an expanded version of the site, to better showcase our work and also give more of an idea of our philosophy and the way we do things. But as is always the case, you are always your own worst client and it has been slow going.

So I am issuing myself a challenge.

The #24hrRedesign Challenge

Starting at midday next Wednesday (9th Nov) I will rip the guts (well maybe just the css) out of the site as it stands at the moment and start work putting together the new and improved jordesign.com. At midday on Thursday I will stop, step back, and see how it has all turned out.

Is this ambitious? a little. A challenge? Definitely. Crazy? almost certainly - but it is the sort of boot in the pants I need to get it up there. Plus it will be interesting to see how it goes.

I have bits of the design pieced together in Photoshop - so i’m not acting entirely blind - but I will be coding everything up and filling up the (numerous and expansive) gaps in the design in the 24 hour period. And of course it will all be nicely handcrafted html5 and css3. I’m even planning on the site being responsive.

Watch, Laugh and Enjoy

So come along and take a look next week (between Wednesday and Thursday) and see how it is progressing. The site will be live throughout the process and I will be trying to document it as best I can. I would love to have you along for the ride. I’d also love it if you could spread the word and get people interested in my #24hrRedesign.

See you soon.

A 21^st Century Bestiary (Anne Galloway)

Things kicked off with a keynote from Anne Galloway looking at the web through the lens of the animal world. We looked at the relationships that humans have with their pets as a potential metaphor for human/computer interaction and how they helps us to see ‘the inherit wonder of the insignificant. Anne introduced us to Remote Pet Care and shared the way the National Trust in the UK is crowdsourcing the running of a farm.

Throughout the session there was this flow of ideas and projects that are pushing the boundaries of connectivity - tracking the location your free range eggs came from, tweets from dairy cattle as they attempt to be milked, and the idea of dialysis sheep. It was an opening keynote that reminded us of the flexibility of the web, and the coming ubiquitousness of computers and communication.

Culture + Heritage + Digital (Seb Chan and Luke Dearnley)

Seb Chan and Luke Dearnley are from the Powerhouse Museum and had a fireside chat about museums, the cataloging of data, and they way the two come together, and get expanded upon by the web. After a brief look at the museum itself and the way the expectation of a museum on the web has changed, they showed us a flurry of interesting and inspiring projects.

Trove is a project of the Australian National Library that digitises old newspapers and catalogs them. What’s on the menu from the NY Public Library is crowdsourcing and cataloging the digitisation of restaurant menus from all over New York. Ancient Lives from the University of Oxford lets you help in the translation of old scrolls and parchment. Old Weather uses old ships logs (digitised via crowdsourcing) to track weather patterns in history. My personal favourite was the Australian Dress Register which catalogs collections of NSW fashion pre-1945 and has an amazing metadata system.

This session really got me thinking about the possibilities of online cataloging, and just made me really want to make something I have neither the expertise or the time to attempt. But that’s inspiration for you…

CSS3 The Web’s Swiss Army Knife (Stephanie Rewis)

Next up we got down to some real practicality. Stephanie Rewis took us on a whistle-stop tour of many of the new features of CSS3. This session resulted in about 3 pages of handwritten notes on background sizes, css3 gradients, psuedo elements, css3 shapes, shadows and more. It was fantastic and, for me, really clarified and simplified a few of the CSS3 properties that I had been struggling to get my head around. This session was the most practical of the two days - and I’m already using most of the things I picked up in my day to day work.

The Dao of Web Design Revisited (John Allsop)

Next up John Allsop revisited his seminal article The Dao of Web Design which is now (astoundingly) more than 10 years old. We saw a parallel between old print designers complaining about the inherit flexibility of the web (compared to print) and the current ongoing debate about native vs web apps.  We were challenged to embrace the fact that “flexible is a feature” and to continue to make our work available to as many people as possible, without boundaries. This session was a great reminder to harness the adaptability of the web, rather than focus on the hardships of a flexible medium.

 Getting Real (Aaron Weyenberg)

I was a little unsure beforehand about attending this session, but am SO glad that I did. Aaron took us through a look at the history of skeoumorphs through time - describing them in the current day as “analog touches to the digital”. We looked at a number of modern examples and started thinking about whether these design cues actually help, or hinder the user. In some instances it is a positive addition, where the real-world exampled the design is modelled on helps the user understand and use the product. But oftentimes a realistic UI inherits the same problems as a physical product when they need not (recreating the annoying aspects of using a typewriter).

In the end Aaron encouraged us to think really hard before making our interfaces too realistic. There are advantages to be had, but it should be done sparingly, and in mind of the many, many things that can go wrong.

Sustaining Passionate Users (Stephen P Anderson)

Day one finished on a real high note with this session from Stephen P Anderson. He was asking the question of how we get users to stay in love with our product (or website or app). We started off looking at the current trend of gamification or, as Stephen liked to refer to it, badgification - and how it predominantly motivates by reward rather than joy, and that can often be short lived. He looked at as ‘Sugar Coating’ adding a layer of fun to the experience to try and make it more interesting. In reality what we should be aiming for is Mastery - for the task/app to be fun and joyous within itself.

We looked at how we can take the enjoyment and excitement of real world games (like Scrabble or the Settlers of Catan) and apply them to other experiences. Games like this have characteristics like competition, simplicity, constraint, acheivement, teamwork and strategy that make them enjoyable. These motivating factors are the sorts of things that can be used in our other projects to inspire and delight users.

Stephen showed us how Intrinsic Motivators (like Challenge, Curiousity, Control, Conflict/Choice and Fantasy) are much strong than the promise of external rewards when it comes to motivating users. What he essentially found through interviews and research though, was that users continued using sites/products because they worked well.

It was the end of a long day, but Stephen held the room in the palm of his hand. The challenge to create work that inspires passion and joy in users is hopefully something I will keep with me for the rest of my working career.

Design [in|for|and] the age of ubiquitous computing (Mike Kuniavsky)

Mike started day 2 talking about at what  it might look like living in a world where computers are in everything. Computing power has become almost free and information is the medium we build things out of.  He talked about a future where we value not devices but services.

Looking at the example of car-sharing  we see the idea of paying for the possibility of an item, or the right to use it rather than having ownership over it.There were also examples like Bag Borrow Steal which allows fashion by subscription - again paying for usage, not ownership.

The exciting thing is that as more and more people come to live in this digital world where computers are everywhere - we’re the ones who already live here. We get to decide what the future looks like.

All the Small Things (Relly Annett-Baker)

Relly’s talk was beyond a doubt the funniest of the conference. She had the auditorium in stitches for the duration and then, once it was all done, we realised we had learnt a whole bunch. Relly was talking us through microcopy - those little bits of text that give you instruction and guide you through a site or app.

The value of good microcopy is that it makes life easier for your users. This in turn results in less time spent on support, less dropoffs and less time spent emailing clients. Good microcopy uses text that describes the action being taken, and uses plain language, not jargon.

We spent some time looking at error messages and how to make them as reassuring and helpful as possible. Good error messages should  ’State The Error’, ‘Explain The Error’, and ‘Create a Path to Resolution’.

Interaction Design Bauhaus (Rahul Sen)

Rahul’s talk was the highlight of WDS11 for me. His background is in architecture so there was a strong thread of emphasis on the world of the web and what it could learn from the history of architecture.

Rahul drew parallels between the Art Noueveau and Gothic Revival periods of history and the current state of web and app design. Great care was taken in crafting buildings that looked back to emulate past trends. The Bauhaus movement turned this on it’s head and sought a return to the basics of reduction, purity, production and order. It is out of this we saw the minimalist international style and many other similar movements in art and design.

Similarly in the current state of the web - a lot of time is dedicated to designing interfaces that emulate existing physical objects, with an overemphasis on detail and decoration. Rahul’s rallying call is for an Interaction Design Bauhaus - returning to function, purity and simplicity.

He made some interesting points about the next movement of art/architecture being postmodernism which drew on all the previous movements, but did so with wit and creativity - in a way that looked to break new ground rather than recreate the past.

Rahul’s talk really resounded with me, and I’m sure I will write more about it in the future.

CSS Power Tools (Nicole Sullivan)

Nicole’s talk was another practical one - focused on the tools that are available to make development easier. She took us through CSS frameworks, Preprocessors (like LESS and SASS), and some other tools like Normalize and CSSLint. This was a reiteration for me of things i was already doing, and things that I already SHOULD be doing. One thing for sure is that I am going to start making the most off LESS and integrating it into my workflow.

Laynyrd: Side Project to Startup (Natalie Downe & Simon Willison)

This was an interesting look at Simon and Nat’s side project Lanyrd which was built in two weeks while they were sick on their honeymoon. Since then it has gained great pickup and they recently received a big chunk of funding. They took us through the story of building the app and the process that led to the funding.

This talk was quite interesting - but more in an intellectual way more than any practical sense. Were I ever to be in a similar situation in the future, it would certainly be interesting to revisit.

Waving at Machines (James Bridle)

The closing keynote from James Bridle was something to experience. He took us through a tour of of the fringes of the digital and the real. Where they meet, and where they blur.

We  started out looked at Render Ghosts (those strange people you see in architectural renderings) and then went further into the strange and bizarre. Loads of examples of places were things from the digital age have entered the physical world.

The talks was so good that I have very few notes. Thankfully it was video taped, so before long you will be able to see it for yourself.

And that was it…

So that was Web Directions 2011. Big thanks for all of the speakers who took part and an especially huge thanks to John and Maxine for once again ensuring it was 2 fantastic days. I’m already looking forward to next year.

So the design is spartan, and is bound to have some rough edges. It’s only been about an hours work so far, so I will need to keep tweaking. No comments, but let’s be honest - there were never any comments on the old site. Keeping the deliberately removed keeps the clutter down.

The important thing is that now there is Something there. Stay Tuned.