UX Design for the Responsive Web - UX London 2014 WorkshopMatt Gibson
Whether they realise it or not, every company is in the user experience business. The best products and services have design at their very core. This workshop will delve into how we as designers, developers and product owners can challenge assumptions and influence business strategy to deliver better, more delightful experiences for our users regardless of screen size. Through a series of hands-on activities we will share techniques for exploring and identifying requirements, painting a picture of our users and quickly creating responsive prototypes that we can test and validate.
Why does so much web content SUCK? And how can we make it BETTER? To find out, we need to question our perspective about content.
Content isn't a feature.
It's not "lorem ipsum" text. It's not something you "bolt on" after design is done. It's not even design or code or even plain text. Instead, content is about brands, audiences, data, systems, processes and workflows. In short, great content is all about PEOPLE.
Which means that content is an EXPERIENCE. Once we understand that, we can get to work on making our content BETTER. Better for users, for businesses, for communities... for a Better Web!
Want to know more about the design and concept of these slides and how I got them to be featured as "Top Presentation of the Day" on Slideshare? See my post at http://www.jonathoncolman.org/2013/02/24/why-our-content-sucks/
Originally presented at the SearchFest conference by SEMpdx in Portland, Oregon on February 22, 2013.
You can learn more about Jonathon Colman at http://www.jonathoncolman.org/
Also see 200+ free Content Strategy resources at http://www.jonathoncolman.org/2013/02/04/content-strategy-resources/
Content strategists at Facebook plan, structure, and create content for more than a billion people. But they’re not writers or content marketers—they’re interaction designers, information architects, and UX practitioners. They design and build product experiences that are simple, straightforward and human.
And so can you. Content strategy isn't just for big organizations. It's for anyone who's building an experience. And by using our approach, you can start building better content.
In this presentation, you'll learn:
- How content strategy works in a context of product design and development
- A framework for minimum viable content that provides quality and consistency
- How to build and iterate on product content experiences to meet people's needs
- How to stand up and become a better advocate for the people using your products
Stand up for putting The Why before The How.
Stand up for value, ease of use, and craft.
Stand up for meeting (and exceeding) people's needs.
Stand up for BETTER CONTENT!
Inspired by Maria Giudice of Facebook, Ian Lurie of Portent, and Jason Mesut of Plan. Based on the works of Jesse James Garrett, Simon Sinek, A.H. Maslow, Kristina Halvorson, Rachel Lovinger, Dan Saffer/Kicker Studio, Erin Kissane, Michael Powers, Sarah O'Keefe, Hilary Marsh, Wouter De Bres, Matt Toback, Eric Ries/The Lean Startup, Dr. Chun Wei Choo, Libby Brittain, and more. Featuring the design work of the Facebook Analog Research Lab, including concepts by Julie Zhuo, Russ Maschmeyer, and Adam Mosseri of Facebook along with content standards from Facebook's Content Strategy team.
Originally presented at Content Marketing World on September 10, 2014 in Cleveland, Ohio.
You can learn more about Jonathon Colman at http://www.jonathoncolman.org/ and follow him on Twitter at http://twitter.com/jcolman
Also see 200+ free, curated Content Strategy resources at http://www.jonathoncolman.org/2013/02/04/content-strategy-resources/
Online video trends are influencing news and communication. People now get 31% of their news from online sources while watching TV, and share 1/3 of online videos. Reporters are using video tools like Skype for live interviews to replace expensive live trucks. Freelance "MoJo" journalists are rising in popularity for their flexibility. Smartphones make it easy to shoot, edit and share video on the go. News organizations are adding more video content and finding ways to encourage social sharing of stories. Effective video storytelling focuses on visuals and emotions over narration, and brings viewers closer to events and people.
Imagine what you could do if your customer was the core focus of your marketing work, from strategy down to tactics and measurement - Agile Marketing to the rescue!
And what if you were measured on shipping value to customers, not on how well you kissed ass or how politically adept you were? Agile Marketing has built-in mechanisms to help!
How much more time could you dedicate to customers if you had only three standing meetings each month? Agile Marketing focuses on action!
And consider all the benefits of working as part of a cross-functional team that includes design, development, content, analysis, and testing experts so that you have everyone you need to make great things happen all in one place... that Agile Marketing.
In this presentation from SEOmoz MozCon 2012, I'll show you four principles of Agile Marketing and thirteen ways to hack your marketing organization with Agile to make it better, faster, and more accountable for your customers.
You can learn more about Jonathon Colman at http://www.jonathoncolman.org/
More than Media Queries: Reframing Responsive UX - SXSW 2016Matt Gibson
My slides from my presentation at SXSW, Austin, Texas on 12/03/16 about going beyond the media query to deliver truly responsive experiences for people regardless of the device they're using.
Adapting to Responsive Web Design - Figaro DigitalMatt Gibson
These are my slides from Figaro Digital on 5th August 2015: http://www.figarodigital.co.uk/seminars.aspx?pkEventID=2e528d70-4eea-4344-b49d-57a544f5399b
Video available here: http://www.figarodigital.co.uk/Video.aspx?v=29ecfc59-8fc4-4505-86b2-5646dcef88f0
UX Design for the Responsive Web - UX London 2014 WorkshopMatt Gibson
Whether they realise it or not, every company is in the user experience business. The best products and services have design at their very core. This workshop will delve into how we as designers, developers and product owners can challenge assumptions and influence business strategy to deliver better, more delightful experiences for our users regardless of screen size. Through a series of hands-on activities we will share techniques for exploring and identifying requirements, painting a picture of our users and quickly creating responsive prototypes that we can test and validate.
Why does so much web content SUCK? And how can we make it BETTER? To find out, we need to question our perspective about content.
Content isn't a feature.
It's not "lorem ipsum" text. It's not something you "bolt on" after design is done. It's not even design or code or even plain text. Instead, content is about brands, audiences, data, systems, processes and workflows. In short, great content is all about PEOPLE.
Which means that content is an EXPERIENCE. Once we understand that, we can get to work on making our content BETTER. Better for users, for businesses, for communities... for a Better Web!
Want to know more about the design and concept of these slides and how I got them to be featured as "Top Presentation of the Day" on Slideshare? See my post at http://www.jonathoncolman.org/2013/02/24/why-our-content-sucks/
Originally presented at the SearchFest conference by SEMpdx in Portland, Oregon on February 22, 2013.
You can learn more about Jonathon Colman at http://www.jonathoncolman.org/
Also see 200+ free Content Strategy resources at http://www.jonathoncolman.org/2013/02/04/content-strategy-resources/
Content strategists at Facebook plan, structure, and create content for more than a billion people. But they’re not writers or content marketers—they’re interaction designers, information architects, and UX practitioners. They design and build product experiences that are simple, straightforward and human.
And so can you. Content strategy isn't just for big organizations. It's for anyone who's building an experience. And by using our approach, you can start building better content.
In this presentation, you'll learn:
- How content strategy works in a context of product design and development
- A framework for minimum viable content that provides quality and consistency
- How to build and iterate on product content experiences to meet people's needs
- How to stand up and become a better advocate for the people using your products
Stand up for putting The Why before The How.
Stand up for value, ease of use, and craft.
Stand up for meeting (and exceeding) people's needs.
Stand up for BETTER CONTENT!
Inspired by Maria Giudice of Facebook, Ian Lurie of Portent, and Jason Mesut of Plan. Based on the works of Jesse James Garrett, Simon Sinek, A.H. Maslow, Kristina Halvorson, Rachel Lovinger, Dan Saffer/Kicker Studio, Erin Kissane, Michael Powers, Sarah O'Keefe, Hilary Marsh, Wouter De Bres, Matt Toback, Eric Ries/The Lean Startup, Dr. Chun Wei Choo, Libby Brittain, and more. Featuring the design work of the Facebook Analog Research Lab, including concepts by Julie Zhuo, Russ Maschmeyer, and Adam Mosseri of Facebook along with content standards from Facebook's Content Strategy team.
Originally presented at Content Marketing World on September 10, 2014 in Cleveland, Ohio.
You can learn more about Jonathon Colman at http://www.jonathoncolman.org/ and follow him on Twitter at http://twitter.com/jcolman
Also see 200+ free, curated Content Strategy resources at http://www.jonathoncolman.org/2013/02/04/content-strategy-resources/
Online video trends are influencing news and communication. People now get 31% of their news from online sources while watching TV, and share 1/3 of online videos. Reporters are using video tools like Skype for live interviews to replace expensive live trucks. Freelance "MoJo" journalists are rising in popularity for their flexibility. Smartphones make it easy to shoot, edit and share video on the go. News organizations are adding more video content and finding ways to encourage social sharing of stories. Effective video storytelling focuses on visuals and emotions over narration, and brings viewers closer to events and people.
Imagine what you could do if your customer was the core focus of your marketing work, from strategy down to tactics and measurement - Agile Marketing to the rescue!
And what if you were measured on shipping value to customers, not on how well you kissed ass or how politically adept you were? Agile Marketing has built-in mechanisms to help!
How much more time could you dedicate to customers if you had only three standing meetings each month? Agile Marketing focuses on action!
And consider all the benefits of working as part of a cross-functional team that includes design, development, content, analysis, and testing experts so that you have everyone you need to make great things happen all in one place... that Agile Marketing.
In this presentation from SEOmoz MozCon 2012, I'll show you four principles of Agile Marketing and thirteen ways to hack your marketing organization with Agile to make it better, faster, and more accountable for your customers.
You can learn more about Jonathon Colman at http://www.jonathoncolman.org/
More than Media Queries: Reframing Responsive UX - SXSW 2016Matt Gibson
My slides from my presentation at SXSW, Austin, Texas on 12/03/16 about going beyond the media query to deliver truly responsive experiences for people regardless of the device they're using.
Adapting to Responsive Web Design - Figaro DigitalMatt Gibson
These are my slides from Figaro Digital on 5th August 2015: http://www.figarodigital.co.uk/seminars.aspx?pkEventID=2e528d70-4eea-4344-b49d-57a544f5399b
Video available here: http://www.figarodigital.co.uk/Video.aspx?v=29ecfc59-8fc4-4505-86b2-5646dcef88f0
The document discusses how views of marketing, advertising, and consumer behavior have changed over time. It outlines several "white lies" that were previously believed, such as the ideas that cyberspace and real life are separate, that TV is dead, and that clicks are all that count. The document argues these views are outdated and have been replaced by a new understanding of consumers as trusting peers over experts and valuing community and sharing over interruptions.
This document discusses various aspects of documentaries that could provide inspiration for a documentary on social networking. It notes that documentaries aim to document reality. It recommends including exciting sounds. It suggests using mid shots to focus on questions and answers, and close ups of fonts for openings. Effective shots discussed include zooms, voiceovers, and shots showing the relationship between interviewers and interviewees. The document recommends including a historical overview of the development of social networking sites over years. It supports the use of close ups to focus audience attention and two shots to show interview dynamics.
Adapting to Responsive Design - UXPA2015Matt Gibson
These are the slides from my talk at UXPA2015 (http://uxpa2015.org/) in San Diego on June 25 2015. The talk centred on going further with our responsive designs, looking at content strategy, performance, progressive enhancement and more future friendly thinking.
Doing Less with More - Invisible Design and User ResearchBernadette Irizarry
Doing Less with More
"Indifference toward people and the reality in which they live is actually the one and only cardinal sin in design." - Dieter Rams.
In the race to meet a deadline, a budget, or just to be "lean", teams are sinning daily. Pressures lead to shortcuts. And research? Well, it's often left by the wayside, seen as an adornment, a nice-to-have. But research is the foundation upon which we build our work.
Yes, it takes more resources and time. But the more detailed your picture, the easier it is to see the patterns, the behaviours, and the essence of what will make your application invisible. Uncovering "the little things that matter" speeds up development and helps designers concentrate on making designs that are "less, but better."
Creating with a thorough understanding of the customer, their wants and needs, their context and perceptions, their goals–that is the highest respect you can offer those you are serving.
In this presentation we explore how relational intelligence and knowing your customers is a must if we are to improve people's lives with our products and experiences.
This version The Nuts and Bolts of Twitter presentation is an updated slideshow. It has been shared after the May 13, 2009 Greater Fort Worth Chapter of PRSA's Professional Development Workshop entitled @ TheForefront: Successfully Navigating Social Media with special guest Beth Harte.
User Experience & User Interface Design Trends Coppa+Landini
Andrea Landini - Co-founder e Strategist di Coppa+Landini - ci accompagna in un viaggio tra i principali trend internazionali di User Experience e User Interface Design del 2015
Hands-on Experiences in Web StorytellingAlan Levine
This document discusses hands-on web storytelling. It provides tips and examples of how to effectively tell stories using digital technologies and online media. Some of the key elements discussed include using the shapes of stories, grabbing audience attention with movies, communicating a message clearly, and leaving some details for the audience to imagine. Examples are given of digital storytelling tools and techniques across different media like video, audio, and images. The overall message is how to craft compelling stories and resonate with audiences online.
Redesigning how we work - UX Alive 2016Matt Gibson
Slides from my presentation at UX Alive on 11th May 2016, about how we can foster better empathy, trust and communication with our client, through our design approach.
A recasting of a presentation (but with snazzy new 'stuff') for the Maricopa Community Colleges Teaching & Learning with Technology conference, May 13, 2008
This document discusses viral marketing and provides examples. It defines viral marketing as advertising or marketing techniques that spread like a virus from person to person. Examples given include games, videos, images, and software. Warner Bros.' viral campaign for The Dark Knight is discussed, which utilized the "Why So Serious?" tagline but had to change focus after Heath Ledger's death. Cloverfield and Dexter are discussed as viral marketing examples, with Cloverfield using cryptic TV clips and Dexter sparking controversy with unsolicited text messages. The document also discusses R3WiND Media's use of YouTube, Facebook, blogs, and social media for viral marketing. Options discussed to gain further feedback include Twitter, podcasts,
Redesigning how we work with clients - Reasons.to - 09.09.15Matt Gibson
Matt Gibson shares three tips for making life better for clients and designers. The tips are to 1) be transparent and provide regular updates, 2) present design work to uncover underlying problems rather than focus on solutions, and 3) respect clients but don't treat them with reverence, and be reliable. The overall message is that by following these tips, truly awesome work can be created that satisfies both clients and designers.
This document discusses various content marketing strategies that can be used by travel websites, including video blogs, books, social media, influencer marketing, collaborative blogs, mobile apps, podcasts, and regularly updated blog sections. It provides examples like Bald and Bankrupt on YouTube, Arthur Chichester's travel book, Simon Wilson's Facebook content, Alex Preview's Instagram, the neighborhood-focused website On the Grid, Airbnb's early focus on photos and later experiences, app, and potential for podcasts, and Lonely Planet's guidebooks, forum, and blog stories. The key strategies highlighted are short and engaging video, social media that suits the platform and audience, collaborative and local content, mobile-friendliness,
Location provides context for what mobile users need.
The mobile web deserves unique functionality, but instead it's just a watered down version of the internet proper.
We live in a world of cords and keypads. Every experience, from getting lost to doing laundry, is benefiting from the gadgets that fill our lives. But while everything may be wired, none of it is wired together. The cracks in our daily experiences can be filled with the mobile web. Accessible through our phones, filling us in on the virtual world all around us.
I presented this deck at the IA Summit 2009, in Memphis, Tennessee.
The document provides tips for improving sentence fluency and structure, including varying sentence types (simple, complex, compound), using parallel structure, varying sentence length and branching, and proper use of punctuation like commas, semicolons, dashes, parentheses, and colons. It discusses how to combine sentences for smoother writing and avoid choppy sentences.
Web Performance Optimization: The Silver Bullet of SEO and UXJonathon Colman
The document is a presentation on web performance optimization that uses Twilight references and images as a comedic framing device. It discusses how site speed impacts SEO, user experience, conversion rates, and costs. It provides key metrics on these impacts and outlines five steps for optimizing performance, including studying best practices, using developer tools, setting caching headers, reducing duplicate assets, and implementing CSS sprites. The presentation concludes that performance work should be an ongoing process of measuring impacts and continually improving the site experience.
The document discusses trends in online video and visual communication. It notes that 80% of internet users view online video regularly, with YouTube receiving 20 hours of new video per minute. 1/3 of YouTube videos are shared. It also discusses the rise of video on devices like Roku and ways people are incorporating video into social media like Facebook. It provides tips for online video storytelling like using strong visuals and audio over narration.
The document summarizes the marketing campaign for the 2010 film Inception. It describes 10 steps taken to target an intellectual audience aged 16-30, generate curiosity about the film's complex plot without fully revealing it, and build buzz through clues and puzzles online and in viral games/apps. Traditional techniques like posters, trailers and TV spots were also used but focused on intrigue rather than explaining the storyline. The campaign emphasized secrecy and puzzle-solving to engage viewers and ensure they experienced the full plot for themselves in theaters.
Adapting to Responsive Design - On The Edge Conference #edgebrumMatt Gibson
My slides from On The Edge Birmingham 2014 on 3rd July 2014 (#edgebrum). My talk was about the principles of responsive web design with real world experiences of how Cyber-Duck approached responsive design for our own website.
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Matt Gibson
This document discusses adapting websites to responsive web design. It defines responsive design as creating interfaces that react quickly and positively to user conditions. It notes that people access websites in many ways, so responsive design aims to have one code base that works across devices rather than separate mobile sites. The document outlines four goals for responsive design: content parity across devices, speed optimization, future-proofing the design, and accessibility. It provides examples and tips for achieving each goal, such as conducting content audits, optimizing images, caching, and designing first for touch interfaces. The results of implementing responsive design on one website included increased mobile traffic and conversions as well as reduced exit rates.
Adapting to Responsive Design - HCID2014, 24 April 2014Matt Gibson
This document discusses adapting websites to responsive web design. It defines responsive design as creating interfaces that react quickly and positively to user conditions. It notes that people access websites in many ways, so responsive design aims to have one code base that works across devices rather than separate mobile/desktop sites. The document outlines four goals for responsive design: content parity across devices, speed/performance, future-proofing the design, and accessibility. It provides examples and recommendations for achieving each goal, such as researching content needs, optimizing assets, progressive enhancement, and testing accessibility. The results of implementing responsive design are shown to be a 200% increase in mobile traffic and 43% increase in conversions, with a 4000% reduction in homepage exit rates on
The document discusses how views of marketing, advertising, and consumer behavior have changed over time. It outlines several "white lies" that were previously believed, such as the ideas that cyberspace and real life are separate, that TV is dead, and that clicks are all that count. The document argues these views are outdated and have been replaced by a new understanding of consumers as trusting peers over experts and valuing community and sharing over interruptions.
This document discusses various aspects of documentaries that could provide inspiration for a documentary on social networking. It notes that documentaries aim to document reality. It recommends including exciting sounds. It suggests using mid shots to focus on questions and answers, and close ups of fonts for openings. Effective shots discussed include zooms, voiceovers, and shots showing the relationship between interviewers and interviewees. The document recommends including a historical overview of the development of social networking sites over years. It supports the use of close ups to focus audience attention and two shots to show interview dynamics.
Adapting to Responsive Design - UXPA2015Matt Gibson
These are the slides from my talk at UXPA2015 (http://uxpa2015.org/) in San Diego on June 25 2015. The talk centred on going further with our responsive designs, looking at content strategy, performance, progressive enhancement and more future friendly thinking.
Doing Less with More - Invisible Design and User ResearchBernadette Irizarry
Doing Less with More
"Indifference toward people and the reality in which they live is actually the one and only cardinal sin in design." - Dieter Rams.
In the race to meet a deadline, a budget, or just to be "lean", teams are sinning daily. Pressures lead to shortcuts. And research? Well, it's often left by the wayside, seen as an adornment, a nice-to-have. But research is the foundation upon which we build our work.
Yes, it takes more resources and time. But the more detailed your picture, the easier it is to see the patterns, the behaviours, and the essence of what will make your application invisible. Uncovering "the little things that matter" speeds up development and helps designers concentrate on making designs that are "less, but better."
Creating with a thorough understanding of the customer, their wants and needs, their context and perceptions, their goals–that is the highest respect you can offer those you are serving.
In this presentation we explore how relational intelligence and knowing your customers is a must if we are to improve people's lives with our products and experiences.
This version The Nuts and Bolts of Twitter presentation is an updated slideshow. It has been shared after the May 13, 2009 Greater Fort Worth Chapter of PRSA's Professional Development Workshop entitled @ TheForefront: Successfully Navigating Social Media with special guest Beth Harte.
User Experience & User Interface Design Trends Coppa+Landini
Andrea Landini - Co-founder e Strategist di Coppa+Landini - ci accompagna in un viaggio tra i principali trend internazionali di User Experience e User Interface Design del 2015
Hands-on Experiences in Web StorytellingAlan Levine
This document discusses hands-on web storytelling. It provides tips and examples of how to effectively tell stories using digital technologies and online media. Some of the key elements discussed include using the shapes of stories, grabbing audience attention with movies, communicating a message clearly, and leaving some details for the audience to imagine. Examples are given of digital storytelling tools and techniques across different media like video, audio, and images. The overall message is how to craft compelling stories and resonate with audiences online.
Redesigning how we work - UX Alive 2016Matt Gibson
Slides from my presentation at UX Alive on 11th May 2016, about how we can foster better empathy, trust and communication with our client, through our design approach.
A recasting of a presentation (but with snazzy new 'stuff') for the Maricopa Community Colleges Teaching & Learning with Technology conference, May 13, 2008
This document discusses viral marketing and provides examples. It defines viral marketing as advertising or marketing techniques that spread like a virus from person to person. Examples given include games, videos, images, and software. Warner Bros.' viral campaign for The Dark Knight is discussed, which utilized the "Why So Serious?" tagline but had to change focus after Heath Ledger's death. Cloverfield and Dexter are discussed as viral marketing examples, with Cloverfield using cryptic TV clips and Dexter sparking controversy with unsolicited text messages. The document also discusses R3WiND Media's use of YouTube, Facebook, blogs, and social media for viral marketing. Options discussed to gain further feedback include Twitter, podcasts,
Redesigning how we work with clients - Reasons.to - 09.09.15Matt Gibson
Matt Gibson shares three tips for making life better for clients and designers. The tips are to 1) be transparent and provide regular updates, 2) present design work to uncover underlying problems rather than focus on solutions, and 3) respect clients but don't treat them with reverence, and be reliable. The overall message is that by following these tips, truly awesome work can be created that satisfies both clients and designers.
This document discusses various content marketing strategies that can be used by travel websites, including video blogs, books, social media, influencer marketing, collaborative blogs, mobile apps, podcasts, and regularly updated blog sections. It provides examples like Bald and Bankrupt on YouTube, Arthur Chichester's travel book, Simon Wilson's Facebook content, Alex Preview's Instagram, the neighborhood-focused website On the Grid, Airbnb's early focus on photos and later experiences, app, and potential for podcasts, and Lonely Planet's guidebooks, forum, and blog stories. The key strategies highlighted are short and engaging video, social media that suits the platform and audience, collaborative and local content, mobile-friendliness,
Location provides context for what mobile users need.
The mobile web deserves unique functionality, but instead it's just a watered down version of the internet proper.
We live in a world of cords and keypads. Every experience, from getting lost to doing laundry, is benefiting from the gadgets that fill our lives. But while everything may be wired, none of it is wired together. The cracks in our daily experiences can be filled with the mobile web. Accessible through our phones, filling us in on the virtual world all around us.
I presented this deck at the IA Summit 2009, in Memphis, Tennessee.
The document provides tips for improving sentence fluency and structure, including varying sentence types (simple, complex, compound), using parallel structure, varying sentence length and branching, and proper use of punctuation like commas, semicolons, dashes, parentheses, and colons. It discusses how to combine sentences for smoother writing and avoid choppy sentences.
Web Performance Optimization: The Silver Bullet of SEO and UXJonathon Colman
The document is a presentation on web performance optimization that uses Twilight references and images as a comedic framing device. It discusses how site speed impacts SEO, user experience, conversion rates, and costs. It provides key metrics on these impacts and outlines five steps for optimizing performance, including studying best practices, using developer tools, setting caching headers, reducing duplicate assets, and implementing CSS sprites. The presentation concludes that performance work should be an ongoing process of measuring impacts and continually improving the site experience.
The document discusses trends in online video and visual communication. It notes that 80% of internet users view online video regularly, with YouTube receiving 20 hours of new video per minute. 1/3 of YouTube videos are shared. It also discusses the rise of video on devices like Roku and ways people are incorporating video into social media like Facebook. It provides tips for online video storytelling like using strong visuals and audio over narration.
The document summarizes the marketing campaign for the 2010 film Inception. It describes 10 steps taken to target an intellectual audience aged 16-30, generate curiosity about the film's complex plot without fully revealing it, and build buzz through clues and puzzles online and in viral games/apps. Traditional techniques like posters, trailers and TV spots were also used but focused on intrigue rather than explaining the storyline. The campaign emphasized secrecy and puzzle-solving to engage viewers and ensure they experienced the full plot for themselves in theaters.
Adapting to Responsive Design - On The Edge Conference #edgebrumMatt Gibson
My slides from On The Edge Birmingham 2014 on 3rd July 2014 (#edgebrum). My talk was about the principles of responsive web design with real world experiences of how Cyber-Duck approached responsive design for our own website.
Adapting to Responsive Web Design - Marketing Week Live 2014 - 26, June 2014Matt Gibson
This document discusses adapting websites to responsive web design. It defines responsive design as creating interfaces that react quickly and positively to user conditions. It notes that people access websites in many ways, so responsive design aims to have one code base that works across devices rather than separate mobile sites. The document outlines four goals for responsive design: content parity across devices, speed optimization, future-proofing the design, and accessibility. It provides examples and tips for achieving each goal, such as conducting content audits, optimizing images, caching, and designing first for touch interfaces. The results of implementing responsive design on one website included increased mobile traffic and conversions as well as reduced exit rates.
Adapting to Responsive Design - HCID2014, 24 April 2014Matt Gibson
This document discusses adapting websites to responsive web design. It defines responsive design as creating interfaces that react quickly and positively to user conditions. It notes that people access websites in many ways, so responsive design aims to have one code base that works across devices rather than separate mobile/desktop sites. The document outlines four goals for responsive design: content parity across devices, speed/performance, future-proofing the design, and accessibility. It provides examples and recommendations for achieving each goal, such as researching content needs, optimizing assets, progressive enhancement, and testing accessibility. The results of implementing responsive design are shown to be a 200% increase in mobile traffic and 43% increase in conversions, with a 4000% reduction in homepage exit rates on
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duckCity University London
We can no longer predict how people are accessing our websites
now, let alone in a few years’ time when the technology people use
to access the web will inevitably diverge even further and perhaps in
ways we haven’t even considered yet. Rather than seeing this unpredictability and lack of control as a problem, we should embrace
these ‘known unknowns’ and the inherent flexibility of the web.
Put simply, responsive web design is about being more flexible and assuming less about our users, from how they’re accessing our websites and what technology they’re using to their environment. This talk will discuss the four tenets of good responsive design: content parity, performance, future friendliness and accessibility against a backdrop of Matt's experiences designing and building responsive websites over the past 3 years with plenty of useful tips and takeaways along the way.
Adapting to a Responsive Web Design - TFM&A - 26-02-14Matt Gibson
We can no longer predict how people are accessing our websites now, let alone in a few years’ time when the technology people use to access the web will inevitably diverge even further, and perhaps in ways we haven’t even considered yet. Rather than seeing this unpredictability and lack of control as a problem, we should embrace these ‘known unknowns’ and the inherent flexibility of the web. Put simply, responsive web design is about being more flexible and assuming less about our users, from how they’re accessing our websites and what technology they’re using to their environment.
Responsive Web Design: buzzword or revolution?Wojtek Zając
- Responsive web design (RWD) is the latest buzzword and may be the new revolution in web design as the mobile phone population grows significantly
- 46% of the world's population has a mobile phone and over 1 billion smartphones are used worldwide, with 59% of owners using their smartphone daily
- Websites need to be designed for all devices through responsive design which adapts the interface for different screen sizes rather than having a separate mobile site
- The three main steps for responsive design are using media queries, adapting the interface, and optimizing responsive images and media for performance
The document discusses the challenges of responsive web design and creating content that works across different devices and browsers. It emphasizes designing with performance, content strategy, and future flexibility in mind. Key challenges include dealing with a variety of screen sizes, browsers, and connection speeds, as well as unpredictably evolving technologies. The document advocates for progressive enhancement and putting user needs above consistency across platforms.
Unicorns may exist but they are few and far between, so in this talk we’ll look at how we can all be an equally magical but very real one horned creature. Let’s be UX Narwhals. In this talk we’ll look at a few simple, fast, and low cost methods to attack everything from user research to design collaboration.
Web3.0- How brands can take advantage of the semantic shift - BrandsentialJeffrey V
Web 3.0 will bring a fundamental shift in the way we interact with data online. Along the way, there will be opportunities to create the next Google or just understand how brand engagement will evolve……
The document discusses several topics related to mobile devices and responsive web design. It provides statistics on mobile phone and internet usage globally and examples of how mobile apps and responsive design are helping refugees. It also discusses the importance of responsive design principles like flexible layouts, media queries and responsive images to provide optimal experiences across different sized screens.
It’s 2013. The shift to mobile is well and truly upon us, we’re at the transition point where Mobile Internet overtakes Desktop Internet usage and there is no going back. If you’re not designing responsively now then you better get cracking because what comes next is a big change to the way we design and build web experiences for humans.
The shift to mobile started making us think about devices, however almost all of our discussion is around what devices we support and where do we set our breakpoints. Could this focus on device capability be masking something bigger happening in the way humans are starting to behave with the web?
What if the fragmentation we’re seeing on Android is merely a glimpse into the device fragmentation of the future? What happens when a users’ experience can range from the interface of a watch to that of a building? How do we communicate with someone when they are walking down the street trying to locate something compared to kicking back on the sofa? How do we even know when they are doing one and not the other?
Contextually Responsive Design is quickly going to become a necessity - but this isn’t personalisation 2.0 or Content First under a different name. To truly design engaging experiences we need to consider how context shapes our behaviour. As Web Designers and Developers we’ve traditionally worked with people “sitting down to compute”. What happens when someone no longer wants to sit down at a computer to do something; ever?
This talk will start from the point of late 2013 and look forward six years. How do we expect people to behave? How will we design systems to cope, and what are the contexts in which people will use the web during its next age?
Given at Melbourne Be Responsive on 10 September 2013.
The web you were used to is gone. Architecture and strategy for your content.Alberta Soranzo
Information architecture and content strategy are the foundation of any website but, when it comes to mobile, they can literally mean the life or death of a product. The truth is that even the best-designed and well-engineered mobile products can still fail if their IA is not sound, and that’s because mobile information architecture doesn’t only define the structure of content, but also determines how users will interact with it. And speaking of content, do you know what content should go on your mobile sites and apps? Are your users finding what they came for?In this talk we will take a look at the thought process that drives mobile content strategy, the specific challenges and opportunities of the mobile space and how information architecture and content strategy contribute to the creation of outstanding cross-channel experiences.
75 Tutorial presented at UX Scotland 2014
This document summarizes a web designer's predictions for 2011, including:
1. Flash usage dropped significantly as HTML5 and JavaScript became preferred over Flash for interactive features.
2. Print media continued moving to web-based formats, with a focus on the growing tablet market.
3. Hardware-accelerated browsers offloaded processing to remote servers, though performance remained limited without sufficient cached content.
4. Television and the internet increasingly integrated, with live streaming, social media discussion of shows, and control of TV from multiple devices.
This document summarizes a web designer's predictions for 2011, including:
1) Flash usage dropped significantly as HTML5 and JavaScript became preferred over Flash for interactive features.
2) Print media continued moving to web-based formats, with a focus on the growing tablet market.
3) Hardware-accelerated browsers offloaded processing to remote servers, though performance remained limited without sufficient cached content.
4) Television and the internet increasingly integrated, with live streaming, social media discussion of shows, and control of TV from multiple devices.
The Elephant and the Dassie: A Tale of Evolution and KinshipKerry-Anne Gilowey
The evolution of our work and environment has produced new relationships between disciplines, within digital teams, across organisational verticals, in our local design and tech community, and across borders. I gave this talk as the keynote presentation at the UX Craft conference in Cape Town, South Africa on 4 October 2014.
This document summarizes a web designer's predictions for 2011, including:
1) Flash usage dropped significantly as HTML5 and JavaScript became preferred over Flash for interactive features.
2) Print media continued moving to web-based formats, with a focus on the growing tablet market.
3) Hardware-accelerated browsers offloaded processing to remote servers, though performance remained limited without sufficient cached content.
4) Television and the internet increasingly integrated, with live streaming, social media commentary, and control of TV from multiple devices.
Semantic Web: In Quest for the Next Generation Killer AppsJie Bao
The document discusses the potential for killer apps on the Semantic Web. It outlines key Semantic Web standards like RDF, SPARQL, and OWL that add meaning to data on the web. Examples are given of semantic data from sites like BestBuy, Facebook, LinkedIn, and IMDB. Current Semantic Web applications are presented in areas like finance, mapping, email, and data visualization. The document argues that as more data becomes linked and understandable by machines, new and useful applications can be imagined in domains like social media, transportation, and entertainment. The vision is that as the Semantic Web continues to grow, it will unlock new possibilities limited only by our imaginations.
The document provides information on various media companies and their websites, including Time Warner, Warner Bros., Sports Illustrated, Southern Living, People, Entertainment Weekly, AOL, MapQuest, Popeater, Fanhouse, Edmund Weber Jewelers, Green Daily, Weblogs Inc., and That's Fit. It also includes a job description for an intern position at Warner Bros. and contact information for Megan Piper.
Ähnlich wie Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 September 2014 (20)
Business X Design - Digital for People, Product, and Planet - an Intersection...Matt Gibson
Matt Gibson, Chief Commercial Officer at Cyber-Duck, presented on designing digital products with people and the planet in mind through an intersectional approach. He discussed how poor digital design can negatively impact users, society, and the environment by wasting resources. Gibson proposed 10 foundations for sustainable design, including designing for "less is more" through content and technical optimization, accessibility planning, lean data collection, and focusing on findability and tasks. The goal is intersectional design that considers individuals, organizations, society, and the environment to deliver meaningful experiences through usable, efficient and sustainable digital products.
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH Matt Gibson
Matt Gibson, Chief Commercial Officer at Cyber-Duck, discusses the need for an intersectional approach to digital design that considers both people and the planet. He outlines how poor digital design can negatively impact users, society and the environment by wasting resources. Gibson then provides 10 foundations for sustainable web design, such as reducing content footprints, prioritizing accessibility, optimizing assets and collecting only necessary data. The talk emphasizes that digital design must change to become more sustainable through research, lean practices and iterative improvements.
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018Matt Gibson
This was a talk I gave at Leeds Digital Festival 2018, on 27/04/18.
I look at how we can get the whole team more involved in the design and research process, in particular more focussed on users and their needs. During the talk I explore the origins of empathy, and what empathy means for our businesses, and how we can teach our teams emotional intelligence and the language of design, through fun exercises like brainstorming evil ideas first, and creating empathy maps, that get the whole team onboard, we create more successful products and services.
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...Matt Gibson
The document is a thread of tweets by @duckymatt discussing the value of considering "bad ideas" or taking the perspective of a "super villain" in the design process. The tweets suggest that starting with bad ideas can help designers overcome collaborative fixation, see more possibilities, and build empathy for users' needs. Considering why an idea may be terrible and flipping it into something positive can inspire new ideas that are user-centric and encourage creativity in coming up with solutions. Taking this unconventional perspective of a "super villain" or "bad ideas" can ultimately help designers generate better designs by gaining empathy for all user perspectives.
Designing the client experience - #FOWD - April 2015Matt Gibson
This document provides tips and advice for working with clients effectively. It emphasizes establishing empathy, trust, and communication. Some key points include actively listening to clients, managing expectations, being reliable, giving regular updates, involving clients in the design process, and structuring feedback constructively. Both challenges and rewards of client work are discussed. The overall message is that client relationships are about understanding different perspectives and collaborating as equals.
User Centred Design - Designing Better Experiences - General Assembly - April...Matt Gibson
This document summarizes the user-centered design process undertaken to redesign the customer portal experience for a debt recovery company. The design team conducted stakeholder interviews, user research including personas and analytics, cross-channel responsive design, testing, and iterative prototyping. The result was a 72.5% increase in online transactions, 66% increase in revenue, and 40 hours of agent time saved per month in the first 7 months since launch. The document emphasizes the importance of understanding user needs through research in order to create positive experiences.
Designing Better Experiences - A Digital Masterclass for the Financial Sector...Matt Gibson
A Digital Masterclass presented at http://www.masterclassing.com/events/digital-finance-london/ on 18th November 2014. This was a case study showing the value of user experience in the finance sector, looking at how Cyber-Duck applied human-centred design principles to the design of a hugely successful cross-channel experience for dlc.
Working with Clients Better - Untangle the Web - 24 September 2014Matt Gibson
Empathy, trust, and communication are key facets of building strong client relationships. Designers should actively involve clients throughout the design process to gain their perspectives, manage expectations, and avoid surprises. Regular communication and transparency help build trust, while workshops expose clients directly to research. Respecting the client's goals and providing constructive feedback geared toward solutions can help projects succeed. Overall, learning from past client experiences helps designers strengthen relationships and work.
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Matt Gibson
These are the slides from my talk "Adapting to a Responsive Design" I gave at Untangle The Web on 29th July 2013. The talk was adapted from my case study of the same name on Smashing Magazine: http://mobile.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/ about cyber-duck.co.uk's responsive re-design.
Adapting to Responsive UX Design - Digital Shoreditch 2013Matt Gibson
These are the slides from the workshop I gave at the 'Make & Do' weekend of Digital Shoreditch 2013 - They explore the challenges and opportunities web & UX designers are faced with when it comes to responsive web design (RWD). I shared experiences, techniques and general approaches from the work we do at Cyber-Duck: www.cyber-duck.co.uk.
Slides from the workshop @danny_bluestone and @duckymatt from Cyber-Duck Ltd gave at UX London 2013. The workshop focused on how by putting the user at the centre of design decisions you can deliver a better experience. With a mixture of theory and hands-on activities the workshop covered user research, activity mapping, card sorting and participative sketching techniques.
Architectural and constructions management experience since 2003 including 18 years located in UAE.
Coordinate and oversee all technical activities relating to architectural and construction projects,
including directing the design team, reviewing drafts and computer models, and approving design
changes.
Organize and typically develop, and review building plans, ensuring that a project meets all safety and
environmental standards.
Prepare feasibility studies, construction contracts, and tender documents with specifications and
tender analyses.
Consulting with clients, work on formulating equipment and labor cost estimates, ensuring a project
meets environmental, safety, structural, zoning, and aesthetic standards.
Monitoring the progress of a project to assess whether or not it is in compliance with building plans
and project deadlines.
Attention to detail, exceptional time management, and strong problem-solving and communication
skills are required for this role.
International Upcycling Research Network advisory board meeting 4Kyungeun Sung
Slides used for the International Upcycling Research Network advisory board 4 (last one). The project is based at De Montfort University in Leicester, UK, and funded by the Arts and Humanities Research Council.
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
Practical eLearning Makeovers for EveryoneBianca Woods
Welcome to Practical eLearning Makeovers for Everyone. In this presentation, we’ll take a look at a bunch of easy-to-use visual design tips and tricks. And we’ll do this by using them to spruce up some eLearning screens that are in dire need of a new look.
19. FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND
SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Universal TV
20. ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
23. 1
KAREN MCGRANE
You don't get to decide which
device people use to access
your website.
Source: http://alistapart.com/article/your-content-now-mobile
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
31. 71% OF PEOPLE EXPECT WEBSITES
TO LOAD AS QUICKLY (OR FASTER)
ON THEIR MOBILE PHONE
2
See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf
32. BRAD FROST
It’s time for us to treat
performance as an essential
design feature, not just as a
technical best practice.
Photo credit: John Davey: http://www.flickr.com/photos/johndavey/8891059281/
Source: http://bradfrostweb.com/blog/post/performance-as-design/
2
33. PERFORMANCE AT THE HEART
OF ALL DESIGN DECISIONS
2
Copyright: Paramount Pictures,
Robert Stigwood Organisation,
Allan Car Production
46. JOHN ALLSOPP
We should embrace the fact that
the web doesn’t have the same
constraints [as the printed page]
and design for this flexibility.
http://alistapart.com/article/dao/
Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/
3
60. 1. DESIGN FOR TOUCH BY
DEFAULT
4
ARE YOUR DESIGNS FINGER FRIENDLY?
!
ARE YOU RELYING TOO HEAVILY ON HOVER?
61. 2. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE”
YOU’RE DOING IT WRONG
4
62. 3. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4
68. WANT TO LEARN MORE?
https://shop.smashingmagazine.com/responsive-web-design-vol-2.html
69. Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm
THANK YOU
@duckymatt
@cyberduck_uk