I find it funny that with each new technological step forward we seem to take when it comes building websites, we often find also ourselves constantly taking a few steps backwards every once in a while.
When I began developing websites there were only 2 web browsers to contend with, Internet Explorer and Netscape. Internet Explorer had only just started supporting things like Tables and Styling via CSS and Netscape had their own features that they were pushing such as “layers” which in hindsight was the precursor to how we build sites now.
The problem was though that it was almost impossible to create a single website that worked across both web browsers so as a result we were always creating 2 versions of our code, 1 version for IE and another for Netscape users.
Fast forward to the early 2000’s and Netscape was gone from the picture only to resurface as the Fire Fox browser which wasn’t so bad since they both started to play by the same rules so we eventually got to a point where we were able to create a single website that worked across most common browsers, give or take a few versions of Internet Explorer that seemed to take a step backwards a little.
Mobile was still in it’s infancy, so it wasn’t really taken seriously since only a few nerds were actually bothering to install the Opera browser onto their “smart?” phones. (I’ve still got all the classics in my drawer)
Sure there was talk of interactive TV and we dabbled in WAP but it was never mainstream so few took notice.
Then Apple released the iPhone & iPad and the entire game changed!
Now we find ourselves having to not only deal with the left overs of the browser wars but we have complete new platforms to contend with where the entire experience needs to be shrunk down to the size of a cassette tape or be able to be rotated sideways resulting in an endless array of display sizes. On top of that, computer monitor sizes are now the size of your plasma TV so we have screen resolutions of up to 3000px wide! Now where’s the fold?
So what actually does it mean to be responsive?
responsive (rɪˈspɒnsɪv)
adj
- reacting or replying quickly or favourably, as to a suggestion, initiative, etc
- (Physiology) (of an organism) reacting to a stimulus
reˈsponsively adv reˈsponsiveness n
Technically I think the above is closest to what being responsive is all about, to me it’s about being able to respond or react quickly to a user’s specific needs based on their device.
Not all responsive websites are the same
Just like in the old days when some developers chose to create separate pages for each browser whilst others were persistent in trying to make a single page work for all, there are actually 3 different approaches to building a responsive website and each method has it’s merits.
Here are the 3 different methods commonly used:
- Build separate sites for certain devices
- Use CSS stylesheets to change each page’s layout for certain devices
- Create unique templates for certain devices whilst keeping the backend functionality the same.
Pros and cons of the 3 methods
Below is a bit of an overview of the 3 main methods employed today to create a responsive experience.[divider line_type="No Line" custom_height="80"]
1. Build separate site for certain devices
An example of this would be sites like eBay and most classifieds websites such as Realestate.com.au and Domain.com.au. The assumption here is that the goals of the users are different for each device so rather than trying to squeeze a desktop website into a small screen which might not cater for the users actual needs, you create an experience completely tailored to the needs of the user using the device.
With this method you might for example not cater for registrations that might be quite complex and time consuming and instead you could apply an email reminder that lets the user complete the first step in registering and then they are sent an email allowing them to complete the tasks on their desktop or laptop computer.[divider line_type="No Line" custom_height="40"][vc_row_inner text_align="left"][vc_column_inner column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" width="1/2"]
Pros
- Allows you to target the specific needs of users with each device resulting on a user experience that is matched to their needs.
Cons
- Costly to develop, essentially you are creating separate websites for each device so you have 2 or 3 times the workload and then maintenance.
2. Use CSS style sheets to change each page's layout for certain devices
Probably the most common approach and often one used to make an existing website mobile friendly. Using CSS you are able to show and hide certain elements and re-render them to suit different screen sizes.
Pros
- Quick and cost effective method of making a website responsive.
Cons
- For mobile & tablet users they still are often still forced to download the same content that is displayed on the desktop version but then elements are hidden and/or resized. This can result in a heavy download for a mobile user, which might counter balance the experience.
- This doesn’t really take into account the fact that your users or donors might have different goals in mind using the device they are on, so it can often be a half-baked approach. Though it is possible to provide separate menus for different devices which at least is a step in the right direction.
3. Create separate templates for certain devices whilst keeping the functionality the same
This technique I use a lot and with the modern frameworks it has become really easy and cost affective to do. Depending on how your website is developed, this technique lets you create unique experiences for each device yet still allows you to maintain the sites core functionality without having to replicate everything twice or three times or more.
Pros
- Can be almost as cost effective as the CSS method when built from scratch
- Allows you to maintain a single core codebase.
Cons
- Can only be deployed easily with certain platforms and frameworks so it’s not the kind of thing you can easily plugin to your existing website though systems like Drupal do have modules available for this technique.
- There is still a slight increase in maintenance with each lot of templates, so if you need to make functional changes to desktop then you often also have to carry the same changes across to the mobile or tablet templates.
My tips
Here are my tips on how to build a responsive fundraising site.
1. The first step is to define & prioritise your user's tasks and goals based on their device
Not all users have the same task or goal in mind and this really can change depending on the device they are using to view your site on. Donors that are viewing your site on a mobile device would be typically trying to find different information to that of a desktop user, such as your contact information, how to make a donation or sponsor someone if it’s a fundraising event
So first off, decide if there needs to be a different journey for mobile users or if you think the journey can be the same, just the content needs to adapt.
2. Plan your content
When planning your content be aware of what is going to happen to it when it is resized or re-positioned on other devices. Generally, when content is re-formatted for smaller devices you will find that content that usually sits on the right side of a larger screen, will get shifted down below the content that sits on the left of the screen. So positioning call to actions on the right hand side might mean that on a smaller device they get pushed down the page.
Additionally if you have lots of content that has copy to the right and an image to the left, be aware that in many cases it might be displayed with the image first and then the copy beneath the image, which depending on what your content is, it might not be as clear as it was on a larger screen for many of your users.
So this...
Could becomes this...
