SlideShare a Scribd company logo
BEYOND
RESPONSIVE
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson
© Brad Frost
[In 2008] the majority of our visitors
saw our website in Internet
Explorer on a Windows computer on a
minimum 1,024 pixel wide screen.
Times have really changed.
“
Jason Samuels
IT Manager,
National Council on Family Relations
Source
Windows users used to comprise
93.5% of our web visits. Now that
percentage is 68.2%.
“

Recommended for you

Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement

Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/

rwdresponsive web designress
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps

These are the slides for my talk about jQuery Mobile and creating a jQuery Mobile web app from scratch with nothing more than a text editor.

ipadtablet computerhtml5
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?

The document discusses responsive images and issues around their implementation. It begins by outlining the new <picture> element and srcset/sizes attributes that allow images to adapt based on screen size and resolution. It then discusses challenges like managing many images, the need for image breakpoints to determine appropriate file sizes, and the tension between responsive images and the browser's lookahead parser. Overall, the document examines both the promise and difficulties of responsive images on the modern web.

responsive web designwebresponsive images
The percentage visiting from a mobile
device or tablet … was just
0.2% in 2008. It has since grown
exponentially to 14.4% today.“ 14.4%
[In 2008] 74.9% of our web visitors
used Internet Explorer. That 

number has fallen to 19.7%. 

Firefox now comprises 20%, 

Safari 16.7%, and Chrome 37%.
“
In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014 we detected
“
In the second quarter of 2008
we detected 71 different
screen resolutions among our
visitors. In the first quarter of
2014 we detected
“ 1062

Recommended for you

Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere

The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes. It recommends taking a mobile-first approach, using fluid layouts and media queries to make content responsive. Key tips include starting small and resizing the browser, using Chrome's device mode to emulate different devices, and the matchMedia API to bind JavaScript to breakpoints. The overall goal is to provide an optimal viewing experience across all devices.

responsive web designhtml5mobile web
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09

This document summarizes John Resig's presentation on the state of jQuery in 2009. It discusses recent releases of jQuery including versions 1.3, 1.3.1, and 1.3.2. It also outlines improvements to performance, features being added in upcoming versions, growing adoption on large sites, increasing traffic to jQuery.com, financial donations supporting development, and plans for conferences and community events.

javascriptjquery
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code

The document discusses creating mobile apps without using native code. It describes how mobile apps today are often created natively, but that native apps have disadvantages like being expensive to create and only working on specific platforms. The document then presents alternatives like mobile web apps and hybrid apps. It provides examples of how to build a basic mobile web app using HTML, CSS, and responsive design techniques like viewports and media queries to make the app work well on different devices.

web apphtml5jquery mobile
In 2008, 27 screen 

resolutions showed up with
more than 10 visits, in 2014
that number was“ 200
© Brad Frost
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]

Recommended for you

Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design

A session talk for #NAGW2012 on: Mobile app, choices Dreamweaver’s place Creating Mobile Design (actual design, not code) Other helpful Adobe tools to create HTML/CSS jQuery Mobile in DW PhoneGap Build in DW

mobilephonegapdreamweaver
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016

You can improve how well your website works and looks across different devices using responsive web design techniques. But did you know you can also improve access for all users, including those with disabilities, by applying responsive techniques? Learn how.

responsive webweb designmobile
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework

Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services. Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will: - learn what a mobile framework is. - acquire best practices in mobile Web development. - understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps. - recognize the differences between native and web apps. - have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned. - gain access after the webinar to a free Web server so you can see your mobile Web app live.

frameworksjquery mobilemobile web
Beyond Responsive [18F 2015]
Smartphones have reached
75% penetration in the US…
“ Source
…but that’s concentrated in
61% of households
U.S. Smartphone penetration #s
released in March 2015
Source
< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%

Recommended for you

High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web Design

The document discusses high performance web design. It covers measuring performance using tools like YSlow and PageSpeed, as well as techniques to improve performance such as reducing HTTP requests by combining scripts and stylesheets, using CSS sprites, and inline images. The document also discusses how performance impacts businesses and provides examples of component weights and grades for different websites according to YSlow rules. It emphasizes the importance of clear objectives, consistent design, and clean code for building high performance sites.

performance
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All

Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.

responsive designjquery uihtml5
ユーザーへより良いWebを提供するために
ユーザーへより良いWebを提供するためにユーザーへより良いWebを提供するために
ユーザーへより良いWebを提供するために

The document discusses responsive web design techniques for building websites that automatically adapt to different screen sizes and devices. It covers fluid grids that resize content areas proportionally, flexible images that scale nicely on different screens, and media queries that allow custom styling for different device widths. The document emphasizes building websites with a single responsive design that serves all devices rather than creating separate designs for each one. This reduces development effort and provides a better experience for users on both desktops and mobile.

responsive web designレスポンシブwebデザインmultiple devices
U.S. Smartphone penetration #s
released in March 2015
Source
$30k = Average US income 2013
< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%
< $30k
50%
$30-50k
71%
$50-75k
72%
>$75k
84%
Population(in
thousands)
0
30000
60000
90000
120000
<30k $30-50k $50-70k >$70k
U.S. Smartphone vs. Income distribution
Opportunity!
Smartphone users making < $30k/yr

experienced app errors

52% of the time
Source
Galaxy S5
5.1” (1920 × 1080)
2GB RAM
16GB Storage
16MP Camera
2.5GHz Quad-core
Android 4.4
$799

Recommended for you

Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development

Progressive enhancement is still an important approach for building responsive websites and web applications. While JavaScript can now be assumed to be widely available, progressive enhancement avoids single points of failure and improves performance by loading critical content first before non-essential enhancements. The distinction between websites and applications is also blurred, so progressive techniques remain applicable to most digital experiences on the web.

responsible web designadaptive web designawd
Lecture 1: Web Design + Usability
Lecture 1: Web Design + UsabilityLecture 1: Web Design + Usability
Lecture 1: Web Design + Usability

