Matthew Bee, profile picture
Uploaded byMatthew Bee
PDF, PPTX384 views

Tales of the Modern Dev

The document discusses the modern state of web technology and its significant impact on daily life, including the rise of the Internet of Things (IoT) and the vital role of the internet in various regions, especially in Asia and amid societal challenges. It emphasizes the importance of responsive design in web development to enhance usability across different devices and user demographics and the need for accessibility features for users with disabilities. The text ultimately argues that while the internet can improve lives globally, it must remain focused on information exchange and accessibility for all users.

Embed presentation

Download as PDF, PPTX
TALES OF THE MODERN DEVELOPER 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 - first 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 fitbit does for your fitness, clever applications can improve people’s lives.
THE INTERNET IS STILL MOSTLY PROVIDING INFORMATION EXCHANGE 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 internet ▸ And only 39% penetration ▸ Compared to 87% of USA penetration ▸ Only 704 million users in Europe The internet is huge, almost immeasurable - but users can be measured. Although work we produce may only be touching a specific 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 AVERAGE AGE OF INTERNET USERS © Statista, 2015 - http://www.statista.com/statistics/272365/age-distribution-of-internet-users-worldwide/ The average age of internet users will continue to increase as the population ages, the 30 something users of today will still be using the internet until they become the 55+ demographic. And will expect the same standards they experience today. But it’s not even just us humans that are using the internet!
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?
STATE OF THE WEB MOST POPULAR SOCIAL NETWORKS (WORLDWIDE) ▸ Facebook - 1490 million ▸ QQ - 832 million ▸ WhatsApp - 800 million ▸ Facebook Messenger 700 million ▸ QZone - 668 million ▸ WeChat - 549 million ▸ Twitter - 316 million © Statista 2015
 http://www.statista.com/statistics/272014/global-social-networks-ranked-by-number-of-users/ Countdown of Social Networks - POP QUIZ! QQ and QZone and WeChat - Chinese Social Networks Despite our first world internet usage of cat videos and foody photos, the modern internet has amazing and vital uses.
