Is responsive web the way to move forward?Hi everyone, today's post is just going to be some thinking I've been doing around responsive web
What is responsive web
To keep it simple, responsive web usually refers to a website that changes appearance and sometimes content when viewed on different devices such as a computer or a mobile phone
Smartphones are the most important device in changing our current design / UI / UX thinking. Before we simply had to decide on a layout (fixed versus liquid) and correct cross browser issues, we are now in a situation where we have multiple browsers and screen sizes.
What does this mean?
We now need to make decisions on how we present content across different devices. Before a mobile version of a website essentially just stripped out everything but a simple nav and the text. This ensured it worked across the majority of devices.
Now seeing a stripped down website on a mobile device leaves you feeling shortchanged. On the other hand, not tailoring your website to mobile devices can lead to awkward viewing window where the browser is trying to cram everything into that little space.
What's the answer?
I don't think there is a clear answer right now. Creating a responsive website isn't too difficult but it can mean adding to design and build times on already tight budgets. It can also mean having to rethink copy and whether or not you decided to edit content to suit different devices.
What approach should you take between the stripped down version and not doing anything at all? I would take the nothing at all approach. The reasons being, with this approach you still give put your websites best foot forward, and inbuilt phone browsers allow to you zoom to a point where viewing content is easy enough.
From all this it's still a very interesting time in the responsive web space, and a great time to be an innovator in this space and lead the competition by bring some responsiveness into your current websites
The online space has a weird way of repeating itself. Unlike print, the online space hasn't got hundreds of years of history to look back on. Instead it has a few decades, each with its own little leaps of technology that push the boundaries of what's possible. With each new leap we often find ourselves repeating the past, mistakes and all.
Early websites were designed for a standard monitor size of 640px by 480px. This was the total screen space- we still had to subtract the size for the top toolbar and footer, leading to an even smaller viewable space. Over time monitors have become larger and with it we've seen an increase in usuable screen space.
Generally we design websites for the initial content to fit within a standardized view port of 960px x 600px (-ish). This vertical height represents the 'fold'. The 'fold' is an old term taken from newspapers, referring to the point where the paper was folded in half. Content above the fold is instantly viewable so would be used for the more important information.
Designers initially avoided putting content below the fold as the user often avoided scrolling. The alternative was to make separate pages, so an article may have been broken up into 4 short pages all appearing above the fold. Over time users learned to love scrolling (you probably don't even notice the sound your mouse wheel makes anymore). This change resulted in webpages becoming longer without the worry about content not being seen below the infamous fold.
Flashy animations and cool effects have always gone hand in hand in web. I myself have been guilty of indulging over the years (including my old Geocities website with twinkling, animated gifs). Flash then took over as the 'go to' program for creating animations and 'cool' effects. This lead to the abuse of effects and transitions. We ended up with full flash websites that were incredibly bulky and hard to update. Flash has largely been replaced with JavaScript libraries like JQuery which help smooth out the regular issues of JavaScript inconsistencies across browsers.
So what do all of this have in common with today's topic?
"With each new leap we often find ourselves repeating the past, mistakes and all."
- James, this very same article.
In the mobile space we've often been limited to much smaller screen sizes. We've had to design pages with tiny dimensions, within a tightly confined space. You end up with lots of little pages with very little content. With the rise of smartphones we now have the chance to design in spaces not too dissimilar to regular websites. Mobile websites are once again trimming down pages and spreading content too thinly. Often it is due to constraints in technology (cost of mobile data, etc), but in my opinion sites should give users the option between a mobile and a regular version. This way it gives the user the power to choose between the full or diluted experience based on their situation.
Smartphones have also given rise to the application marketplace. These apps can range from the light hearted 'band name generator' to more complex apps designed to help people maintain a healthy lifestyle. Apps allow developers to create more complex interactions and animations than mobile websites often can permit. This unfortunately has lead to some developers abusing this system once again.
A few online magazine apps appeared on the release of the Apple iPad that meant that users could subscribe to and download online magazines full of great interactive material, videos and images. This led to extremely large, clumsy apps that looked great. But it also meant these apps have inherited all the problems of old flash websites- large downloads before users can see content, flashy interfaces which make it difficult for users to navigate and have made it hard for developers to update and maintain.
New technologies allow us to push the boundaries of what is possible, often allowing us to refine past ideas. Just remember some old ideas are better left in the past.
J
Go the AB's
03 May 2011 - Kelly Milligan
It's an exciting time for front-end web development. More mobile devices capable of full web support, an active move away from IE6, and fantastic new, standards driven tools!
Overview: The less framework is built using CSS3 media queries. It allows you to apply different CSS styles to a page, depending on chosen criteria.
The best way for me to explain is to give you an example: Say you have a web page, and you want it to scale to fit across computers, tablets, and smartphones. Using media queries this becomes very easy! You can apply certain CSS (say, make text smaller, make images smaller, flow a 5 column grid into 3 columns) if the criteria is met (if the width of the browser window is less than specified tiers of pixels).
The Result: a single page, which displays the same content (and HTML markup) in the most optimal way for your device.
The Caveats: CSS3 only works on the newer browsers, such as Safari 4 & 5, Chrome, Firefox 4, Internet Explorer 9. Apple products such as the iPhone and iPad, and Android phones/tablets ARE supported here. It’s not all bad though, your site’s design will simply fall back to your base, computer screen sized design if CSS3 is not supported.
What it means: A website that works across multiple platforms, where content updates apply across all devices with one change. Mobile web browsing is trending upward, ensuring the best readability of your site’s content across all devices doesn’t need to be difficult!
You can find out more here: http://lessframework.com/
And some examples here:
http://edenspiekermann.com/
http://www.madebysplendid.com/
http://naomiatkinson.com/
Try resizing your browser on these examples! You can see first hand how the Less Framework allows these websites to alter their content to your browser window size.
21 Apr 2011 - Corinne Gibson
The success story that is Michael Hill Jeweller today began in 1979… and I was born in 1979! Ok, so that’s just a coincidence, but there are many factors that lead me to write this post today.
Michael Hill Jeweller is on my personal list of top five goal clients.
Why? I absolutely relate to his passion to achieve the goals he sets his mind to.
I purchased Michael Hill’s book, Toughen Up, when it came out in 2009. It really is an interesting read, his dedication and passion for his business and personal life is inspiring, and it’s encouraging to see a Kiwi not get taken down by the dreaded tall-poppy syndrome. He stands tall, and people respect him.
As a company, Michael Hill Jeweller is a “poster boy” for successful business. Whether large or small, it’s great to see a strong employee focus and betterment scheme in place in a company. Frontend also instill this philosophy, which makes an amazingly creative and productive environment to work in.
What do I think Frontend could do for Michael Hill Jeweller?
I think the MHJ site should be a reflection of their market-leading position – the site needs to be at the forefront of web technology, pushing the boundaries while ticking all the ecommerce boxes – because the site is essentially their web-based store front.
To do that, Frontend would hit the drawing board to get back to the basics. A structured approach to site and business research and analysis will allow the scope to be properly defined, KPIs to be documented, check points to be set up; the ultimate goals being top site performance, longevity, wide audience appeal and increased online business and customers for Michael Hill Jeweller.
There is a lot of potential to push the web site in new directions, particularly with the emergence of new technologies and new devices. There are iphone apps that let you try on jewellery, Blue Nile has an interesting app specifically targeted to couples finding the perfect engagement ring, James Allen have created “an online simulation of the magnifying lens used by jewellers to see diamonds up close”.
With a strong focus on user experience (UX) design, Frontend can identify the issues that are potentially impacting conversion goals, brand loyalty, and site usability.
This is the perfect time for any business to do a current situation analysis and start working on their plan for future internet progression. So much is happening, it’s such an exciting time to be involved with the web as it reaches out in new directions.
Yes, this is a wee bit of a nudge to see if Michael Hill Jeweller are interested in fulfilling one of my goals and working with Frontend. We have the same passion for our business, our success and our clients as Michael Hill Jeweller have for theirs.
Why should Michael Hill Jeweller (or anyone) check out Frontend?
I have had the luxury of working in UX strategy and design for clients such as Vodafone, State Insurance and NZI and I love being able to vicariously take part in as many different industries as we have clients. I’m keen to take on new challenges; I have the experience and the expertise and I’d be excited to explore the potentials with any new client.
Our methodology has been tried, tested and refined into a smooth process throughout our ten year existence. We’re not a one size fits all outfit, we design and customize each and every solution to our very individual clients’ needs.
Frontend have a proven user-centred design process that meets objectives and delivers results.
Frontend are a team of talented people, specialist experts in the web space, and can work as the web partners to help any business drive and maximize their online success.
20 Apr 2011 - Simon Dickey
This delicious new website is brought to you by Frontend Design
We are extremely pleased to have our exciting new design online. Please come on in, take a look around, and drop us a line on the contact page.
Comments