The document discusses 43 common web design mistakes that should be avoided. Some key points include: 1. Websites should clearly communicate their purpose within seconds to capture visitors' limited attention. 2. Content should be scannable through use of bullet points, headers and lists rather than large blocks of text. 3. Fonts must be readable on all devices and visitors should not need to zoom in to read content. 4. Forcing new windows, resizing browsers or requiring registration without reason will frustrate visitors. 5. Usability, readability and clarity should be prioritized over flashy or distracting design elements that interfere with the user experience.

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites

Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6 Includes a sample project built from scratch in Node.js using LESS available on Github

web designresponsive web designmobile
Galaxy S5
5.1” (1920 × 1080)
2GB RAM
16GB Storage
16MP Camera
2.5GHz Quad-core
Android 4.4
$799
Cloud FX
3.5” (480 × 320)
128MB RAM
256MB Storage
2MP Camera
1GHz Single-core
Firefox OS 1.3
$35
Galaxy S5
5.1” (1920 × 1080)
2GB RAM
16GB Storage
16MP Camera
2.5GHz Quad-core
Android 4.4
$799
Dash JR K
3.5" (480 × 320)
256 MB RAM
512MB Memory
2MP camera
1.3 GHz Dual-core
Android 4.4
$43
As of Q4 2014, 62% of new

non-phone AT&T subscriptions are

connected cars
Source
Beyond Responsive [18F 2015]

Recommended for you

Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols

The document discusses web standards and protocols as well as tips for good website design. It provides lists of "dos" and "don'ts" for website design. The "dos" include testing pages in multiple browsers, keeping layouts simple, writing clearly and concisely, and providing alternatives to images. The "don'ts" include linking to irrelevant material, overusing emphasis, and splitting topics across multiple pages.

The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]

Web forms are complex beasts with many moving parts. That’s one of the reasons they're so challenging to build well. In this session, Aaron Gustafson will walk you through the process of creating a form—from planning to production—and give you sage advice for improvement. You’ll learn ways to keep forms focused, how to leverage HTML5 for better user interaction, and a variety of design techniques to enhance forms’ usability. Whether you have one form or a thousand, you’ll leave this session with a much better handle on how to take them from distressing to delightful!

web formshtmlaccessibility
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]

Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint. In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including * new HTML5 field types; * validation, error messages & formatting hints; * how to mark up and style forms for the greatest flexibility in responsive designs; and * best practices for enhancing forms with JavaScript.

web formshtml5css3
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]

Recommended for you

Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]

The document discusses strategies for organizing and structuring HTML forms using semantic HTML5 elements and progressive enhancement principles. It recommends organizing forms as an unordered list of field "groups", with each group classified by the type of control it contains (e.g. "text", "email"). Within each group, it suggests labeling each field and adding explanatory notes. The document provides many code examples demonstrating how to implement different field types like text, email, numbers, dates and dropdowns using HTML5 form inputs.

javascriptformsweb design
Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]

With the exploding popularity of DOM Scripting, Ajax and JavaScript in general, it's important to know what to do -- and what not to do -- when dealing with these technologies.This session will walk you through several real-world examples, pointing out common mistakes that hinder usability, accessibility, and searchwhile teaching you ways to avoid them altogether, either programmatically or simply by altering the way you think about JavaScript-based interactivity.

uxjavascriptprogressive enhancement
Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]

Without forms, the web would not be what it is today, but they are challenging from a markup and styling standpoint. In this session, we'll explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including new HTML5 field types; validation, error messages & formatting hints; how to mark up and style forms for the greatest flexibility in responsive designs; and best practices for enhancing forms with JavaScript. By the end of this session you’ll be prepared to tackle whatever form-related challenges are thrown at you. You might even find yourself a little giddy over how awesome you can make them.

formscsshtml
Beyond Responsive [18F 2015]
© Brad Frost
We DON’T know
Beyond Responsive [18F 2015]

Recommended for you

Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]

This document provides guidance on designing accessible and user-friendly forms. It discusses best practices such as: - Using labels to associate each form control with its corresponding field - Specifying the type of input that is most appropriate for the data being collected - Allowing values to be auto-filled to reduce errors and ease the user experience - Clearly indicating which fields are required to submit the form - Providing helpful validation and error messages when invalid data is entered The document explores various HTML form elements and attributes that can be leveraged to improve accessibility and usability of forms on the web. Special consideration is given to supporting auto-fill functionality and native validation handling across browsers.

botsvoice uxhtml
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]

The document provides guidance on writing for engagement. It discusses identifying lifeless writing and clarifying goals and audience. It emphasizes writing with clarity, purpose, and style while establishing a shared voice and appropriate tone. The document suggests connecting with readers by maintaining consistency, taking the right tone for the content, and thinking through the message. It offers tips for using verbs, adjectives, adverbs and other literary techniques to write in an engaging way. The overall summary is that the document offers best practices for writing content that clearly engages the intended audience.

contentauthoringweb
Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]

Users are gradually becoming more accustomed to and reliant on voice-based interactions, so enabling users to complete critical tasks without a visual user interface is crucial for the long-term success of websites. This session shows how designing such a “headless” user interface is equivalent to designing the conversation you want to have with your users. Learn how to ensure that the technological decisions you make with respect to HTML, CSS, and JavaScript respect and support that conversation.

headless uisweb designspeech
We DON’T know
Even when
we think
we know,
WE ARE
PROBABLY
WRONG
So how
do we COPE?
Progressive
Enhancement

Recommended for you

Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]

Every decision we make affects the way real people experience our products. We've all heard the rallying cry for user-centered design, but even those of us who ascribe to that ideal often fall back on our own biases and instincts when it comes to making decisions about how people experience our content and our services. Sadly, this often means we make decisions we think will be good for our “users” - that anonymous, faceless crowd - rather than actually trying to understand the perspectives, surroundings, capabilities, and disadvantages of the actual people who we are here to serve. In this session, Aaron will explore why empathy is a good thing, how empathy empowers creativity, and how we, as a community, can inject more empathy into our work.

javascriptempathyweb design
Beyond Responsive [ConvergeSE 2015]
Beyond Responsive [ConvergeSE 2015]Beyond Responsive [ConvergeSE 2015]
Beyond Responsive [ConvergeSE 2015]