THE INTERNET STILL HAS VITAL AND SIMPLE USES This photo did the rounds as a criticism of refugees - but why, they have technology, would we make them shun it to fit our stereotype of someone fleeing 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: http://mashable.com/2015/09/28/facebook-refugee-camp-internet Simple technology.
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 fleeing 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 PARIS ATTACKS ▸ Facebook turned on Safety Check for the first time for a non-natural disaster ▸ The hashtag #PorteOuverte (open door) was used to help people find shelter ▸ A simple show of solidarity in Facebook profile pictures ▸ 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. http://www.networkworld.com/article/3005537/security/how-the-internet-responded-to-the-paris-terror-attacks.html#slide9
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 difference ▸ 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 flourish, with new innovations enhancing our lives all the time and massive improvements in entertainment, like Netflix 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 WHILE YET. THE TAKE HOME
RESPONSIVE DESIGN SIZE DOESN’T MATTER
RESPONSIVE DESIGN 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 devices. https://opensignal.com/reports/fragmentation.php
MY JOB IS EASY Matt Bee, 2015 RESPONSIVE DESIGN Honestly. It is relatively easy. OK, maybe not “easy”. But significantly 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 final product. When it isn’t a well designed product, well, my job is anything but easy.
RESPONSIVE DESIGN WHAT NEEDS CONSIDERING ▸ Content length ▸ Image Scaling ▸ Fonts ▸ Interactions ▸ Page Weight ▸ Network Speeds Very generally there are lots of factors that need considering with responsive design. It isn’t just designing for different screen sizes but different environments, different use cases, different users.
RESPONSIVE DESIGN CONTENT LENGTH ▸ Long text will wrap - designers know this, right? ▸ Design needs to incorporate that ▸ Content strategy should leave you with well crafted content that’s easy to digest on ANY device ▸ 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
RESPONSIVE DESIGN CONTENT LENGTH 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 designer workload.
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 different content other that “OFFERS” or “SALE”
RESPONSIVE DESIGN IMAGE SCALING ▸ Sixty-two percent of the weight of the web is images ▸ That’s a big big chunk ▸ We need to optimise this better.
RESPONSIVE DESIGN IMAGE SCALING 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 different screen sizes, we really should put in some effort! 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 Bridge!
RESPONSIVE DESIGN NETWORK SPEEDS 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.
RESPONSIVE DESIGN NETWORK SPEEDS 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 ARE DOWNLOADED 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.
RESPONSIVE DESIGN DOES PAGE SPEED MATTER IF THE CONTENT IS PROVIDED? ▸ SPOT QUIZ!! ▸ Divide into 2 teams, and just get the information from the site provided.
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).
RESPONSIVE DESIGN PERFORMANCE GAINS ▸ Mozilla - 60 million more downloads ▸ Amazon - estimate 1 second increase would cost 1.6 billion per year ▸ Walmart - 1 second improvement upped conversion by 2% ▸ Google rankings - a big percentage of their algorithm accounts for speed (in relative terms) Mozilla increased firefox downloads by 15.4% - 60 million downloads per year. Previously the whole chrome site downloaded before their header finished
RESPONSIVE DESIGN IS NOT JUST 3 DIFFERENT LAYOUT DESIGNS
USABILITY 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 computers. 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 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.
WIREFRAMING
USABILITY PRODUCTS 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 USABILITY ON THE WEB ▸ Not always good ▸ For example - what is this? ▸ OK, but what if this worked better? http://exisweb.net/menu-eats-hamburger 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 on quickly.
USABILITY 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.
USABILITY ASPECTS OF USER EXPERIENCE Value Usability Adoptability Desirability http://www.uxmatters.com/mt/archives/2012/04/more-than-usability-the-four-elements-of-user-experience-part-i.php 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 Matt Bee USABILITY 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.
USABILITY TESTING IS EASY ▸ The key is watching users ▸ Usability testing is cheap ▸ You’ll learn more than you realised ▸ It will ALWAYS surprise you ▸ You’ll improve your product
USABILITY A SIMPLE TEST ▸ http://www.creativewithak.com/ ▸ You work with the agency ▸ You need to email the web designer, but have forgotten ▸ Find out what the name of the web developer is.
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
LISTEN TO USERS
ACCESSIBILITY USERS ARE PEOPLE TOO
ACCESSIBILITY 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 ACCESSIBILITY
© Microsoft Inclusive Toolkit, 2015 ACCESSIBILITY So no doubt we have all been excluded from using websites efficiently - how about a demo: Volunteer please (this may not work perfectly but hopefully it will prove a point!)
Experiment: 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. Difficult, isn’t it? What you could do is double tap, hold down the second tap and move your finger 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.
ACCESSIBILITY IOS ACCESSIBILITY FEATURES ▸ Voiceover ▸ Dictation ▸ Zoom ▸ 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.
ACCESSIBILITY WHO USES THESE FEATURES Difficulty 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.
ACCESSIBILITY HARSH TRUTH ▸ We deteriorate with age - more users needing help are coming We are humans, and our bodies are not like a fine 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.
ACCESSIBILITY 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…
ACCESSIBILITY 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?
ACCESSIBILITY 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 suffers in the UK. There are good designs that don’t contravene epilepsy advice - so that advice should be followed.
ACCESSIBILITY WHAT SHOULD WE DO ▸ We should not auto play things ▸ Things shouldn’t flash more that 3 times in any 1 second ▸ Suppress flashing before any happens ▸ Option to disable flashing content ▸ If the user is unable to control the flickering, blinking and moving (this includes stopping these effects from starting), then these effects should not be used (sorry Razorfish…) The previous site virtually violates all of these rules.
ACCESSIBILITY 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 conditions. ▸ 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. https://www.epilepsy.org.uk/info/photosensitive-epilepsy/web-design
THERE ARE MORE DISABLED USERS THAN EVER, BECAUSE TECHNOLOGY ACCEPTS THEM, AS DESIGNERS WE NEED TO AS WELL
SUMMARY WRAPPING UP
SUMMARY TAKE HOMES ▸ Content is key ▸ Responsive design is a complete approach to device and environment design ▸ 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. SUMMARY Jakob Nielson Key is uncovering the problems, using research.
THANK YOU MATT@TODAYISHOULD.COM

More Related Content

PDF
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
byJonathan Stark
 
KEY
Three Things First
byJonathan Stark
 
PDF
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
byJonathan Stark
 
PDF
CES 2016 - VCCP Trend Report
byWill Harvey
 
PDF
Josh Clark - Designing for Touch
byHealthcare Experience Design Conference
 
