Responsive Boxes
Media queries are doing a great job giving CSS feedback on the size of the browser window, allowing you to rearrange and organise for different screen sizes.
23rd February 2012
The web is changing–it’s happening fast. And with that amount of change comes the need to keep abreast, learn about all the shiny new things it can do, the new words people use to describe it all, and quickly use it in your business whether you need it or not. We’ve reached a point where everybody needs to be online, that question has disappeared. But it has been replaced by a slew of more detailed questions that are far harder to answer. And what’s the easiest way to tackle that without actually explaining anything: buzzwords!
Buzzwords have the incredible ability to almost describe a concept very wrongly, and at the same time, be condescending to you for not knowing it already. ‘Cause ‘everybody is talking about it’. So in the aid of clarity, and more productive work, let me clarify some of the newest and greatest internet phenomenon your business might encounter.
This is an oldie, but a goodie. For a fair few years, this actually came to mean a visual style cluttered with shiny buttons, vast, bright coloured spaces, and bold typography. These visual traits did emerge around the time, but web 2.0 actually is the shift from the one-to-many approach of magazine and company brochure websites, to the many-to-many style of Facebook, Twitter and nearly every blog in current existence. It gave the web freedom, and a collective voice that could drown out the most powerful and influential people. It solidified the internet, not simply as a communications medium, but an ecosystem, and has since exposed vast crime and brought down corrupt governments. Web 2.0 is powerful, and here to stay.
There’s been a lot of chatter on this, and whether or not your site is ready to embrace this exciting new technology. Let me clarify: it is not a new technology, and, your site is ready. HTML5 is simply the next version of the HTML specification, and asking whether you should use HTML5 is exactly like asking whether you should build with HTML. Of course you should, it’s HTML.
HTML is used to structure content so browsers know how to display the text and images, and the specification is agreed upon so that different browsers will allow users to have a similar experience. Version 5 brings a lot of new ideas to this specification that will mean a better and more sustainable internet tomorrow, but it will not break your website at all. So learn about the possibilities, and use it in good health!
I was recently approached with the idea that if we built a site in HTML5, it would automatically work well on different devices and scale intelligently. These two things have nothing to do with each other. Responsive design came about as a way to combat the every growing number of devices people are using to access the internet. It is no longer adequate to design for 1024, but rather to understand your users and what they are using. To learn as much as you can about the way they are accessing your site, and try to tailor the experience to suit them.
The first thing we’ve been able to tackle is screen size. We have to deal with giant 1920+ screens, all the way down to mobile phones at 320, and the hundreds of in-between models. Not only that, but pixel density has now become a topic of much concern. We can deal with these things by setting up rules so a browser can respond to any scenario it encounters.
This is a broad, and mostly useless term because we haven’t defined clearly what ‘mobile’ is. It seems to include everything from that decade old phone that only renders text, to our current all-screen, touch based monsters, and even tablets. What about laptops, or those mini-laptops, or what people are calling ultrabooks. They all seem to be carried away, but data seems to suggest a large amount of people use their tablets and phones from home. On powerful wifi connections. Our preconceptions about what users might need in those situations are inherently flawed when we use a word like mobile, because we don’t actually know what we mean. Before you get sold on making your next site mobile-friendly, try and learn about your actual users. That puts you in the best place to give them a great experience.
And remember, smart phones are only getting smarter, and pandering to the lowest model may piss off your best customers.
This was the old school method of responsive design. Essentially, check if someone is using IE and then hurt yourself trying to give them a functioning site. Now, more than ever, this idea has become imperative. Phones have GPS, microphones, cameras, HD displays, touch controls, gyroscopes, and a website that wants to use these must be able to identify what is possible on the current device. This is called feature detection–check if a feature exists, use it. It is far more future-proof because if the feature is later implemented, your user will automatically get the benefit you’ve built.
This is all actually part of responsive design, and soon it may not be just features we are trying to detect. We’d like to know how fast someone’s connection is so we can send them smaller images; maybe know if their surroundings are dark so we can serve a more eye-friendly contrast ratio; know if they are in difficult reading scenarios (travelling), and serve larger type… the possibilities truly are endless, and the end goal is a more usable internet.
We’ve seen some stunning use of social media for brands and this has lead to more social media gurus than there are normal people. Social media as easy as it is hard. It’s like walking into a room full of your customers. There’ll be happy ones and disappointed ones, but most importantly, there’ll be questions. All you have to do is maintain a semblance of cohesion and hopefully make more happy faces. The larger the room, the more daunting the task–do you grab a megaphone and yell at everybody, or join smaller discussions and work your way through hoping the people you’ve influenced, help spread the word?
You are ready to jump on social media when you are ready to listen to feedback and constructively respond, to your entire user base at once. Tough, but entirely doable and there are many examples of excellence.
This is a reach towards the control over details print designers often have. Before something is printed, every last word and image is checked and perfect… the design is ideally made for that exact piece and changing even one word could mean a fairly dramatic change. We don’t have this luxury in web design. Our sites are built powered by a CMS, which means content can always change, even after things are published. What content-first actually means is intent and structure first. In order to design most effectively, designers need to know what kind of content is going in, how it is likely to be formatted and roughly how much of it there will be. This allows us to build with all the possibilities in mind, so the finished product looks good no matter what gets put in at the end. So before you start picking colours and fonts, think about your content, plan what you’d like your user to see; how you’d like them to go through your site, and work towards that.
Each of these sections could actually have its very own book, and most do. I’ve tried to summarise because often the explanations are as confusing as the buzzword and you might not finally know whether to worry about it or not.
To a better internet: live long, and prosper.
Media queries are doing a great job giving CSS feedback on the size of the browser window, allowing you to rearrange and organise for different screen sizes.
We just went through renovating our office space: cut our large table in half to make room, rewired to reduce stray cables, giant whiteboard, better lighting and cooling… the space you work in is important, and improvement is never complete.
We have expanded, and the newest member of our team is our writer: Mana. Mana has written ad copy and newspaper articles, and now jumps headfirst into the content creation for our clients on the web.