This document discusses how websites have changed significantly since 2008 in terms of the devices and browsers used to access them. Some key points made include: - The percentage of visits from mobile devices has grown exponentially from 0.2% in 2008 to 14.4% today. - The percentage of visits from Windows users has decreased from 93.5% to 68.2%, while visits from other browsers like Firefox, Safari, and Chrome have increased. - The number of detected screen resolutions has increased dramatically from 71 in 2008 to over 1000 in 2014, requiring responsive designs that adapt to different screen sizes.

Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]

Progressive Enhancement, the heart of Adaptive Design, makes the life of a design less complicated. Considerations like browser types, accessibility, device compatibility, and responsive or adaptive design are a lot to juggle. Start by creating a solid core and build out to craft amazing user experiences that work regardless of devices capabilities or deficiencies.

Technological

restrictions
UserExperience
Browser Capabilities
BASIC ADVANCED
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics

Recommended for you

Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]

In this session, Aaron Gustafson will explain the ins and outs of crafting rich Web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process. You will learn: * An understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web * A fresh perspective on interface design, grounded in the progressive enhancement philosophy * Ideas around how to tailor experiences based on device capabilities; * Solid strategies for determining how common UI components can be re-imagined in an adaptive fashion * A practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces

web designweb design and developmenthtml5
Beyond Responsive [Future of Web Design 2015]
Beyond Responsive [Future of Web Design 2015]Beyond Responsive [Future of Web Design 2015]
Beyond Responsive [Future of Web Design 2015]

Responsive web design has taken our industry by storm and with good reason; it helps us improve our reach with less effort. However, incorporating responsive design is not the goal, meeting our user’s needs is! Responsive design is not an end in itself… it’s just the beginning. We need to embrace the heterogenous nature of the web - myriad web-enabled devices with vastly different dimensions, screen sizes, networks, and capabilities used by countless individuals, each with their own special needs - and craft experiences that will work anywhere at any time. We need to build robust systems that adapt in ways far beyond aesthetics. If you or your team are responsible for creating interfaces on the web then this workshop is for you. All you’ll need is an open mind and rudimentary drawing skills but if you think better in code whether it's HTML, CSS, and/or Javascript, feel free to bring your laptop (but it’s not essential).

web designusabilityprogressive enhancement
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]

For years, designers and developers have griped about the difficulties they encountered in supporting the numerous desktop browsers out there, but mobile is even more fragmented. Phones, tablets, media players, video game systems—each device (and in some cases each browser on each device) has its own dimensions, quirks and capabilities. It can make your brain hurt just thinking about it. Thankfully, going mobile doesn’t have to be a painful experience. In this session, Aaron Gustafson will introduce you to the concept of progressive enhancement and demonstrate why it is the way forward for web design, especially on mobile devices. In the course of his talk, he’ll walk you through progressive enhancement’s layered approach and show you how the latest techniques—mobile first, responsive design, and adaptive UI—fit in to the process. Note: If you plan to take participate in Aaron’s workshop, Adaptive Web Design: Layer by Layer, you will want to attend this session or read the first chapter of Aaron’s book (free download) in order to get the necessary background. What You'll Learn: * What progressive enhancement is * How it’s different from ‘graceful degradation’ * How progressive enhancement leads to a better user experience

web designadaptive web designresponsive web design
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity
UserExperience
Browser Capabilities
BASIC ADVANCED
Content
Semantics
Design
Interactivity
Accessibility
UserExperience
Browser Capabilities
BASIC ADVANCED
Text & HTTP
HTML
CSS
JavaScript
¶
<>
{}
↖
ARIA

Recommended for you

Intro to Adaptive Web Design [ChaDev Lunch]
Intro to Adaptive Web Design [ChaDev Lunch]Intro to Adaptive Web Design [ChaDev Lunch]
Intro to Adaptive Web Design [ChaDev Lunch]

This document summarizes key changes in web usage over the past decade that have necessitated responsive and adaptive web design approaches. It notes that desktop usage has declined while mobile usage has grown exponentially, with over 50% of US households now owning smartphones. Browser and device fragmentation has also increased dramatically. The document then introduces concepts of responsive web design like fluid grids, flexible images and media queries to build websites that can adapt to different screens. It emphasizes the importance of progressive enhancement and graceful degradation to ensure accessibility across browsers. Overall it argues for content-first, semantics-based approaches to building websites that can provide good experiences across devices.

cssprogressive enhancementaccessibility
Planning Adaptive Interfaces [From the Front 2013]
Planning Adaptive Interfaces [From the Front 2013]Planning Adaptive Interfaces [From the Front 2013]
Planning Adaptive Interfaces [From the Front 2013]

How do you plan for the unknown? The answer is obvious—you can’t—but that’s not a bad thing. Unknowns can be scary, but they also create opportunity. On the web, it’s tempting to focus our effort around what we know (or think we know) about our customers based on analytics data we’re collecting and our own experience of the web. Similarly, we often get hung up on trying to give every customer the exact same experience of our product. What we need to realize, however, is that analytics and anecdotal knowledge only get you so far. Our customers’ access and experience of the web is highly variable, deeply personal, and, more often than not, completely out of our control. But take heart, all is not lost. By being flexible in our approach and embracing the unknown, we can create user experiences that are intended to vary from device to device, browser to browser, and network to network. In this workshop, Aaron Gustafson will explain the ins and outs of crafting rich web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process. You’ll leave with: * an understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web; * a fresh perspective on interface design, grounded in the progressive enhancement philosophy; * ideas around how to tailor experiences based on device capabilities; * solid strategies for determining how common UI components can be re-imagined in an adaptive fashion; and * a practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces.

uxaccessibilityprogressive enhancement
Planning Adaptive Interfaces [dConstruct Workshop 2013]
Planning Adaptive Interfaces [dConstruct Workshop 2013]Planning Adaptive Interfaces [dConstruct Workshop 2013]
Planning Adaptive Interfaces [dConstruct Workshop 2013]