PDF
Designing for Touch... and Beyond - Josh Clark
byUniq UI: Usability, UX, and UI design, consulting and training
 
PDF
Can we save the open web?
byAcquia
 
PPTX
New American Wayfinders
byCaitlin McCall
 
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
byJonathan Stark
 
Three Things First
byJonathan Stark
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
byJonathan Stark
 
CES 2016 - VCCP Trend Report
byWill Harvey
 
Josh Clark - Designing for Touch
byHealthcare Experience Design Conference
 
Designing for Touch... and Beyond - Josh Clark
byUniq UI: Usability, UX, and UI design, consulting and training
 
Can we save the open web?
byAcquia
 
New American Wayfinders
byCaitlin McCall
 

What's hot

PPTX
Platforms Transitions
byMarshall Van Alstyne
 
PPTX
Platform Revolution: Ch 03 -- Architecture & Design
byMarshall Van Alstyne
 
PDF
Most Contagious 2009
byK2 Internet SA
 
PDF
Most Contagious2009
byLeire Sarasola Gandariasbeitia
 
PDF
Presentation
byAlexandra Tanu
 
PDF
Why Mobile Marketing is Essential for 21st Century Business Success
byMorgan Liu
 
PDF
Marketplace Innovation report Q2 2015
byEndava
 
KEY
Learning Lunch @ Republic June 2010
byTim Sparke
 
PPT
Brussels Design For Persuasion Web 2.0 Talk
byAmy Shuen
 
PDF
Capitalising on Popular Culture
bytwh
 
PDF
Smartphones: A New Age
byErik Wainman
 
PDF
Top 5 Web Trends Of 2009 Mobile Web & Augmented Reality
bychmingl
 
DOCX
A History Of The Web In Verbs
byCiarán Norris
 
PDF
Monetize All the Things
byJake Spurlock
 
PPTX
Internet and pre internet presentation
bymarkhayneskershaw
 
PDF
Mobile Strategy and Denial: Avoiding a House of Cards
byThe Mechanism
 
PDF
We Are Social: Curiosity Stop #10
byWe Are Social
 
PPT
InfoPoverty World Conference April 11, 2014
byNeelley Hicks
 
PDF
Authority in the Age of Overload
byEdelman Digital
 
PDF
Carri Bugbee on Social TV
byCarri Bugbee
 
Platforms Transitions
byMarshall Van Alstyne
 
Platform Revolution: Ch 03 -- Architecture & Design
byMarshall Van Alstyne
 
Most Contagious 2009
byK2 Internet SA
 
Most Contagious2009
byLeire Sarasola Gandariasbeitia
 
Presentation
byAlexandra Tanu
 
Why Mobile Marketing is Essential for 21st Century Business Success
byMorgan Liu
 
Marketplace Innovation report Q2 2015
byEndava
 
Learning Lunch @ Republic June 2010
byTim Sparke
 
Brussels Design For Persuasion Web 2.0 Talk
byAmy Shuen
 
Capitalising on Popular Culture
bytwh
 
Smartphones: A New Age
byErik Wainman
 
Top 5 Web Trends Of 2009 Mobile Web & Augmented Reality
bychmingl
 
A History Of The Web In Verbs
byCiarán Norris
 
Monetize All the Things
byJake Spurlock
 
Internet and pre internet presentation
bymarkhayneskershaw
 
Mobile Strategy and Denial: Avoiding a House of Cards
byThe Mechanism
 
We Are Social: Curiosity Stop #10
byWe Are Social
 
InfoPoverty World Conference April 11, 2014
byNeelley Hicks
 
Authority in the Age of Overload
byEdelman Digital
 
Carri Bugbee on Social TV
byCarri Bugbee
 

Similar to Tales of the Modern Dev

PDF
How consumers use technology & its impact on their lives
byIOrangeDigital
 
PPT
Future of the Web for Ayrshire Business Week
byNSDesign Ltd
 
PPTX
Internet & Beyond - Rosary College BCA Students Presentation
byVernon Fernandes
 
PDF
Graydient Creative_LR
byShawn Spartz
 
PDF
HTML5 - Moving from hacks to solutions
byChristian Heilmann
 
PPTX
Technology in the consumer world
byKarenMcBride13
 
PDF
FUTURE OF INNOVATION:99 FACTS
byVittoria Nervi career strategist
 
