“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.
Last week Adam and I went to the web is… conference in Cardiff. I would like to share my notes from Nathan Ford who was one of the many speakers.
We are constantly online, the web is constantly changing. We are surrounded by constant changes. In his talk, Nathan Ford tried to answer his own question: “How to design for constant change …and not go mad”.
Nathan compared the web to a monster [more precisely - a cookie monster]… So, this is a summary of what works for Nathan Ford [and his team?].
There are three structures:
Team (the resources) - we need to work together. Collaboration is vital.
Project (how to run a project, embrace changes)
Design (at first - it’s all dark - it is quite hard to define what the design should be)
Teams. Quite often teams look like the following:
Make the client the rest of the team. Make the client involved. You can find the “champion” at the client’s side - it would often be the person you are in touch with… If not, it would be the person in charge of the project, someone who knows a lot about it.
Involve stakeholders - this way they are aware of what is happening throughout the whole life of the project. This means that they will no longer come to see the project in 6 months and want to change everything… you’re protected from blame and the client is happy.
No surprises. No blame…
Embedded teams, shown in the image below mean that the client is closer, they are involved at all the stages (especially the “champion”).
Project management for constant change
There are these wicked problems - problems that are almost impossible to solve/fix. Treat projects like wicked problems.
Not done, better (never finished) [not sure what that meant?]
If unsure - try everything, try out a lot to see what works
If something doesn’t work, don’t force it (reject it), but try to explore an alternative (move on)
If it does, explore it further
It is OK to fail, but one must learn as a result. Failure is not the objective, it’s not good, but when it happens, learn from it and move on.
Do the projects the agile way not Agile [“agile” is not scary while “Agile” is].
Work in sprints… Start with sprint 0 - that’s where you bring the client in, involve them from the beginning, gather all the required information, etc. You then keep the client involved at all the stages of the project.
Also a good point was made - doing agile doesn’t mean you cannot adapt it to suit your company’s needs. I agree that we should do what works for us and not follow some rules to the letter.
Embedded teams mean that communication is easy - ask the client for feedback (it is easier to do if they are a part of your team).
User stories - these should be written by the client not by you - organise workshops to educate the client, for example.
Prototype early (as soon as possible) and give the client access - so that they can give you feedback.
Use style tiles and let the client know if these change, too. Also, make them aware that they are likely to change in due course; they’re not set in stone.
Sprints structure (doesn’t need to happen in this order, but should contain these elements):
The above might not be easy/desirable for you to do, because you will be sharing unfinished work with the client. Still, it is better as they will be more involved from the beginning of the process and can provide feedback early.
RWD (responsive web design) process
Start with content
Work with the constraints (not against them)
Use a grid system - define the grid for the given content. There are many grid systems, for example Gridset or font based grid systems. For more information about using gridsets)
Finally, a suggestion for the CSS units which work well for Nathan and what they are used for:
Percentages - for most of the things
VW, VH - for the headlines (better control over the type size relative to viewport size)
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.