The document discusses planning adaptive interfaces for different screen sizes and browsers. It suggests using progressive enhancement and graceful degradation to create interfaces that work across devices. Specific techniques discussed include lazy loading images, creating tabbed interfaces, and adding ARIA roles for accessibility. The document provides examples of how to build interfaces like carousels, galleries, tables and more using these principles.

uxprogressive enhancementaccessibility
HTML
HTML
HTML5
Microformats
HTML4
Browsers ignore
what they don’t
understand
I like an escalator because
an escalator can never break,
it can only become stairs.
— Mitch Hedberg

Recommended for you

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design

Responsive web design refers to a website designed to adapt to whatever device a visitor is using. Responsive web sites are designed to provide an optimal viewing experience across all platforms. In this presentation, you'll find benefits and basic principles of Responsive Web Design.

webresponsivemobile
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]

The concept of progressive enhancement is the way forward for web design, especially on mobile devices. Aaron Gustafson shows you how the latest techniques - mobile first, responsive design, and adaptive UI - fit in to the process.

htmlmobile firstresponsive design
Planning Adaptive Interfaces [Breaking Development Nashville 2013]
Planning Adaptive Interfaces [Breaking Development Nashville 2013]Planning Adaptive Interfaces [Breaking Development Nashville 2013]
Planning Adaptive Interfaces [Breaking Development Nashville 2013]

How do you plan for the unknown? The answer is obvious—you can't—but that's not a bad thing. Unknowns can be scary, but they also create opportunity. On the web, it's tempting to focus our effort around what we know (or think we know) about our customers based on analytics data we're collecting and our own experience of the web. Similarly, we often get hung up on trying to give every customer the exact same experience of our product. What we need to realize, however, is that analytics and anecdotal knowledge only get you so far. Our customers' access and experience of the web is highly variable, deeply personal and, more often than not, completely out of our control. But take heart, all is not lost. By being flexible in our approach and embracing the unknown, we can create user experiences that are intended to vary from device to device, browser to browser, and network to network. In this workshop, Aaron Gustafson will explain the ins and outs of crafting rich web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the proces. You'll leave with: * an understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web; * a fresh perspective on interface design, grounded in the progressive enhancement philosophy; * ideas around how to tailor experiences based on device capabilities; * solid strategies for determining how common UI components can be re-imagined in an adaptive fashion; and * a practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces.

web designweb developmentprogressive enhancement
Graceful
Degradation
Modern
Browsers
Older Browsers
Modern
Browsers
Older Browsers
Beyond Responsive [18F 2015]

Recommended for you

Mixd RWD Workshop
Mixd RWD WorkshopMixd RWD Workshop
Mixd RWD Workshop

This document introduces responsive web design, which creates flexible and fluid web content that adapts to different devices. The key principles of responsive design are to be device agnostic, build mobile-first, have a resolution-independent and fluid approach, and optimize for performance. Responsive design involves a process of designing across various screen sizes without creating separate fixed-width comps, and using relative units, media queries, and fluid grids when building websites.

Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web

This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.

pinkoicoscupmobile web
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it

This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code

androidmobileiphone
a dynamic web page can
never break, it can only
become a web page.
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]

Recommended for you

Planning Adaptive Interfaces [UXLx 2013]
Planning Adaptive Interfaces [UXLx 2013]Planning Adaptive Interfaces [UXLx 2013]
Planning Adaptive Interfaces [UXLx 2013]

How do you plan for the unknown? The answer is obvious—you can’t—but that’s not a bad thing. Unknowns can be scary, but they also create opportunity. On the web, it’s tempting to focus our effort around what we know (or think we know) about our customers based on analytics data we’re collecting and our own experience of the web. Similarly, we often get hung up on trying to give every customer the exact same experience of our product. What we need to realize, however, is that analytics and anecdotal knowledge only get you so far. Our customers’ access and experience of the web is highly variable, deeply personal, and, more often than not, completely out of our control. But take heart, all is not lost. By being flexible in our approach and embracing the unknown, we can create user experiences that are intended to vary from device to device, browser to browser, and network to network. In this workshop, Aaron Gustafson will explain the ins and outs of crafting rich web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the proces. You’ll leave with: * an understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web; * a fresh perspective on interface design, grounded in the progressive enhancement philosophy; * ideas around how to tailor experiences based on device capabilities; * solid strategies for determining how common UI components can be re-imagined in an adaptive fashion; and * a practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces.

progressive enhancementmobilemobile web
Responsive web design
Responsive web designResponsive web design
Responsive web design

An introduction to responsive web design and why it is important. Source code is from my latest book, High Performance Single Page Web Applications (http://amzn.to/1a55L89). Source code is on GitHub, https://github.com/docluv/movies.

html5responsive web designcss3
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal

The document discusses pushing the boundaries of user experience with Drupal. It talks about using responsive design and progressive enhancement to build websites that automatically adapt to different screen sizes like desktop, tablet, and mobile. Responsive design uses CSS media queries and a fluid, data-driven approach to layouts. This allows a single website to effectively serve users on any device. The document recommends using responsive frameworks like Omega or Mojo themes for Drupal, and discusses building custom "UX modules" to enhance the user experience for different devices.

drupaluser experience
๏Bugs
๏Browser Add-ons
๏Overzealous Firewalls
๏Underpowered devices
๏Page is still loading
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]

Recommended for you

Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern Web

Evolving mobile hardware and networks have made it challenging for web sites to deliver an optimal experience to each client. If you send the same image to both a WiFi Retina tablet and a 3G phone, you compromise speed and bandwidth cost against image quality. We'll look at using HTML and CSS image markup, CDNs, HTTP caching directives and how WPO can deliver a great UX with minimal effort.

wpopagespeedvelocityconf
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques. I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.

responsive designmedia queriesmobile
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges

The document discusses progressive web apps (PWAs) and outlines key considerations for creating a PWA. It addresses questions around what a PWA is, how to make a website feel like an app, offline functionality, push notifications, and creating a roadmap. Examples from companies that implemented PWAs successfully are provided. The conclusion recommends developing a progressive roadmap that starts with baseline PWA features and builds out functionality over time based on priorities and initiatives.