PDF
99 Quotes for the Future of Innovation in 2014 and beyond
byMetamorph Business Pty. Ltd
 
PDF
99 quotes on the Future of Innovation for 2014 and Beyond
byM-innovation Australia
 
PDF
How Audiences use Technology and its Impact on their Lives
byamiejulianoamaral
 
KEY
Snack Size Sociality
byJyri Engeström
 
PDF
Future of the Internet
bywsxenterprise
 
PDF
Responsive Web Design
byRachel Peters
 
PDF
Global internet society report 2015
byTuan Anh Nguyen
 
KEY
The convergence of all things (wdu keynote)
byChris Wilson
 
PDF
Institute of Directors Future of Technology Report
byEd Dodds
 
PPT
Future trends short take 20013
bywilliameager
 
PPTX
Assignment 2 Digital Revolution
byGiuliana Nosé Bellio
 
PPTX
EMPOWERMENT TECHNOLOGIES LESSON 1 - INTRODUCTION
bySerEloy
 
PDF
Why use responsive web design?
bySoDA Speaks
 
How consumers use technology & its impact on their lives
byIOrangeDigital
 
Future of the Web for Ayrshire Business Week
byNSDesign Ltd
 
Internet & Beyond - Rosary College BCA Students Presentation
byVernon Fernandes
 
Graydient Creative_LR
byShawn Spartz
 
HTML5 - Moving from hacks to solutions
byChristian Heilmann
 
Technology in the consumer world
byKarenMcBride13
 
FUTURE OF INNOVATION:99 FACTS
byVittoria Nervi career strategist
 
99 Quotes for the Future of Innovation in 2014 and beyond
byMetamorph Business Pty. Ltd
 
99 quotes on the Future of Innovation for 2014 and Beyond
byM-innovation Australia
 
How Audiences use Technology and its Impact on their Lives
byamiejulianoamaral
 
Snack Size Sociality
byJyri Engeström
 
Future of the Internet
bywsxenterprise
 
Responsive Web Design
byRachel Peters
 
Global internet society report 2015
byTuan Anh Nguyen
 
The convergence of all things (wdu keynote)
byChris Wilson
 
Institute of Directors Future of Technology Report
byEd Dodds
 
Future trends short take 20013
bywilliameager
 
Assignment 2 Digital Revolution
byGiuliana Nosé Bellio
 
EMPOWERMENT TECHNOLOGIES LESSON 1 - INTRODUCTION
bySerEloy
 
Why use responsive web design?
bySoDA Speaks
 

Recently uploaded

PPTX
Career-Opportunities in Industrial Arts Grade 8 PPT Lesson 2
byFSBTLEDNathanVince
 
PDF
Supercharge Your Copilot-Driven Collaboration with Microsoft 365 Agents SDK
byAntti Koskela
 
PDF
Writing GPU-Ready AI Models in Pure Java with Babylon
byAna-Maria Mihalceanu
 
PDF
The Enterprise Web3 Landscape - a view from Kaleido based on the past 10 year...
byPeter Broadhurst
 
PDF
Understanding Foldable 3-Wheel Electric Scooters for Everyday Use
byTopmate
 
PDF
Post-Hackathon-Learnings-Maximizing-Impact-Beyond-the-Event.pdf
byishantyadav1111
 
PDF
Configure and Manage Systemd Timers- RHCSA (RH134).pdf
byLinuxCert Guru
 
PPTX
Introduction to Industrial-Arts Grade 8 ppt Lesson 1
byFSBTLEDNathanVince
 
PDF
Why Many Smart Device Platforms Fail to Scale?
byPromeraki Developments
 
PPTX
TechSprint (SJBIT) 2025-26 Hackathon Winners & Awards Ceremony
bysuhasspgdg
 
PDF
The Manifesto for AI-enabled Governance !
byYannis Charalabidis
 
PDF
AI and Zero Trust: What it takes to do it right
byMark Simos
 
PDF
Dev Dives: Build and deploy agentic automations - the unified way
byUiPathCommunity
 
PPTX
TechSprint WinterHack — Top 10 Teams Pitching Session we are excited for pit...
bybajpaitusharoffon678
 
PDF
ICT500 - CRITICAL AND CREATIVE THINKING FOR INFORMATION TECHNOLOGY SOLUTIONS:...
by2024432452
 
