TALES OF THE MODERN
MATT BEE, TODAY I SHOULD
So here it is - a rough and ready ramble from a developer - you know - us with the “can’t do” attitude - well hopefully I’ll show that some of us have a real “can do”
attitude - it might be behind the scenes in code or it might be passion about working with designers to get the best results - developers often care as much as you do
about getting the best from everything we do.
STATE OF THE WEB
WHAT THE HELL IS GOING ON?
Let’s start with a round up of what is going on with the internet.
Web technology is taking over, it’s everywhere - even our watches are super powerful internet connected devices, apps control our heating through the internet and our
fridge can tell us the latest news.
STATE OF THE WEB
WEB TECHNOLOGIES ARE TAKING OVER
▸ The “Internet of Things” is growing
▸ Control your heating from the bus
▸ Fly a drone using your iPhone
▸ Term “IoT” was coined in 1989 - ﬁrst device was created as
a result of a bet!
Even though its become part of an iPhone/Andriod app world, web technology still handles a lot of the data transfer for modern apps.
Using the web, you can check for train delays. Get a cab using Uber.
The IoT term was coined when John Romkey was bet at a conference that he couldn’t connect a toaster to the internet - and he duly did for the following year!
More Useful Uses include: a system available to let diabetes patients monitor their blood sugar levels from home and doctors analyse the data regularly and accurately.
As ﬁtbit does for your ﬁtness, clever applications can improve people’s lives.
THE INTERNET IS
The main use of the internet is still the creation or consumption of information.
Google is still the most visited website, along with Facebook, shopping sites (Amazon/eBay) and the BBC.
Rightmove is the 20th top site in the UK!
According to Alexa - http://www.alexa.com/topsites/countries/GB
Of course much of the content on the regularly consumed internet content has been available for a long time before the internet…
Funny that the full Ceefax magazine boast of 100 pages is nothing compared to the hundreds of thousands of pages on the bbc.co.uk website today.
But as the web is now global, let’s look at who uses the internet and how
STATE OF THE WEB
WHO USES THE WEB
▸ Asia largest consumer of
▸ And only 39% penetration
▸ Compared to 87% of USA
▸ Only 704 million users in
The internet is huge, almost immeasurable - but users can be measured.
Although work we produce may only be touching a speciﬁc demographic, we need to realise that everything we do can reach users all over the world, and useful
technologies do reach users worldwide.
More than double the users that exist in Europe are already users in Asia.
STATE OF THE WEB
The game may be an iOS device, but the internet has made this spread of content possible. If someone had had to go out to a shop to load the game onto their device, I
doubt that many cats would have had chance to play this brilliant game!
But back to humans. I saw this video through sharing on Twitter. So what about the social networks - who uses those?
STILL HAS VITAL
This photo did the rounds as a criticism of refugees - but why, they have technology, would we make them shun it to ﬁt our stereotype of someone ﬂeeing persecution?
There are 87 smartphones for every 100 people in Syria. They are used for vital communication.
In many countries, smartphones and the internet are the only way to avoid state surveillance, citizens post warnings to each other, it’s the only way to only access to
independent media, reporting truth to the rest of the world. I even heard of families crowd funding their escape train and air fares!
Facebook are teaming up with the UN to provide internet access in refugee camps:
STATE OF THE WEB
Staying with migrants for a second - the New York Times ran this story in August.
Naive criticised the need for a mobile, but when you are ﬂeeing war but also trying to keep up with what is happening and in touch with family still in Syria (your
homeland) why should we deny them that.
If you were escaping escaping horrors we can not dream of, to whom is a smartphone and the internet more important - me to check Facebook or a refugee whose world
has been torn apart?
STATE OF THE WEB
▸ Facebook turned on Safety Check for
the ﬁrst time for a non-natural disaster
▸ The hashtag #PorteOuverte (open door)
was used to help people ﬁnd shelter
▸ A simple show of solidarity in Facebook
▸ AirBNB allow free bookings by people
who can offer shelter
▸ Telephone companies offer free internet
calls to France
To get back to the internet and how it can do good, it reacted pretty well to the Paris attacks.
STATE OF THE WEB
THE FUTURE OF THE INTERNET
▸ The internet is seen as a vital progression for the world to connect and
learn from each other
▸ The internet can change people’s lives by providing information and
technological advances to countries that need it most
▸ NetHope.org aims to use deliver technology where it can make a real
▸ internet.org aims to connect the world to the internet (by Facebook)
▸ I just want my wireless printer to work
Hopefully the internet will continue to ﬂourish, with new innovations enhancing our lives all the time and massive improvements in entertainment, like Netﬂix
revolutionising TV - we need to remember that the internet is basically pretty cheap and could improve others live a whole lot more than it could ever improve ours.
THE INTERNET WAS DESIGNED FOR
INFORMATION EXCHANGE AND IT
SHOULD STAY THAT WAY FOR A
THE TAKE HOME
HOW MANY SCREEN SIZES ARE THERE?
It is truly unknown. Every week a new device is launched. The above graphic shows a light blue outline for every single Android device available (in 2012!)
To generate the above software company rans testing on devices using their networks and apps - and counted 3997 distinct devices. 3997. And that’s just mobile
MY JOB IS EASY
Matt Bee, 2015
Honestly. It is relatively easy. OK, maybe not “easy”.
But signiﬁcantly easier than a designer who has to think in percentanges, ratios and work out how to make a client understand what they will actually see in the ﬁnal
When it isn’t a well designed product, well, my job is anything but easy.
WHAT NEEDS CONSIDERING
▸ Content length
▸ Image Scaling
▸ Page Weight
▸ Network Speeds
Very generally there are lots of factors that need considering with responsive design.
It isn’t just designing for diﬀerent screen sizes but diﬀerent environments, diﬀerent use cases, diﬀerent users.
▸ Long text will wrap - designers know this,
▸ Design needs to incorporate that
▸ Content strategy should leave you with well
crafted content that’s easy to digest on ANY
▸ It is a different experience on mobile, but the
experience should be different, not the copy
Designs often forget scaling - sliders often need full reworking and more thought on mobile
This is from a design I worked on recently - the designer had created a lovely design for desktop, however left things to scale on mobile, but without realising that the
date couldn’t scale down, it had to wrap, but no alternative work went into it and the fuzzy image was an issue - so we just lost the design element on mobile due to
This shows that it can work both ways too - designer has left plenty of space but the developer has built a design to the letter, not allowing space for any diﬀerent
content other that “OFFERS” or “SALE”
Image scaling should be artworked. At no point should any developer just be left to “make it single column and scale it all down”. We have so much power, especially
on mobile that we can artwork images for diﬀerent screen sizes, we really should put in some eﬀort!
How about an example - why hide the beautiful imagery on mobile - just focus on elements of the image that convey a message. - Now I can see that that is the Brooklyn
This is mobile coverage in the South West tip of England. It’s pretty good, right?
Wrong. The coverage is good but we’re making our websites inaccessible by making them large downloads for the most basic information.
This is 4G coverage - the population may be sparse, but then this is where people need mobile sites to work better, in the middle of nowhere.
Yes in London 4G coverage is excellent, but the whole idea of the internet is open access, accessibility and freedom to exchange information. If all our sites rely on fast
broadband and 4G connections, we’re failing users. When 4G packages are more expensive and the bigger the website, the faster people’s data is used up, the more
they will hate us, and using the internet becomes a bad experience.
WE DON’T GET TO CHOOSE
HOW MANY TIMES THINGS
A web page open and left to sleep will reload in many mobile browsers - poorly managed websites will completely download again, eating into people’s data allowance
without them choosing to engage, or sometimes even realising.
DOES PAGE SPEED MATTER IF THE CONTENT IS PROVIDED?
▸ SPOT QUIZ!!
▸ Divide into 2 teams, and just get the information from the
Phones 4U comparison of 4G and 3G speeds - and many can’t get fast speeds. At big events speed is massively reduced, it’s not just normal usage conditions that
should be considered.
But making improvements for phones and fast downloads, means improvements on desktop - Google rank faster sites better than equally ranked sites on content
(among other factors).
▸ Mozilla - 60 million more
▸ Amazon - estimate 1 second
increase would cost 1.6 billion per
▸ Walmart - 1 second improvement
upped conversion by 2%
▸ Google rankings - a big percentage
of their algorithm accounts for
speed (in relative terms)
Mozilla increased ﬁrefox downloads by 15.4% - 60 million downloads per year. Previously the whole chrome site downloaded before their header ﬁnished
HOW IT WORKS
So we’ve already mentioned smartphones as a regular way to connect to the internet. And we now expect websites to be as easy to use on mobile as they are on our
That’s usability - how well something is designed for easy use or rapid learning.
An example of usability is the iPhone - it’s popularity is partly down to how easy everyone picked it up. In theory it’s a bad design for a phone - there’s no instant “make
call” button, you have to deep dive to get it!
USABILITY IN THE WEB
▸ Simple design is best
▸ Don’t make me think approach
▸ Follow convention
▸ It’s not just an internet thing
I won’t bore you with a lecture on usability - but I will run through some examples on usability in the web - and where we are going right, or maybe going wrong.
Simple design is often best. For example e-commerce sites have a pattern, so we can guess what users will expect. - So let’s wireframe a e-commerce home page.
I can have worked out what button I need before I even get halfway down searching for a button on the Sky remote.
Sometimes more work feels easier if we are guided along a clear path. It’s like a cycle of patience we have. once we make a decision our patience/frustration levels are
reset (to a degree!)
USABILITY ON THE WEB
▸ Not always good
▸ For example - what is this?
▸ OK, but what if this worked better?
Hamburger is a good example - using the word menu increased click on a test by 20%.
Why would that be? Theory might be that the user doesn’t need to think and when looking for things, anything subconsciously non-obvious is ignored and users move
KEY IS TESTING
▸ Listen to users
▸ Not designers, developers, account managers
or ANYONE else
▸ Just listen to your users
▸ Only then will the user experience be right.
There is only one person that knows how your product should work. Any they won’t tell you!
Partly because they don’t know themselves. They key is working with people’s previous learning, intuition and environments to work out the best way to use a product.
ASPECTS OF USER EXPERIENCE
Although saying that, there is a theory that usability is only part of the user experience, and I agree.
If something is valuable to a user it’s worth investing in the learning of the ‘whatever’ and if you are introducing anything knew, it should fall into one of these categories.
iPhone for an example. And consider how this relates to the apple TV remote!
THE ONLY PERSON THAT
KNOWS BETTER THAN YOUR
USERS ARE YOUR NON-USERS
It’s something I like to try and think about in build - build for people that I don’t think will know the product at all, and think like they would. “What is this” Where do I
start? etc etc
Then try it on someone you know.
TESTING IS EASY
▸ The key is watching users
▸ Usability testing is cheap
▸ You’ll learn more than you
▸ It will ALWAYS surprise
▸ You’ll improve your
A SIMPLE TEST
▸ You work with the agency
▸ You need to email the web
designer, but have forgotten
▸ Find out what the name of the web
A simple test - your website should be so easy to use a drunk person can do it.
In fact - that service exists: http://theuserisdrunk.com/
Or consider that there is lovely old lady out there who is just like my mum. Oh, the same guy has set that up too: http://theuserismymom.com/
Testing on anyone is valid and useful - the more the better in my opinion
WHAT IS A DISABILITY?
▸ Your go!
What are disabilities - please name some.
Blindness - yes, but disability does not just mean lack of sight - but 2 million people live registered as partially sighted or blind - by 2050 the RNIB estimate that 4 million
people will live with registered visual impairment.
DISABILITY IS NOT JUST A HEALTH PROBLEM. IT
IS A COMPLEX PHENOMENON, REFLECTING THE
INTERACTION BETWEEN FEATURES OF A
PERSON’S BODY AND FEATURES OF THE
SOCIETY IN WHICH HE OR SHE LIVES
World Health Organisation
Volunteer to hold the baby, now without dropping the wriggling baby (that’s one hand out of action). Now go to Google Maps and zoom out.
Diﬃcult, isn’t it?
What you could do is double tap, hold down the second tap and move your ﬁnger up and down! Google take time to invest in this accessibility feature and it’s things that
we should all consider and try to implement - it will help users.
IOS ACCESSIBILITY FEATURES
▸ Invert Colours/Greyscale
▸ Switch control
The phone is popular with disabled users because of these features. Switch control is one to note because too often we hijack this interaction, and either remove
functionality from our websites or change what a user expects to happen (Sliders! Carousels!). That’s unacceptable. It’s like me coming in and changing your doors to
open inwards, when they opened outwards yesterday - you will not think about which way they work - just do it.
WHO USES THESE FEATURES
Diﬃculty is that we can’t see stats, due to worries about privacy screen reader and accessibility tools usage are not reported - so we have to accept there are users out
there and should accommodate as much as possible.
▸ We deteriorate with age - more users needing help are coming
We are humans, and our bodies are not like a ﬁne wine - they deteriorate with age. There isn’t any getting away from it, and as more young people grow old, they will still
expect to be able to use the technology they’ve always used.
More “disabled” users are coming.
YOUR WEBSITE FAILS USERS
OK, so sorry about that - but it might matter to some users - and it might not be ideal for those not even registered as disabled - people don’t like wearing glasses - they
might have forgotten them, it’s a whole host of reasons to do the best we can.
But then it can be a lot worse than missing out on a testimonial…
ANIMATION IS COOL
▸ But is it needed?
▸ We have a responsibility to manage
design for vulnerable users
So we know animation is cool. But is it cool for everyone?
How about if we trigger people disabilities? Is that cool?
WHAT IF I HAD EPILEPSY?
This is a site from Bloomberg.
Some have said it is beautiful… but it could cause an epileptic seizure (according to guidelines from epilepsy.org.uk), it massively contravenes the advice from the W3C
and Epilepsy Action organisation.
NHS estimate there are half a million epilepsy suﬀers in the UK. There are good designs that don’t contravene epilepsy advice - so that advice should be followed.
WHAT SHOULD WE DO
▸ We should not auto play things
▸ Things shouldn’t ﬂash more that 3 times in any 1 second
▸ Suppress ﬂashing before any happens
▸ Option to disable ﬂashing content
▸ If the user is unable to control the ﬂickering, blinking and
moving (this includes stopping these effects from starting),
then these effects should not be used (sorry Razorﬁsh…)
The previous site virtually violates all of these rules.
WHY BOTHER, IF IT’S NOT TARGET AUDIENCE?
▸ Disability discrimination legislation
▸ In some countries, such as the UK, it is illegal to
discriminate against people with long-term health
▸ If your website, video or other piece of online content
breaks the W3C good practice guide (above), then you
should consider if there is a valid reason for it to do so. If it
is needed, change it.
THERE ARE MORE DISABLED USERS
THAN EVER, BECAUSE TECHNOLOGY
ACCEPTS THEM, AS DESIGNERS WE
NEED TO AS WELL
▸ Content is key
▸ Responsive design is a complete approach to device and environment
▸ Listen to your users (before, during and after!)
▸ Accessibility is a responsibility we have - that comes with huge other gains
EVEN THE BEST DESIGNERS PRODUCE
SUCCESSFUL PRODUCTS ONLY IF THEIR
DESIGNS SOLVE THE RIGHT PROBLEMS. A
WONDERFUL INTERFACE TO THE WRONG
FEATURES WILL FAIL.
Key is uncovering the problems, using research.