progressivewebapp
SPoF
Graceful Degradation Progressive
Enhancement
Content
Beyond Responsive [18F 2015]

Recommended for you

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]

Aaron Gustafson presented on delivering critical information and services during times of crisis. Some key points from the presentation include: - Access to the internet is essential for participating in the modern world but many people and places still lack access or have unreliable access. - During times of crisis like natural disasters, the lack of internet access can have severe consequences and exacerbate problems. - We need to plan for network issues by optimizing websites and applications to work well even on slow or unreliable connections through techniques like using small static files and caching content.

inclusive designaccessibilityusability
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]

This was a guest lecture I did on Progressive Enhancement for Peter-Paul Koch’s class on Browser Technologies

progressive enhancementaccessibilityusability
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.

htmlariahtml5
Beyond Responsive [18F 2015]
Mobile
First
Responsive
Web Design
:-)
BEYOND RESPONSIVE
Lightboxes
BEYOND RESPONSIVE
Lightboxes

Recommended for you

Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]

The document provides an overview of progressive web apps (PWAs) through a presentation by Aaron Gustafson. Some key points include: - PWAs are web applications that use modern web capabilities like HTTPS, manifest files, and service workers to deliver native-app-like experiences. - Technically, PWAs use HTTPS, a web app manifest, and service workers to enable features like offline support, push notifications, and app installation. - Examples are given of companies that saw engagement and business metrics improve after adopting PWAs, like Starbucks, Tinder, and Trivago. - The presentation walks through creating a basic manifest file and registering a service worker to enable core P

progressive web appspwasweb app manifest
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?

For the last three years, our industry has been coming to terms with Progressive Web Apps (PWAs) and what they mean for the work we do every day. Scores of articles, reams of documentation, and dozens of white papers touting the successes and failures in this space can really get your head spinning. It’s easy to get lost in the complexities of service workers, manifests, and oh so many JavaScript frameworks and toolkits. Aaron believes it’s time to take a step back and refocus our attention on what really matters: building great web experiences. In this session, you’ll learn how to apply modern web design and development best practices to your web projects. You’ll learn how to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.

progressive web appsprogressive enhancementpwas
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]

Our industry is abuzz with talk about Progressive Web Apps (PWAs) and with good reason: they are a great way to improve the experiences our users have on our sites, especially when it comes to performance. Using Service Workers—a key component of PWAs—we can manage network requests and the cache to an incredibly granular degree. We can also totally abuse the privilege Service Workers grant us when it comes to writing files to disk. In this session, Aaron Gustafson will discuss some of the potential pitfalls in implementing Service Workers, especially when it comes to managing heavy files like images and video. He’ll provide guidance on current best practices in cache management. And he’ll offer a few simple recipes you can put to use right away to deliver amazing experiences for your users that respect their data usage and disk space.

progressive web appspwasweb design and development
BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad
BEYOND RESPONSIVE
IxMap
JS?
No
No lightboxLoad
BEYOND RESPONSIVE
IxMap
No
Yes
Verify browser
width condition
LIVE
JS?
No
No lightboxLoad
BEYOND RESPONSIVE
IxMap
No
Yes
Verify browser
width condition
LIVE
JS?
No
No lightboxLoad

Recommended for you

Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]

After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain. One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.

progressive enhancementweb designweb development
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.

html5ariaaccessibility
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]

Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.

accessibilityweb designweb development
BEYOND RESPONSIVE
IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify browser
width condition
LIVE
BEYOND RESPONSIVE
IxMap
No
JS?
No
No lightboxLoad
Yes
Yes
Lightbox
Create link
Make image clickable
Verify browser
width condition
LIVE
BEYOND RESPONSIVE
No need to link
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt="">
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>
BEYOND RESPONSIVE
Make the connection
<figure id="fig-1">
<img src="/path/small.png"
data-enlarged="/path/large.png"
alt=""
class="enlargable">
<p class="enlarge"><a href="#enlarge">Click to
Enlarge</a></p>
<figcaption>
<h6>Retreats 4 Geeks</h6>
<p>We built this site for our intimate retreat series.</p>
</figcaption>
</figure>

Recommended for you

PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]

The document discusses progressive enhancement and building frontend features on GitHub.com without relying on JavaScript libraries like jQuery, instead using regular HTML and only adding JavaScript behaviors progressively. It notes that as a result, UI elements enhanced with JavaScript would still work with JavaScript disabled in the browser by having an HTML foundation.

progressive web appsprogressive enhancementpwas
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.

voice uxhtml5html
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.

htmlariaaccessibility
BEYOND RESPONSIVE
Lightboxes
BEYOND RESPONSIVE
Thumbnails
BEYOND RESPONSIVE
Thumbnails
BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad

Recommended for you

Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]

Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.

performanceweb designweb development
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone

We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.

accessibilityhtmlvoice ux
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]

Aaron Gustafson Author, Adaptive Web Design Performance as User Experience Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.

performanceweb designweb development
BEYOND RESPONSIVE
IxMap
JS?
No
No imageLoad
BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Verify browser
width condition
BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Verify browser
width condition
BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition

Recommended for you

Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]

The document discusses optimizing website performance as an important part of user experience. It provides examples of how to improve performance by using native browser features, only including necessary assets, optimizing assets, and carefully managing when assets are loaded. Specific techniques mentioned include using semantic HTML, preconnecting to domains, preloading critical resources, minifying files, leveraging content delivery networks, and avoiding blocking dependent scripts. The overall message is that digital performance impacts user behavior and business metrics, so designers must prioritize optimizing load times and reducing friction throughout the user experience.

csshtml5javascript
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2

This document discusses advanced design methods for building responsive web layouts. It covers using flexbox and grid for layout control, handling breakpoints and special cases, and designing content teasers. It also discusses pros and cons of using frameworks versus building custom frameworks tailored to specific projects' needs and goals.

cssgridflexbox
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1

