14th April 2012
Remember those “HD Ready” stickers you used to see stuck in the corner of a flat screen TV? Back then retailers thought it was important to tell you that the TV you were about to buy is future-proof (that is to say it would be capable of displaying high resolution imagery when the technology arrives).
I can see the same thing happening with computing, we currently have “retina” displays on mobile devices (including non-Apple products) capable of displaying high resolution graphical content. Where Apple calls something a retina display that can be expected as a given for all their future mobile products, you can bet other companies will follow suit. Another safe bet would be to count on Apple leading the way with retina display laptops and desktops1.
The early adopters of high definition TVs experienced standard definition broadcasts until high definition signals were broadcast to their TV set which then enhanced their experience. The signal we broadcast on the high definition web comes in the form of high resolution images, video and scalable vector graphics, and we already have a lot2 of devices in the wild that are ready to receive this content.
The key to serving high definition web pages to these devices is scalability. Unlike TVs displaying signals in a 16:9 format, we have screen orientation, an infinite canvas, connection speed and a number of other things to work with. We can serve the right layout to the end device using responsive web design and serve the right content using server-side techniques so no device is unfairly expected to download HD content when it is either unnecessary or incapable. The entire experience needs to scale appropriately, upwards and downwards.
We should start making use of this technology. Like the advances in technology that happened around modem speeds during the transition from dial up to broadband. The web benefitted from the speed increase and became a more immersive experience as a result of the media we were capable of showing on it. We pushed the web’s capabilities then and we should do the same now. We have the ability with the high definition web to help create an even richer experience3.
If you want to put a label to this phase in the web’s life cycle eg “Web 2.0” then “Web HD” has a nice ring to it. ↩
17th March 2012
The web is inherently responsive. It’s in it’s DNA. If you create a structured HTML document with no CSS applied and open it in any browser, you will see it is naturally fluid1 and will fit any window size.
This is why mobile first makes sense to me. Block level elements stack nicely on top of each other and are fluid by default so our code should’t be heavy at this stage. From a styling perspective, at the mobile first stage you are essentially adding colour, type properties and establishing the vertical relationship between objects.
At your breakpoints you are mainly dealing with layout (widths and floats). Jeremy Keith’s approach for serving stylesheets helps here. Jeremy serves a separate stylesheet for mobile which filters through all properties to the layout stylesheet which is only applied when a viewport can handle it. The layout stylesheet shouldn’t be heavy either as it should only contain layout properties.
Realising that the web is naturally responsive encourages your thinking to keep your code light. A lot of the work is already done for you when using a mobile first approach. That was my epiphany, I hope it helps you too.
I owe my epiphany to Chris Armstrong who pointed this out to me during our first responsive design project together. ↩
25th February 2012
You probably heard about a little event in London this week called Responsive Summit - the brainchild of Josh Brewer and my work colleague Chris Armstrong. What started out as an informal chat between the two a week earlier ended up as a bigger discussion between more colleagues including Mark Boulton, Paul McKeever, Dan Mall, Paul Lloyd among others and of course the web community via Twitter.
One of the discussions that particularly interested me was initially mentioned by Mark Boulton before the event even began. He explains the properties of what makes responsive web design:
A simple example of this is your central heating. Mapping central heating to those three:
- Sensors: This is your thermostat. It measures the temperature.
- Systems: This is the software in your thermostat, or on your boiler, that you can programme.
- Actuators: This is the thing that turns your boiler on or off.
This is a responsive design system. Now, looking at web design, let’s try and map Responsive Web Design to it:
- Sensors: This is the browser
- Systems: This is our CSS — specifically the @media declarations
- Actuators: This is our CSS too — specifically what falls within our @media queries
Using @media queries, the browser detects the width. The browser is the thing that is sensing here.
At the moment, all that we can do reliably (well, fairly), and knowably, is use the browser as our single sensor by which to sense. We have one sensor. We need more.
I would add that the browser has a few other sensors along with detecting the viewport width that we can make use of for designing responsively.
We could perhaps use geolocation as a way of detecting movement1. If a person is constantly moving, that’s a pretty clear indicator that they are travelling. We could better shape their experience by responding to their situation at that point in time.
You may be aware of Liz Danzico’s lovely Bobulate. During the day you will be served a stylesheet that has dark text on a white background, after sunset you will be served a stylesheet that has light text on a darker background to reduce glare and enhance the reading experience. This is responsive web design - the page shapes the experience for you at that particular point in time.
Reading distance2, for me, is the golden ticket. We don’t have a sensor for this yet. If we could sense how close or how far a reader is from the screen, we could let the content respond appropriately - think reading on a mobile device, sitting stationed at a desktop machine or relaxing and reading the web on a TV from the comfort of your sofa.
Mark Boulton is right, we do need more sensors. Geolocation and time are two small sensors that could help us in little ways to learn a bit more about our reader beyond changing their layout based on their screen size.
We’re capable of so much more.
22nd February 2012
As we adapt our code to adapt to changing contexts so must our process and therefore so must our tools.
Luke Wroblewski mentioned recently on Twitter:
When trying to design in code, I inevitably need to bubble up to Photoshop every now & then.
(via Luke W on Twitter)
This made me think of my own process. Photoshop1 has become an add-on to the design and build process whereas before it was at the core of every design decision and central to the design process itself.
Responsive web design has naturally moved us away from the world of the finite canvas of tools like Photoshop and on to the infinite canvas of the the web. Those I know that design and build responsive layouts no longer use Photoshop as the pixel perfect representation of the site yet to be built and have moved towards designing in the browser instead. We now design in proportions, not pixels2.
So what is the role of a graphics editor in a responsive designer’s toolkit? I can’t answer for everybody, and I’d love to hear your thoughts, but for me the clue is in the name. Photoshop deals with raster graphics like photographs or textures that are otherwise unachievable natively in the browser. I find it ironic that responsive design has changed the role of my tools - they serve a different purpose now, they change, they respond.
15th February 2012
I am a visual learner. I learn best when watching an example, my mind absorbs images and motion better than static words or instructions. One is more visually interesting than the other.
I love watching people passionate about their craft - their traits, techniques and decision making - how they do things. It helps me get better at what I do. It helps shape my approach to my craft.
Ever since I watched A History Of The Title Sequence by Jurjen Versteeg, I was gripped by his attention to detail, the precision and care that he puts into each title painstakingly crafted by his tools. It’s taught me to do the same in my work, with my tools. Although they are different they don’t change how attentive I can be to my work.
Sometimes it’s nice to just take a moment and sit in someone else’s presence and watch them work.
8th February 2012
My parents have a table, a really solid table that has played host to thousands of breakfasts, lunches, dinners and homework assignments. It is the centrepiece of the kitchen and still looks fantastic years after we brought it into our home. I wonder if the woodworker who built the table realised what an important part of our family life it would be, it really means something to us. Ever since I watched Wilson Miner’s talk at Build last year1, I can’t stop thinking about making meaningful things that will last.
Perhaps I’m more concerned about leaving behind a legacy. What do we want to be remembered for when we are gone? Architects, artists, sculptors leave behind a physical representation of their work. We are in a lucky position where we can be the makers of experiences and memories.
Wilson didn’t directly talk about revolution, perhaps this is a feeling of internal revolution that I feel, maybe you feel it too, that we are part of something big. We are well accustomed to the fact that the web is in its infancy and that we as developers and designers have more influence on its direction than anyone else through organisations like the W3C. We shape the future of this platform for all who use it.
I can see many parallels between the industrial revolution during the 18th and 19th century and the current state of the web industry. The industrial revolution was a period in time where major advances in machinery and technology changed how the people of the times lived their everyday lives. It sounds very familiar to the progression of the web from it’s introduction to public consciousness in the 90’s, through the web standards movement in the last decade and now it’s coming of age.
As Wilson mentioned in his talk we spend increasingly large amounts of our day looking at screens. The things we make on these screens: the design patterns, decisions and journeys are building the foundation of the web for future generations. One day we will look back and be proud to say “I was part of that”.
I missed the event in person but the video Andy McMillan posted moved me to write this. I heard reports of Wilson moving the room to silence and some people to tears ↩
17th January 2012
Cameron Koczon wrote a rousing piece for the latest issue of A List Apart today with a lot of useful advice and observations:
We need to think about products over posters and people over page views. We need this to happen at every level: in design schools, in design writing, and in the things we celebrate online and in person. We have a new purpose: elevate design and help change the world. Let’s talk about how to do that.
The web is maturing as a medium. As we move away from the cheap, tacky, disposable designs that accompanied Web 2.0, we enter a phase where quality content is complimented by more considered design. Publications like Method and Craft and The Great Discontent are obvious examples of the shift towards finer content where recently our feed readers were full of sites publishing lists of techniques and plugins.
We strive for timelessness on this medium that is inherently temporary, and I feel that comes naturally as we learn the strengths and weaknesses of the web as a platform and the tools we use. By pushing such boundaries we make better things as a result from our learning. It is no longer deemed acceptable to produce a web product for one device which may be replaced by another device tomorrow.
Just like Jeffery Zeldman led the web standards movement, great thinkers like Ethan Marcotte lead the way for the web’s next phase of making quality things that work where the web works, making things that last.
We get to go make things. Things that nudge the world a little bit in what we hope is the right direction. We get to put a dent in the universe. This is a great job.
~ Wilson Miner
Jordan is a web designer passionate about responsive web design and content choreography. He as a penchant for typography having worked previously with the Typecast team.
He writes occasionally for .net Magazine and Smashing Magazine and currently works for Eyekiller in Bangor, Northern Ireland. You can follow him on twitter @jordanmoore
Available for freelance projects in early 2014