PDF
Safer’s Picks: The 5 FME Transformers You Didn’t Know You Needed
bySafe Software
 
PDF
Parental Control App for Phones_ The Complete 2026 Guide for Safer, Smarter P...
byRyan Cooper
 
PDF
Poročilo odbora CIS (CH08873) za leto 2025 na letni skupščini IEEE Slovenija ...
byUniversity of Maribor
 
PDF
Rustici Software: eLearning standards in the age of AI
byRustici Software
 
PPTX
NTG - Data Center Management System Software
byMustafa Kuğu
 
Career-Opportunities in Industrial Arts Grade 8 PPT Lesson 2
byFSBTLEDNathanVince
 
Supercharge Your Copilot-Driven Collaboration with Microsoft 365 Agents SDK
byAntti Koskela
 
Writing GPU-Ready AI Models in Pure Java with Babylon
byAna-Maria Mihalceanu
 
The Enterprise Web3 Landscape - a view from Kaleido based on the past 10 year...
byPeter Broadhurst
 
Understanding Foldable 3-Wheel Electric Scooters for Everyday Use
byTopmate
 
Post-Hackathon-Learnings-Maximizing-Impact-Beyond-the-Event.pdf
byishantyadav1111
 
Configure and Manage Systemd Timers- RHCSA (RH134).pdf
byLinuxCert Guru
 
Introduction to Industrial-Arts Grade 8 ppt Lesson 1
byFSBTLEDNathanVince
 
Why Many Smart Device Platforms Fail to Scale?
byPromeraki Developments
 
TechSprint (SJBIT) 2025-26 Hackathon Winners & Awards Ceremony
bysuhasspgdg
 
The Manifesto for AI-enabled Governance !
byYannis Charalabidis
 
AI and Zero Trust: What it takes to do it right
byMark Simos
 
Dev Dives: Build and deploy agentic automations - the unified way
byUiPathCommunity
 
TechSprint WinterHack — Top 10 Teams Pitching Session we are excited for pit...
bybajpaitusharoffon678
 
ICT500 - CRITICAL AND CREATIVE THINKING FOR INFORMATION TECHNOLOGY SOLUTIONS:...
by2024432452
 
Safer’s Picks: The 5 FME Transformers You Didn’t Know You Needed
bySafe Software
 
Parental Control App for Phones_ The Complete 2026 Guide for Safer, Smarter P...
byRyan Cooper
 
Poročilo odbora CIS (CH08873) za leto 2025 na letni skupščini IEEE Slovenija ...
byUniversity of Maribor
 
Rustici Software: eLearning standards in the age of AI
byRustici Software
 
NTG - Data Center Management System Software
byMustafa Kuğu
 