This document provides an overview of advanced design methods for building responsive web designs. It discusses fluid grids that adapt to different screen sizes, flexible media like images that scale appropriately, and media queries that allow scoping CSS styles based on screen characteristics. The document emphasizes starting with the smallest screen size and adding larger breakpoints as needed. It also compares mobile-first and desktop-first approaches, noting that the focus should be on layout defaults. The overall process of design is broken down into steps like focusing on essential information, writing things out, considering semantics, designing for comprehension and different interaction methods.

cssresponsive web designprogressive enhancement
BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
BEYOND RESPONSIVE
There is no image…
<p class="entry-image"
data-image-src="/i/sample.jpg"></p>
BEYOND RESPONSIVE
Until there is
<p class="entry-image"
data-image-src="/i/sample.jpg"></p>
<p class="entry-image"
data-image-src="/i/sample.jpg"
data-has-image="true">
<img alt="" src="/i/sample.jpg"/>
</p>

Recommended for you

Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]

This document discusses designing accessible and user-friendly forms on the web. It recommends using labels to associate each form control with its label, marking required fields clearly, using the appropriate input type like email for email fields, and enabling autofill so users can easily fill out forms with information they've provided before. It also suggests considering progressive enhancement and ensuring forms work without JavaScript. The goal is to design forms that are intuitive for users to complete without unnecessary obstacles.

web designaccessibilityprogressive enhancement
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]

After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain. One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it. In this talk, Aaron will discuss and dissect several adaptive interfaces and demonstrate how they smartly morph to meet their users’ needs — slow connections, older browsers, narrow screens, and even no screens at all. He’ll also introduce you to a battle-tested tool for planning, discussing, building and testing adaptive interfaces.

progressive enhancementuxinterfaces
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023 https://arxiv.org/abs/2307.12980

BEYOND RESPONSIVE
CSS at rest
[data-image-src] {
display: none;
}
BEYOND RESPONSIVE
CSS at play
[data-image-src][data-image-loaded] {
display: block;
}
BEYOND RESPONSIVE
JS Watcher
window.watchResize = function(callback)
{
var resizing;
function done() {
clearTimeout( resizing );
resizing = null;
callback();
}
window.onresize = function(){
if ( resizing ) {
clearTimeout( resizing );
resizing = null;
}
resizing = setTimeout( done, 50 );
};
callback();
};
BEYOND RESPONSIVE
JS Watcher
var browser_width = 0;
window.watchResize(function(){
browser_width = window.innerWidth ||
document.body.offsetWidth;
});

Recommended for you

What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter

Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.

How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx

Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.

rpa in transportationrpa in transportation industryrpa in transportation sector
BEYOND RESPONSIVE
JS Watcher
window.watchResize(function(){
var threshold = 400,
image = document.createElement('img'),
paragraphs = document.getElementsByTagName('p'),
i = paragraphs.length,
p, loaded, src, img;
if ( browser_width >= threshold ) {
image.setAttribute('alt','');
while ( i-- ) {
p = paragraphs[i];
src = p.getAttribute('data-image-src');
loaded = p.getAttribute('data-image-loaded');
if ( src != null && loaded == null ) {
img = image.cloneNode(true);
img.setAttribute('src',src);
p.appendChild( img );
p.setAttribute('data-image-loaded','');
}
}
image = paragraphs = p = img = null;
}
});
BEYOND RESPONSIVE
IxMap
No
JS?
No
No imageLoad
Yes
Yes
Image
Adjust markup
Add custom CSS
Verify browser
width condition
LIVE
BEYOND RESPONSIVE
Smart CSS
[data-image-src][data-image-loaded] {
display: block;
}
BEYOND RESPONSIVE
Smart CSS
[data-image-src][data-image-loaded] {
display: block;
}
@media only screen and (min-width:400px) {
[data-img-src][data-image-loaded] {
display: block;
}
}

Recommended for you

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world

The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries: 1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes. 2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions. 3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines. 4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors. 5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering. 6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands. 7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems. 8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering. 9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively. Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.

fdmffffused deposition modeling
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
BEYOND RESPONSIVE
Thumbnails
http://is.gd/lazyloading_demo
http://is.gd/lazyloading_demo
http://is.gd/lazyloading_demo

Recommended for you

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf

As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models. This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through: - Standard ways of running dbt (and when to utilize other methods) - How Cosmos can be used to run and visualize your dbt projects in Airflow - Common challenges and how to address them, including performance, dependency conflicts, and more - How running dbt projects in Airflow helps with cost optimization Webinar given on 9 July 2024

apache airflowdbtdbt-core
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
http://is.gd/lazyloading_demo
BEYOND RESPONSIVE
NO!!!!
#reviews {
display: none;
}
@media only screen and (min-width:50em) {
#reviews {
display: block;
}
}
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad

Recommended for you

Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

Not so much to say

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges

accommodate the strengths, weaknesses, threats and opportunities of autonomous vehicles

automotive self-driving car technology
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

data privacyprivacy complianceai
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Hold for user action
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Verify browser
width condition
LIVE
No
Hold for user action
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE
No
Hold for user action
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE
No
Hold for user action

Recommended for you

Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx

MuleSoft Meetup on APM and IDP

mulesoftai
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024

Everything that I found interesting about engineering leadership last month

quantumfaxmachine
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE Click
No
Hold for user action
BEYOND RESPONSIVE
IxMap
JS?
No
LinksLoad
Yes
Yes
Reviews
Lazy Load the reviews
Verify browser
width condition
LIVE Click
No
Hold for user action
BEYOND RESPONSIVE
Lazy Loading
<section class="aux reviews" id="reviews">
<header id="tab-reviews">
<a href="reviews.html" class="disabled">…</a>
</header>
</section>
BEYOND RESPONSIVE
Lazy Loading
<section class="aux reviews loaded" id="reviews">
<header id="tab-reviews">
<a href="reviews.html" class="disabled open">…</a>
</header>
<div role="tabpanel">
<div id="p-reviews" aria-labeledby="tab-reviews">
<ol class="reviews-list">
<li>
<img src="images/avatar.png" alt="Commenter Name">
<div class="review-meta">
<h3>Awesome shirt!</h3>
<a href="#"><time datetime="2010-01-20" pubdate="">11/12/2011</time></a>
By Bruce Bosco
</div>
<div class="review-content">
<p>This shirt looks awesome and is really comfortable to wear. It did shrink
quite a lot when washed, but that could have just been how I ran it. All in all, it's my
favourite shirt, and I love wearing it.</p>
</div>
</li>

