“With 18% of people in the UK accessing the internet using a game console, it’s time to look beyond desktop, mobile and tablet browsers.”
I was positively surprised to see a Mario Bros introductory slide, when Anna Debenham started her talk at the Web is conference a few weeks back in Cardiff. It wasn't something I expected to see, although - as it later proved - gaming consoles are relevant to web development and we can learn a lot from looking at how they render websites.
Anna talked mainly about limitations of console web browsers and limited input and how they impact web browsing in general. We are used to creating websites for touch, mouse and keyboard inputs. Actually, there are more types of input than we realise, for example voice, gesture or using two screens. We also need to consider very small and very large screens.
With these in mind, we can design and develop more usable websites, not only for consoles, but for many other devices. As Anna said, by making something better for one device, you might end up improving the experience for many more.
“The lines are blurring between what is mobile, tablet and desktop these days” (Cameron Moll). There are device silos (mobile, tablet, desktop), as Anna pointed out. These silos are just wrong in my opinion… We cannot design a website targeted for (i.e. iPhone) users with media queries crafted for specific devices… As soon as a newer device comes out, these might just no longer be the best media queries for that website or device. Also, content might not look its best when we don’t take it into account when selecting our media queries… But I am going off topic now…
“What is mobile? Can we define it by the devices people use or where they use them?” Luke Wroblewski. I could not agree more. To me, “mobile” in modern web development means a device that is used on the go, not just a phone. There is this misconception and at first I also found it confusing - many people are used to the term mobile describing a mobile phone. They may not be aware that they also have a “mobile tablet” and a “mobile handheld console”.
no design for screen size = no device independence
I didn’t even write notes about this, as I think it is just self-explanatory… You cannot have device independence, if you do not take into account various screen sizes. When your site is not usable on a mobile phone, for instance, you would be breaking device independence… In Anna’s words… “Don’t dismiss devices just because you don’t use them”
Performance is a user requirement
Jason Grigsby - “We can’t predict future behaviour from a current experience that sucks”. Also, when making choices, we need to consider many things, for example is our beautiful banner image going to use up a lot of the user’s bandwidth? What do you sacrifice instead?
It is not just about the size of the websites. A lot of consoles have very limited support for things we take for granted, for example CSS. On some consoles it would mean broken layouts, while others will not render the sites at all. Other devices have very limited or difficult to use input like on-screen QWERTY keyboard. Some handheld devices allow users to extend it onto a TV screen, shifting the experience from a relatively small into a much larger screen.
Finally, some random guidelines for web design/development:
Design to standards, not to browsers
Test for capabilities, not UA strings, [when detecting browser/device/whatever], many devices have wrong or misleading UA strings.
Progressive enhancement - detect features not limitations
Test on real devices - not simulators - as simulators aren't often reflecting the real device’s behaviour. Anna’s Game console browsers site for some web based tests and you can compare the results with your own real devices.
If this post was of interest to you, you may want to visit Future Friendly website to read a bit more about building websites in a more future friendly way. You can also watch John Grigsby’s - The Immobile Web on Vimeo.
Adam and Kamila went to Cardiff, and all they got was a lousy T-Shirt - Plus a few blogs about some of the talks they saw, including this one.
Stat attack! Only 12% of the top 100 retail sites (US) render is less than 3 seconds. Year on year, the average (Median) page load of these sites has slowed down by 23%. This is staggering.
Andy Davies had arrived to share his talk at The Web Is, Day 2. Entitled “The Web Is Too Slow… But We Can Fix That”.
His talk was primarily made to teach us that we need to be deliberate about performance - And he also shared some processes which can help make your websites faster.
Speed, he says, is the second most important thing to users (After clear content/layout). There are almost definitely massive gains for your company to be made in this area - Just look at Staples, who shaved 1 second off the median page load, and gained a 10% increase(!) on conversions. Website performance is big business, whether you’ve noticed yet or not.
Interestingly, when Youtube invested in improving their site speed, their average page load time went up, rather than down. The reason for this is really interesting - They were now reaching people they had never reached before. Suddenly, Youtube was viable in rural areas where it had previously been too slow to even use. To them (And hopefully, to you) this is obviously a big deal - A whole new audience!
But the speed of your site isn’t an exact science, and you also cannot definitively say that faster = better - It’s more that your site speed needs to match up with user expectations. While the vast majority of these expecations are for the page to load very rapidly, Andy told us about how Kayak deliberately slow down their comparison price search because people got suspicious when it ran at full speed. The expectation isn’t always for the fastest page imaginable, but really for the page to load in a speed which the user deems ‘satisfactory’ or 'worthwhile’.
The key takeaway here really is that no matter what you do with your performance, you really need to think about this stuff during the project rather than it being an afterthought - It’s too important to do anything else. I’ve never thought of it like this before but when Andy said it, it made so much sense to me: Performance should be considered as a design constraint, from the start, in the design phase, not something you deal with at the end of a project.
We should all be setting ourselves per-project targets: X event should happen in Y seconds when under Z network conditions. This target is the yard stick by which you determine whether you’re meeting your goals. With tools like PerfBar and Grunt PerfBudget you can even build these requirements into your workflow, and this is something we’ll be considering at Etch in our next review.
Chrome tracing is an obvious help to the hunt for bad performance, but there are other things you can do on top of this - Simulate bad connections during your testing. Use WebPageTest to run tests and compare your competitors, or use SpeedCurve, or one of the numerous other services - The important part is that you track and monitor it at all times.
Having drilled this message into our brains, Andy shed some light on how internet performance can be attained - He aptly described Critical Path (the process by which your browser turns markup and JS and CSS into something you can actually see), and explained that contrary to popular belief, the internet is not like a pipe.
The internet is more like a bucket line, with people passing buckets of water. The round trip time for water to pass along (known as latency) matters more than the mbps someone has.
Andy also shared an interesting cheat I liked a lot - Did you know Instagram visually shows that you have ‘liked’ an image immediately, even before it has actually done all the AJAX posting to actually ‘like’ it? I didn’t, but it’s a piece of simple genius. The slowness of having to wait for an action is negated by cleverly doing it when the user thinks it has already been done.
Nearing the end of his talk, Andy criticised font foundries which value their licensing over user experience, and encouraged us not to use them. These foundries use aggressive cache techniques which result in worse performance for your user, so according to Andy should always be shunned in favour of more user friendly alternatives - Not sure I’ll get that one past management, but interesting all the same!
I’m not much of a server admin so the most interesting part of this for me was the CSS rules - A way to designate in CSS how important your font is and a timeout before the CSS tries something else.
All in all this talk was an interesting insight into web performance - One which will have us reviewing our internal practices and workflows to try and improve our own load times.
Last week, I got to go to sunny(!?) Cardiff for The Web Is - A celebration of the web’s 25th birthday.
What I wanted to do was to write a big blog post about the whole event - A run down of the key takeaways from each of the talks. However, when I started condensing my notes down, it became abundantly clear that some of the talks were too darn interesting to shrink down to a synopsis. So, I decided to highlight some of them specifically in their own blog posts.
One such talk was Scott Jenson’s talk, entitled “The Web Is Like Water”.
“You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend.”
- Bruce Lee
Scott’s talk was about The Physical Web, and he made a strong case for it. His argument is based on the idea that the Web, he says, is like water - It flows into any cup (device) and fills it.
So far so good, right? He began by telling us about the dangers of standardising things on the web too early - For example, will we really want ‘pull to refresh’ to be a standard forever? Or will something better come along?
To illustrate his point, he gave us some information about the history of the Steering Wheel. Yes, the steering wheel.
It’s worth covering a bit because I thought the underlying truth he was getting at was interesting - When cars first came along they had tillers (Like a boat) instead of the wheel which we now use today. To us, this seems stupid. But they didn’t use tillers because they didn’t have steering wheels - They actually had invented (And hated!) them. It was because the technology wasn’t there yet to make steering wheels viable - Specifically the ability to separate the steering wheel’s movement from the direct alignment of the car wheels (Say, when you hit a pothole - This is called irreversible steering).
In many ways, our industry still has these 'tillers’ - Things which in the future will seem insane, but work better for us right now. And them being the standard isn’t necessarily the right thing, because a steering wheel-esque solution may be just around the corner, if we can develop the right technology to support it.
The Web Standards Elitists of the world would have us decide everything now and it be settled, all of us subscribing to the agreed formula for all future time, when in reality it only takes one game changer to make us need to re-think what we should be doing. They would be quite happy using a tiller to drive their cars forever, because it was agreed upon before steering wheels became viable. Take the iPhone as another example - It changed our idea of what web standards should be, and now we have new ones emerging. The idea of hundreds of smart devices living in our world around us is another potential game changer, and the standards we’ve got used to may not necessarily apply again.
From that he moved on to telling us about The Physical Web specifically, which is a fascinating idea about how smart devices should work in the future. Web agency clients often have what Scott calls 'App Myopia’, the desire for an app which is unnecessary, and so far the world of BLE Smart Devices has the same problem. Your smart thermostat has an app, every smart vending machine has it’s own app, smart parking meters empty your wallet with unique custom apps, your local smart bus stop has one too.
The future of interacting with smart devices cannot be app based, because we would have too many apps (Most of them would also be terrible) - Apps for smart devices are a linear solution to an exponential problem because the number of smart devices we have personally is going to explode but the amount of apps we want to have on our phone isn’t.
Instead, we need to develop an open, web-based standard, where smart devices broadcast URLs and the user can interact with them if they’re nearby without any additional apps. This would presumably be built into the operating system, a web browser, or there would be a few apps to choose from to cover this entire purpose (Much like a 'browser’ app covers the web today)
Scott told us about the three levels of the physical web:
Coordination - The Jetsons-style holy grail where all your devices talk to each other in a 'cascade of awesomeness’
Control - You get to control your stuff using the internet. Neat.
Discovery - You get information and context from the devices around you. The simplest of the three.
This physical web needs a sort of 'proximity-based’ DNS for discovery and ranking, which can lead to those interactions.
So what can the Physical Web actually do? How would it work in our everyday lives? When people talk about iBeacons they tend to talk about coupons in a shopping center, but there’s so much more it could do.
The simplest implementation of the physical web is what Scott calls the bus stop model - A user stands at a bus stop, which is broadcasting a URL. The user visits the URL to fetch some information about bus times. Coupons for nearby shops would work in a similar way.
The second (more exciting) implementation is the vending machine model - A user stands near a vending machine, which broadcasts a URL. The user visits the URL to choose some food. So far this is an identical process, but then the website server contacts the vending machine to say “Hey, this guy wants a Mars Bar. Drop it!”.
The third (and sadly kind of impossible - For now!) implementation is that the user connects directly with the smart devices around them using JS-based APIs which do not yet exist, removing the need for the external web service (or The Cloud) powering things from above.
My mind boggles at the possibilities, and with the rise of wearable tech even people walking down the street could be broadcasting themselves (or, the bits of themselves they’re comfortable with) over the Physical Web to people they meet. It’s a lot cooler than a business card, though it has obvious privacy issues to overcome.
All of this stuff, exciting as it is (He gave us a free physical web beacon thing! Eeeh!) it’s going to take a long time to get there. Privacy concerns are one massive issue, and there will undoubtedly be others to overcome.
Scott doesn’t see this as an insurmountable problem, and crucially, doesn’t see this as a Google project - It’s for everyone. He argues that there are two types of idea: Truck ideas, and road ideas. The road ideas are infrastructure whereas the trucks are more immediate ideas based on existing infrastructure - Roads take a long time to make, but trucks need them to run on!
In many ways the Physical Web is the long term idea. The idea that a rising tide floats all boats is true here, because this is one idea on which many other ideas will one day exist, from a variety of benefiting companies - But we will have to work on it to get there. So let’s all start digging and laying down tarmac - The road to the future is ready to begin construction.
On the 30th and 31st of October, Etch’s front end team (Myself and Kamila) headed over to Cardiff for The Web Is - A conference celebrating 25 years of the world wide web. Two hectic days later we’re exhausted, but we did all that tiring conference malarky so that you don’t have to, because now you can just read this! Here are our favourite takeaways* from our time in Wales.
*Does not include late night burrito, which was the best takeaway.
The Web Is Knowledge
Adam:
Chris Murphy gave us an insight into his role as an educator at a university, and one of the things I really liked that he spoke about was this idea of how developing people (In this case, your staff or the workforce of the future) you had to take an agricultural approach instead of a mechanical one - Your dev team isn’t a factory line waiting to be upgraded with new parts or hitting with a hammer, they are a group of organic living things which grow if you nurture them. He also said giving people confidence is a key part of this process which I think really resonates with a lot of people in our industry, given how most of us tend to feel imposter syndrome at some point in our careers!
Kamila:
Chris also talked about how - by working together - we are greater. He called this the lollapalooza effect, that collaborating people should come up with better ideas than just one person. To sum it up, he gave us the following equation: 1 + 1 = 3.
He also mentioned Sir Ken Robinson, who said that “we all have this capacity [to learn]”. Confidence is very important, we need to believe that we can do something, that it is possible. The confidence is to believe that something can be achieved.
The Web Is Constant
Adam:
What Nathan Ford’s talk should have been called is “The Web Is constant-ly changing”. He told us about his process for accommodating the ever-changing nature of the web with a variety of useful ideas. One thing I really liked was about bringing the client into your team, and learning empathy in both directions - Criticising their ideas (and even their behaviour!) when necessary but being open throughout, and understanding they they will be critiquing you as well!
Another Nathan said which I thought was great was: “Never measure a website by whether it is ‘done’. Measure it by 'is it better?’” - We should all be trying to improve the web experience our client is paying us for, not just ticking the boxes to 'complete’ it. Basing your sprints on valuable user stories, workshopped with your client, can help towards this cause.
At face value, Anna Debenham’s talk was about game console browsers. But if that’s all you took from it then you missed the fundamental point - That the Web is everywhere, on an ever increasing number of devices. You need to be thinking about these devices now, and designing resilient, performance-focused websites to accomodate the changing marketplace. Smart TV’s and console browsers are things people actually do use, by the way! She shared some of the difficulties these devices had - Highlighting some very strange behaviour and design choices on the part of some of the console creators.
Well, Seb Lee Delisle has the coolest job ever. Nearly everything he showed us involved lasers, and I was blown away by some of his installation work. We really need to get some more lasers down at #hacksoton… Where was I? Oh yeah, one of the biggest takeaways from Seb’s talk was: Finish your projects! If you actually finish them that already puts you way ahead of most people. But remember there’s always someone better than you. Fun talk.
Kamila:
It was quite difficult to take notes during this talk as we were bombarded with lasers! As Adam already mentioned, Seb’s main point was to convince us to learn new stuff and finish your projects! He mentioned that the last 10% of a project takes 90% of the time… And that sometimes it’s just good to build stuff for fun. It seems to have worked for him! See Seb’s website at http://seb.ly/.
The Web Is In The Hands Of 97ers
Adam:
A 97er is someone born after 1997. Apparently they own the internet now, sorry guys! We’ve all got 'til the end of the month to move our stuff out. Emma from Rewired State shared her thoughts on these teens and how they will shape the web in the years to come.
Kamila:
I learned that the web is made of cats, selfies and food, which we all kind of know already… And that WiFi is considered the most basic human need by many people!
But seriously, I've learned that the 97ers grew up with the social media - they have different attitude towards identity and often their online community is what they value a lot. Their attitude towards learning might be slightly different, as they learn peer-to-peer and outside of their class rather than within the classroom.
The Web Is All Consuming
Adam:
So, the internet is kind of a big deal right? And the web consumes so much of everything that it can take control of our lives a bit. Kier told us some of his opinions on this, highlighting the need to keep lines between work and non-work, while still doing something you’re passionate about. To organise himself he makes a daily todo list with one big thing, three medium things and 'some’ small things to complete, rather than looking at his entire list and freaking out! One other thing he mentioned was the idea of not being afraid to take a break - We all have a bit of a fear of missing out, which you need to overcome to truly step away. I take it this means Etch should send me to Hawaii to chill with no internet for a while?
Kamila:
I could really use this type of a todo list! I can only agree that oftentimes we have too many plates spinning. Kier’s advice was that we just need one area of focus and only work on that one best idea we have (instead of trying to get it all done)… So, in order reduce the “noise” from the all-consuming web monster, we can switch off notifications, subscriptions or unfollow people and things. Or embrace the JOMO, the Joy Of Missing Out.
The Web Is Made Of Links
Adam:
Yes, it is! Phil Hawksworth waxed lyrical about his love of the link or URL. Did you know that the HTTP:// that proceeds every web URL kind of looks like a 'double meh’ emoticon at the end? Now you do! Some interesting stuff I want to look into more like rel=“prefetch” and the 'Origin Chip’ setting (Currently only in Chrome Canary). One interesting tidbit from this: Google trialed 41 shades of blue to determine which blue they should be using on their links for higher click rates. That’s how they came up with the blue they use today. Neat.
Kamila:
Phil also touched on another issue, which I found interesting. Is hiding the URL from the browser a good or a bad thing? Apparently Chrome Canary does that and I am not convinced it is a good thing, just as much as he wasn’t convinced. Glad it’s only in Canary!
The Web Is A Discussion
Adam:
Mental Health is an important issue which should be discussed. Andy decided to record a live podcast about it with the help of some special guests to chat about the pressures and mental health issues prevalent in our web developery culture.
Kamila:
As it was the Geek Mental Help Week, there was a live discussion about mental health in the industry. http://geekmentalhelp.com/.
Scott Jenson talked about the Physical Web and gave us all away small beacons to play with. They basically work by transmitting a URL that can be accessed on a mobile device without the need to download and install an app (you only need one app in order to use it, but it’s still better than having tens of apps).
The Web Is Still Young
Adam:
Benjamin is 16 years old, and he was talking at a pretty big conference, so well done him! He told us about the challenges of ageism in the industry and about how to get young talent into your team effectively.
Kamila:
A great talk by a young man, who started coding as a kid and he already works within the industry. His main points were to put more trust in young developers, as it’s likely they’re just as capable as older developers, to have more mentoring available i.e. through educational schemes or providing free tickets to conferences to those under 18.
The Web Is Turning Difficulties Into Opportunities
Adam:
Robin Christopherson was very inspiring. He’s visually impaired and he told us about how technology had the power to change the lives of people like him for the better. I still need to research this stuff more because it was fascinating, but he told us all about talking goggles (They identify things and say them out loud!), the usefulness of light sensor data, captioning conversations with google glass, emotion recognition in camera apps, facial recognition to spot friends - Or foes, for that matter, navigation for google glass, moto hint, driverless cars and brain controlled robots. The rise of artificial intelligence is going to revolutionise disability interactions, and having seen Robin speak I can’t wait for the future to get here. After all, there are so many people who deserve a real shot at life, and that technology is able to help them get there.
Kamila:
It was a moving talk by a man who is very grateful that the web is for everyone to use. For this man (like so many others) life is normal, only because of the available technology and a number of apps made to improve people’s lives. Getting around the city is no longer a problem when you have a guide dog and an app which reads street names and numbers out loud as you pass them. It is no longer difficult to communicate, because there are apps which can be used to recognise other people’s facial expressions and tell you whether they are happy, sad, surprised etc.
There even is an app that to recognise written text using your phone’s camera and read it out loud. It would translate text from a foreign language into English. Now, a lot of people could make use of this app, not just the visually impaired. Just think about it. Aren’t we all impaired in one way or another compared to other people? Simple translation tool proves that yes, we are. When on holiday in a foreign country we are often “speechless” and “deaf” to what other people say to us, because of the language barrier. Technology enables us to bridge this gap and enables us all to communicate, and in general, to remove the “impairments” every single one of us might have.
Robin demonstrated that he could use his phone and laptop quite well, despite the fact that he could only hear (not see!) what he was doing. At the same time, it also proved that the technology is not yet at the level it should be to fully support visually impaired people. It is a lot easier to get lost and it can take a bit to get back on track, although it was still quite impressive. We just need to remember about catering for screen readers and other assistive technologies when crafting our web experiences.
The Web Is Too Slow, But We Can Fix That
Adam:
Andy had a lot to say, so I wrote up a whole blog post about it - You can read that here.
The Web Is Our Responsibility
Adam:
I liked one idea from Sally’s talk in particular - That Responsive Web Design isn’t just about screen size, it’s about web experiences which respond to all sorts of things. She mentioned the forthcoming (and intriguing) light-detector based media queries for changing your design based on the light where the user is reading it, as well as media queries to tell us about the presence of scripting, hover, the accuracy and presence of pointing devices. All of that is stuff we can kind of do right now in a custom JavaScript kind of way, but to see it adopted in CSS will be really interesting. I also want to find out more about the increasing ways we can make our websites available offline, because that will certainly be of interest on some projects!
Sally told one story which also resonated with me, which wasn’t particularly web-based but that I thought was really heartwarming… About how the creativity we sometimes wield can improve any experience - She told us about how a company has sprung up which specialises in the re-design of MRI machines to make them more approachable and fun for children in hospital. The idea being that, if it’s painted and designed like a spaceship for example, the child will participate and get the scan they need without it having to be a traumatic, scary medical experience. I think that was a really great idea.
Kamila:
Sally Jenkinson talked about web experiences and how the web is evolving. She mentioned the evolving web standards, like the media queries support for pointing devices or ones that would query the ability to hover.
An example of how the hover media query could look like.
Her advice was to question everything… for example when working on a web project, ask yourself whether or not do you really need to use jQuery. Is it necessary for your project or can you achieve what you need with vanilla JS? Or maybe you don’t even need JS at all?
The Web Is Read/Write
Adam:
Delving into the nuances of the English language with the aplomb of a man who knew his stuff - Owen Gregory gave a lecture about language on the web.
The Web Is Taking Itself Far Too Seriously
Adam:
A man called Mr Bingo regaled us with interesting tales of his work (Including the hilarious Hate Mail) and performed for us a brilliant rap (Yes, hip hop at a Web conference) about the hilarious things you find when browsing stock photography. Funny stuff.
The Web Is Progress
Adam:
Wrapping up an interesting two days, Brad Frost shared his thoughts on what we’d seen so far and about the power of the web when we all do things openly and share.