Tales of the Modern Dev

  • 1.
    TALES OF THEMODERN DEVELOPER 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.
  • 2.
    STATE OF THEWEB WHAT THE HELL IS GOING ON? Let’s start with a round up of what is going on with the internet.
  • 3.
    Web technology istaking 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.
  • 4.
    STATE OF THEWEB 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 - first 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 fitbit does for your fitness, clever applications can improve people’s lives.
  • 5.
    THE INTERNET IS STILLMOSTLY PROVIDING INFORMATION EXCHANGE 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…
  • 6.
    Funny that thefull 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
  • 7.
    STATE OF THEWEB WHO USES THE WEB ▸ Asia largest consumer of internet ▸ And only 39% penetration ▸ Compared to 87% of USA penetration ▸ Only 704 million users in Europe The internet is huge, almost immeasurable - but users can be measured. Although work we produce may only be touching a specific 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.
  • 8.
    STATE OF THEWEB AVERAGE AGE OF INTERNET USERS © Statista, 2015 - http://www.statista.com/statistics/272365/age-distribution-of-internet-users-worldwide/ The average age of internet users will continue to increase as the population ages, the 30 something users of today will still be using the internet until they become the 55+ demographic. And will expect the same standards they experience today. But it’s not even just us humans that are using the internet!
  • 9.
    STATE OF THEWEB 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?
  • 10.
    STATE OF THEWEB MOST POPULAR SOCIAL NETWORKS (WORLDWIDE) ▸ Facebook - 1490 million ▸ QQ - 832 million ▸ WhatsApp - 800 million ▸ Facebook Messenger 700 million ▸ QZone - 668 million ▸ WeChat - 549 million ▸ Twitter - 316 million © Statista 2015
 http://www.statista.com/statistics/272014/global-social-networks-ranked-by-number-of-users/ Countdown of Social Networks - POP QUIZ! QQ and QZone and WeChat - Chinese Social Networks Despite our first world internet usage of cat videos and foody photos, the modern internet has amazing and vital uses.
  • 11.
    THE INTERNET STILL HASVITAL AND SIMPLE USES This photo did the rounds as a criticism of refugees - but why, they have technology, would we make them shun it to fit our stereotype of someone fleeing 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: http://mashable.com/2015/09/28/facebook-refugee-camp-internet Simple technology.
  • 12.
    STATE OF THEWEB 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 fleeing 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?
  • 13.
    STATE OF THEWEB PARIS ATTACKS ▸ Facebook turned on Safety Check for the first time for a non-natural disaster ▸ The hashtag #PorteOuverte (open door) was used to help people find shelter ▸ A simple show of solidarity in Facebook profile pictures ▸ 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. http://www.networkworld.com/article/3005537/security/how-the-internet-responded-to-the-paris-terror-attacks.html#slide9
  • 14.
    STATE OF THEWEB 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 difference ▸ 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 flourish, with new innovations enhancing our lives all the time and massive improvements in entertainment, like Netflix 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.
  • 15.
    THE INTERNET WASDESIGNED FOR INFORMATION EXCHANGE AND IT SHOULD STAY THAT WAY FOR A WHILE YET. THE TAKE HOME
  • 16.
  • 17.
    RESPONSIVE DESIGN HOW MANYSCREEN 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 devices. https://opensignal.com/reports/fragmentation.php
  • 18.
    MY JOB ISEASY Matt Bee, 2015 RESPONSIVE DESIGN Honestly. It is relatively easy. OK, maybe not “easy”. But significantly 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 final product. When it isn’t a well designed product, well, my job is anything but easy.
  • 19.
    RESPONSIVE DESIGN WHAT NEEDSCONSIDERING ▸ Content length ▸ Image Scaling ▸ Fonts ▸ Interactions ▸ Page Weight ▸ Network Speeds Very generally there are lots of factors that need considering with responsive design. It isn’t just designing for different screen sizes but different environments, different use cases, different users.
  • 20.
    RESPONSIVE DESIGN CONTENT LENGTH ▸Long text will wrap - designers know this, right? ▸ Design needs to incorporate that ▸ Content strategy should leave you with well crafted content that’s easy to digest on ANY device ▸ 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
  • 21.
    RESPONSIVE DESIGN CONTENT LENGTH Thisis 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 designer workload.
  • 22.
    This shows thatit 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 different content other that “OFFERS” or “SALE”
  • 23.
    RESPONSIVE DESIGN IMAGE SCALING ▸Sixty-two percent of the weight of the web is images ▸ That’s a big big chunk ▸ We need to optimise this better.
  • 24.
    RESPONSIVE DESIGN IMAGE SCALING Imagescaling 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 different screen sizes, we really should put in some effort! 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 Bridge!
  • 25.
    RESPONSIVE DESIGN NETWORK SPEEDS Thisis 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.
  • 26.
    RESPONSIVE DESIGN NETWORK SPEEDS Thisis 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.
  • 27.
    WE DON’T GETTO CHOOSE HOW MANY TIMES THINGS ARE DOWNLOADED 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.
  • 28.
    RESPONSIVE DESIGN DOES PAGESPEED MATTER IF THE CONTENT IS PROVIDED? ▸ SPOT QUIZ!! ▸ Divide into 2 teams, and just get the information from the site provided.
  • 29.
    Phones 4U comparisonof 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.
  • 30.
    But making improvementsfor phones and fast downloads, means improvements on desktop - Google rank faster sites better than equally ranked sites on content (among other factors).
  • 31.
    RESPONSIVE DESIGN PERFORMANCE GAINS ▸Mozilla - 60 million more downloads ▸ Amazon - estimate 1 second increase would cost 1.6 billion per year ▸ Walmart - 1 second improvement upped conversion by 2% ▸ Google rankings - a big percentage of their algorithm accounts for speed (in relative terms) Mozilla increased firefox downloads by 15.4% - 60 million downloads per year. Previously the whole chrome site downloaded before their header finished
  • 32.
    RESPONSIVE DESIGN IS NOTJUST 3 DIFFERENT LAYOUT DESIGNS
  • 33.
    USABILITY HOW IT WORKS Sowe’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 computers. 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!
  • 34.
    USABILITY USABILITY IN THEWEB ▸ 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.
  • 35.
  • 36.
    USABILITY PRODUCTS I can haveworked 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!)
  • 37.
    USABILITY USABILITY ON THEWEB ▸ Not always good ▸ For example - what is this? ▸ OK, but what if this worked better? http://exisweb.net/menu-eats-hamburger 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 on quickly.
  • 38.
    USABILITY 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.
  • 39.
    USABILITY ASPECTS OF USEREXPERIENCE Value Usability Adoptability Desirability http://www.uxmatters.com/mt/archives/2012/04/more-than-usability-the-four-elements-of-user-experience-part-i.php 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!
  • 40.
    THE ONLY PERSONTHAT KNOWS BETTER THAN YOUR USERS ARE YOUR NON-USERS Matt Bee USABILITY 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.
  • 41.
    USABILITY TESTING IS EASY ▸The key is watching users ▸ Usability testing is cheap ▸ You’ll learn more than you realised ▸ It will ALWAYS surprise you ▸ You’ll improve your product
  • 42.
    USABILITY A SIMPLE TEST ▸http://www.creativewithak.com/ ▸ You work with the agency ▸ You need to email the web designer, but have forgotten ▸ Find out what the name of the web developer is.
  • 43.
    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
  • 44.
  • 45.
  • 46.
    ACCESSIBILITY WHAT IS ADISABILITY? ▸ 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.
  • 47.
    DISABILITY IS NOTJUST 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 ACCESSIBILITY
  • 48.
    © Microsoft InclusiveToolkit, 2015 ACCESSIBILITY So no doubt we have all been excluded from using websites efficiently - how about a demo: Volunteer please (this may not work perfectly but hopefully it will prove a point!)
  • 49.
    Experiment: Volunteer to holdthe baby, now without dropping the wriggling baby (that’s one hand out of action). Now go to Google Maps and zoom out. Difficult, isn’t it? What you could do is double tap, hold down the second tap and move your finger 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.
  • 50.
    ACCESSIBILITY IOS ACCESSIBILITY FEATURES ▸Voiceover ▸ Dictation ▸ Zoom ▸ 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.
  • 51.
    ACCESSIBILITY WHO USES THESEFEATURES Difficulty 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.
  • 52.
    ACCESSIBILITY HARSH TRUTH ▸ Wedeteriorate with age - more users needing help are coming We are humans, and our bodies are not like a fine 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.
  • 53.
    ACCESSIBILITY YOUR WEBSITE FAILSUSERS 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…
  • 54.
    ACCESSIBILITY 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?
  • 55.
    ACCESSIBILITY WHAT IF IHAD 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 suffers in the UK. There are good designs that don’t contravene epilepsy advice - so that advice should be followed.
  • 56.
    ACCESSIBILITY WHAT SHOULD WEDO ▸ We should not auto play things ▸ Things shouldn’t flash more that 3 times in any 1 second ▸ Suppress flashing before any happens ▸ Option to disable flashing content ▸ If the user is unable to control the flickering, blinking and moving (this includes stopping these effects from starting), then these effects should not be used (sorry Razorfish…) The previous site virtually violates all of these rules.
  • 57.
    ACCESSIBILITY WHY BOTHER, IFIT’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 conditions. ▸ 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. https://www.epilepsy.org.uk/info/photosensitive-epilepsy/web-design
  • 58.
    THERE ARE MOREDISABLED USERS THAN EVER, BECAUSE TECHNOLOGY ACCEPTS THEM, AS DESIGNERS WE NEED TO AS WELL
  • 59.
  • 60.
    SUMMARY TAKE HOMES ▸ Contentis key ▸ Responsive design is a complete approach to device and environment design ▸ Listen to your users (before, during and after!) ▸ Accessibility is a responsibility we have - that comes with huge other gains
  • 61.
    EVEN THE BESTDESIGNERS PRODUCE SUCCESSFUL PRODUCTS ONLY IF THEIR DESIGNS SOLVE THE RIGHT PROBLEMS. A WONDERFUL INTERFACE TO THE WRONG FEATURES WILL FAIL. SUMMARY Jakob Nielson Key is uncovering the problems, using research.
  • 62.