</ol>
</div>
</div>
</section>

Recommended for you

Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf

To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.

data recoverydatadiskwarrior
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems

Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states. In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing. Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides

If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights. During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to: - Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value - Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems - Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors - Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported - Look Ahead: Gain insights into where FME is headed with coordinate systems in the future Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!

http://is.gd/lazyloading_demo
BEYOND RESPONSIVE
Tabbed Interface
BEYOND RESPONSIVE
Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">

<ul class="tabs">
<li><a href="#">Overview</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
<div class="section">
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual

get-together with friends, our Pumpkin Pie will make

entertaining easy!</p>

</div>

</div>
BEYOND RESPONSIVE
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">

<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual

get-together with friends, our Pumpkin Pie will make

entertaining easy!</p>

<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep

dish pie crust</li>
<li> cup white sugar</li>

</ul>
<h2>Directions</h2>

</div>

Recommended for you

WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck

YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well. Some facts about WPRiders and why we are one of the best firms around: More than 700 five-star reviews! You can check them here. 1500 WordPress projects delivered. We respond 80% faster than other firms! Data provided by Freshdesk. We’ve been in business since 2015. We are located in 7 countries and have 22 team members. With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce. Our team members are: - highly experienced developers (employees & contractors with 5 -10+ years of experience), - great designers with an eye for UX/UI with 10+ years of experience - project managers with development background who speak both tech and non-tech - QA specialists - Conversion Rate Optimisation - CRO experts They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals. At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.

web development agencywpriderswordpress development
BEYOND RESPONSIVE
Cleaner approach
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">

<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual

get-together with friends, our Pumpkin Pie will make

entertaining easy!</p>

<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep

dish pie crust</li>
<li> cup white sugar</li>

</ul>
<h2>Directions</h2>

</div>
BEYOND RESPONSIVE
No JS, basic CSS
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad

Recommended for you

BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
BEYOND RESPONSIVE
Linear HTML
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface">

<h2>Overview</h2>
<img src="pie.jpg" alt="" />
<p>Whether you're hosting a festive party or a casual

get-together with friends, our Pumpkin Pie will make

entertaining easy!</p>

<h2>Ingredients</h2>
<ul>
<li>1 (9<abbr title="inch">in</abbr>) unbaked deep

dish pie crust</li>
<li> cup white sugar</li>

</ul>
<h2>Directions</h2>

</div>
BEYOND RESPONSIVE
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">

<ul class="tabs">
<li><a href="#folder-1">Overview</a></li>
<li><a href="#folder-2">Ingredients</a></li>
<li><a href="#folder-3">Directions</a></li>
<li><a href="#folder-4">Nutrition</a></li>
</ul>
<section id=”folder-1”>
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual

get-together with friends, our Pumpkin Pie will make

entertaining easy!</p>

</section>

</div>

Recommended for you

BEYOND RESPONSIVE
Tabbed
<h1>Pumpkin Pie</h1>
<div class="tabbed-interface TabInterface-enabled">

<ul class="tabs">
<li><a href="#folder-1">Overview</a></li>
<li><a href="#folder-2">Ingredients</a></li>
<li><a href="#folder-3">Directions</a></li>
<li><a href="#folder-4">Nutrition</a></li>
</ul>
<section id=”folder-1”>
<h2>Overview</h2>
<img src="pie.jpg" alt="">
<p>Whether you're hosting a festive party or a casual

get-together with friends, our Pumpkin Pie will make

entertaining easy!</p>

</section>

</div>
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Verify space
for tabs
LIVE
BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Verify space
for tabs
LIVE
No
Accordion
Build accordion

Recommended for you

BEYOND RESPONSIVE
IxMap
JS?
No
LinearLoad
Yes
Tabs
Split content into sections
Make tabs
Assign event handlers (mouse & keyboard)
Yes
Verify space
for tabs
LIVE
No
Accordion
Build accordion
BEYOND RESPONSIVE
JS?Load
IxMap
Yes
Tabs
Yes
Verify space
for tabs
LIVE
No
Linear
No
Accordion
Build accordion
<?>
Yes
Native
Insert details
& summary
Support details & summary?
BEYOND RESPONSIVE
role="tablist"
108
Adding ARIA
BEYOND RESPONSIVE
role="tab"
aria-selected="true"
aria-controls="folder-1"
Adding ARIA

Recommended for you

BEYOND RESPONSIVE
role="tab"
aria-selected="false"
aria-controls="folder-4"
Adding ARIA
BEYOND RESPONSIVE
role="tabpanel"
aria-hidden="false"
aria-labelledby="folder-1-tab"
Adding ARIA
BEYOND RESPONSIVE
Result!
BEYOND RESPONSIVE
Result!

Recommended for you

BEYOND RESPONSIVE
Tabbed Interface
Questions?
Tweet me at

@AaronGustafson
Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

More Related Content

What's hot

Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
Jason Grigsby
 
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Aaron Gustafson
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
Sven Wolfermann
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
Sven Wolfermann
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
Operation Mobile
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
Jason Grigsby
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
jeresig
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
Joakim Kemeny
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
Kate Walser
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web Design
Koji Ishimoto
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
ユーザーへより良いWebを提供するために
ユーザーへより良いWebを提供するためにユーザーへより良いWebを提供するために
ユーザーへより良いWebを提供するために
Shigeki Ohtsuki
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
Jonas Päckos
 
Lecture 1: Web Design + Usability
Lecture 1: Web Design + UsabilityLecture 1: Web Design + Usability
Lecture 1: Web Design + Usability
mcongdon
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
Steven Cahill
 

What's hot (19)

Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web Design
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
ユーザーへより良いWebを提供するために
ユーザーへより良いWebを提供するためにユーザーへより良いWebを提供するために
ユーザーへより良いWebを提供するために
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Lecture 1: Web Design + Usability
Lecture 1: Web Design + UsabilityLecture 1: Web Design + Usability
Lecture 1: Web Design + Usability
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 

Viewers also liked

The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]
Aaron Gustafson
 
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]
Aaron Gustafson
 
Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]
Aaron Gustafson
 
Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]
Aaron Gustafson
 
Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]
Aaron Gustafson
 
Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]
Aaron Gustafson
 
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]
Aaron Gustafson
 
Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]
Aaron Gustafson
 
Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]
Aaron Gustafson
 

Viewers also liked (9)

The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]
 
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]
 
Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]Falling in Love with Forms [F0WD 2015]
Falling in Love with Forms [F0WD 2015]
 
Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]Ruining the User Experience [SXSW 2007]
Ruining the User Experience [SXSW 2007]
 
Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]Falling in Love With Forms [An Event Apart DC 2015]
Falling in Love With Forms [An Event Apart DC 2015]
 
Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]
 
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]
 
Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]Designing the Conversation [SpeechTek 2016]
Designing the Conversation [SpeechTek 2016]
 
Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]Designing with Empathy [Code & Creativity 2014]
Designing with Empathy [Code & Creativity 2014]
 

Similar to Beyond Responsive [18F 2015]

Beyond Responsive [ConvergeSE 2015]
Beyond Responsive [ConvergeSE 2015]Beyond Responsive [ConvergeSE 2015]
Beyond Responsive [ConvergeSE 2015]
Aaron Gustafson
 
Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]
Aaron Gustafson
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
Aaron Gustafson
 
Beyond Responsive [Future of Web Design 2015]
Beyond Responsive [Future of Web Design 2015]Beyond Responsive [Future of Web Design 2015]
Beyond Responsive [Future of Web Design 2015]
Aaron Gustafson
 
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
Aaron Gustafson
 
Intro to Adaptive Web Design [ChaDev Lunch]
Intro to Adaptive Web Design [ChaDev Lunch]Intro to Adaptive Web Design [ChaDev Lunch]
Intro to Adaptive Web Design [ChaDev Lunch]
Aaron Gustafson
 
Planning Adaptive Interfaces [From the Front 2013]
Planning Adaptive Interfaces [From the Front 2013]Planning Adaptive Interfaces [From the Front 2013]
Planning Adaptive Interfaces [From the Front 2013]
Aaron Gustafson
 
Planning Adaptive Interfaces [dConstruct Workshop 2013]
Planning Adaptive Interfaces [dConstruct Workshop 2013]Planning Adaptive Interfaces [dConstruct Workshop 2013]
Planning Adaptive Interfaces [dConstruct Workshop 2013]
Aaron Gustafson
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Abdulhadi ÇELENLİOĞLU
 
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
Aaron Gustafson
 
Planning Adaptive Interfaces [Breaking Development Nashville 2013]
Planning Adaptive Interfaces [Breaking Development Nashville 2013]Planning Adaptive Interfaces [Breaking Development Nashville 2013]
Planning Adaptive Interfaces [Breaking Development Nashville 2013]
Aaron Gustafson
 
Mixd RWD Workshop
Mixd RWD WorkshopMixd RWD Workshop
Mixd RWD Workshop
aaroncthomas
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
Jonathan Snook
 
Planning Adaptive Interfaces [UXLx 2013]
Planning Adaptive Interfaces [UXLx 2013]Planning Adaptive Interfaces [UXLx 2013]
Planning Adaptive Interfaces [UXLx 2013]
Aaron Gustafson
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Chris Love
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Acquia
 
Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern Web
Joshua Marantz
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
Andreas Bovens
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
Jason Grigsby
 

Similar to Beyond Responsive [18F 2015] (20)

Beyond Responsive [ConvergeSE 2015]
Beyond Responsive [ConvergeSE 2015]Beyond Responsive [ConvergeSE 2015]
Beyond Responsive [ConvergeSE 2015]
 
Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
 
Beyond Responsive [Future of Web Design 2015]
Beyond Responsive [Future of Web Design 2015]Beyond Responsive [Future of Web Design 2015]
Beyond Responsive [Future of Web Design 2015]
 
Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]Intro to Adaptive Web Design [edUi 2013]
Intro to Adaptive Web Design [edUi 2013]
 
Intro to Adaptive Web Design [ChaDev Lunch]
Intro to Adaptive Web Design [ChaDev Lunch]Intro to Adaptive Web Design [ChaDev Lunch]
Intro to Adaptive Web Design [ChaDev Lunch]
 
Planning Adaptive Interfaces [From the Front 2013]
Planning Adaptive Interfaces [From the Front 2013]Planning Adaptive Interfaces [From the Front 2013]
Planning Adaptive Interfaces [From the Front 2013]
 
Planning Adaptive Interfaces [dConstruct Workshop 2013]
Planning Adaptive Interfaces [dConstruct Workshop 2013]Planning Adaptive Interfaces [dConstruct Workshop 2013]
Planning Adaptive Interfaces [dConstruct Workshop 2013]
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
 
Planning Adaptive Interfaces [Breaking Development Nashville 2013]
Planning Adaptive Interfaces [Breaking Development Nashville 2013]Planning Adaptive Interfaces [Breaking Development Nashville 2013]
Planning Adaptive Interfaces [Breaking Development Nashville 2013]
 
Mixd RWD Workshop
Mixd RWD WorkshopMixd RWD Workshop
Mixd RWD Workshop
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
Planning Adaptive Interfaces [UXLx 2013]
Planning Adaptive Interfaces [UXLx 2013]Planning Adaptive Interfaces [UXLx 2013]
Planning Adaptive Interfaces [UXLx 2013]
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern Web
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 

More from Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
Aaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
Aaron Gustafson
 

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 

Recently uploaded (20)

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 

Beyond Responsive [18F 2015]