Accessibility questions? Get in contact: george@goodwally.ca.
This is the newer & updated version of the "Responsive Web Design & Accessibility" presentation (http://slidesha.re/1awZEmT).
George Zamfir, Accessibility Specialist, goodwally.ca
Description: As we are moving away from traditional computers and towards mobile devices the question is: How do we build our web products to work for all these devices and more importantly, how do we do it accessibly?
In my experience, Responsive Web Design (RWD) is a good solution - not only that it doesn't impede accessibility but it promotes it.
We'll learn the basics of RWD and accessibility techniques.
Objectives: Throughout the different projects I worked on it became apparent to me that Responsive Web Design (RWD) is a good promoter for accessibility. In this session, I will be sharing the lessons learned and practical examples on implementing RWD and accessibility.
The objective is 2-fold:
A primer on Responsive Web Design (RWD); what it is and how to build responsive websites
Best practices cross-overs between RWD and accessibility.
Speaker Bio(s): My name is George Zamfir and I'm passionate about web accessibility.
I have been working in web accessibility since 2006 touching on the many facets of this field: performed academic research into learning technologies at Ryerson University, built assistive technologies, ran a web development business, developed technical accessibility solutions at Scotiabank working on complex web properties, but even more gratifying is organizing monthly accessibility meetups in Toronto.
Did I mention I also played the piano professionally at age 6?
Contact Information: George Zamfir: george@goodwally.ca , www.goodwally.ca, http://www.twitter.com/good_wally
Session Date: Tuesday, May 28, 2013
Making the Switch, Part 1: Top 5 Things to Consider When Evaluating DrupalAcquia
The “Making the Switch to Drupal series” will provide an overview of what you need to know when considering and adopting Drupal. In Part 1, we will guide busy managers through what they need to consider when evaluating Drupal.
We know that choosing any web development technology represents a significant investment of resources. Decision makers can spend weeks and months comparing options and deliberating about the best direction. We will use a combination of case studies and demonstrations to explain how Drupal works, so you can see first hand how it powers some of the most visited websites online.
In Part 1 of this webinar series, you will learn:
• Benefits of the open source community
• Comparison of Drupal to other systems
• Ease of Customization of branding and functionality
• Managing content layout and design in Drupal
• About common features and functionality of Drupal
Groovy & Grails for Spring/Java developersPeter Ledbrook
Presentation given at SpringOne 2GX.
The original presentation is mostly demo, but these slides show some nice features of Groovy and how Grails can support the varying needs to enterprise developers.
Accessibility of Common Web ApplicationsTomáš Muchka
An internal educational presentation on the theme of Accessibility of Web Applications, This presentation was created on the basis of an accessibility study for the HP Service Virtualization. See the slide notes for additional information.
Making the Switch, Part 1: Top 5 Things to Consider When Evaluating DrupalAcquia
The “Making the Switch to Drupal series” will provide an overview of what you need to know when considering and adopting Drupal. In Part 1, we will guide busy managers through what they need to consider when evaluating Drupal.
We know that choosing any web development technology represents a significant investment of resources. Decision makers can spend weeks and months comparing options and deliberating about the best direction. We will use a combination of case studies and demonstrations to explain how Drupal works, so you can see first hand how it powers some of the most visited websites online.
In Part 1 of this webinar series, you will learn:
• Benefits of the open source community
• Comparison of Drupal to other systems
• Ease of Customization of branding and functionality
• Managing content layout and design in Drupal
• About common features and functionality of Drupal
Groovy & Grails for Spring/Java developersPeter Ledbrook
Presentation given at SpringOne 2GX.
The original presentation is mostly demo, but these slides show some nice features of Groovy and how Grails can support the varying needs to enterprise developers.
Accessibility of Common Web ApplicationsTomáš Muchka
An internal educational presentation on the theme of Accessibility of Web Applications, This presentation was created on the basis of an accessibility study for the HP Service Virtualization. See the slide notes for additional information.
A simple, step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
Early prevention of accessibility issues with mockup & wireframe reviewsAidan Tierney
A mockup or wireframe review is an opportunity to identify interaction design elements which are not fully accessible and will require changes. It's also the best time to identify any items that will need additional requirements to avoid becoming accessibility defects later on. After demonstrating the technique we will practice on a sample mockup. You'll leave this session with skills to apply on your next sprint.
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
A simple, step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
Early prevention of accessibility issues with mockup & wireframe reviewsAidan Tierney
A mockup or wireframe review is an opportunity to identify interaction design elements which are not fully accessible and will require changes. It's also the best time to identify any items that will need additional requirements to avoid becoming accessibility defects later on. After demonstrating the technique we will practice on a sample mockup. You'll leave this session with skills to apply on your next sprint.
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
Mobilism 2013: A story of how we built Responsive BBC NewsJohn Cleveley
Scale and adapt: A story of how we built Responsive BBC News
Life used to be easy. We created sites to work on a few browsers and when we had time we asked the new guy to build a half baked mobile version. Then the device explosion ruined our cozy happy dev life.
My talk will discuss how BBC News met this challenge at scale.
How we support as many devices as possible using responsive design
Why performance is key to our success and how we managed to keep the site lean
How we scale to serve BBC News to the masses
What tools we use to help us along the way
John Cleveley
John is Tech Lead at BBC News and currently migrating the News site to a dynamic platform. Concentrating on building features mobile first using responsive web design all the way up to desktop.
BBC News has a truly global audience, delivering some of the only unbiased journalism available in some parts of the world. This has reinforced his passion for device support and producing sites that absolutely fly.
Loves canoeing, ale and Radiohead - preferably all at the same time :) Find me here @jcleveley.
Most devs I know have a love/hate relationship with responsive design. We agree it's important. We agree it's hard. But it doesn't have to be. Using the power of Sass mixins, I'll show you how to declare base, media queries and browser specific styles in one place, making for less code and fewer worries.
Responsive design is a combination of techniques aiming to create interfaces able to adapt to a wide range of devices, optimising the user experience in each of them but using the same code-base. But responsive design is not just about technology, as it also requires a different way of thinking and planning the development of interfaces.
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...Scott DeLoach
In this session, I will present a CSS-based approach for providing responsive content. This method can be used with HTML5’s responsive output option to adapt topic content for desktops, tablets, and phones. We will discuss how to use this approach to show/hide, redesign, and reword/replace content based on the device. I will share working examples that attendees can apply to their own projects, and we will explore options for extending this method for complex situations.
Lone StarPHP 2013 - Building Web Apps from a New AnglePablo Godel
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communitate with a REST server built with PHP.
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
2. goodwally.ca 🌎 @good_wally
Responsive Web Design
&
Web Accessibility
george@goodwally.ca
twitter.com/good_wally
#accessconf accessconf.ca
Tuesday, 28 May, 13
3. goodwally.ca 🌎 @good_wally
George Zamfir
Accessibility solutioneer at Good Wally
goodwally.ca
Co-organizer at
Toronto Accessibility and Inclusive Design
meetup.com/a11yTO
Accessibility consultant at Scotiabank
Presentations: slideshare.net/GeorgeZamfir
Podcast (fairly new): weba.im/webaxe97
Tuesday, 28 May, 13
10. goodwally.ca 🌎 @good_wally
Responsive Web Design (RWD)
&
Web Accessibility (A11Y)
40 min presentation &
10 min of Q & A or more advanced RWD
• responsive web design primer
• accessibility implications
Tuesday, 28 May, 13
11. The problem reality of today’s web
If responsive design is the solution, what is the problem?
Tuesday, 28 May, 13
12. • Web design borrowed from print design
• 640x480, 800x600, 1024x768 (consensual hallucination)
• The browser is an unknown constraint
“Essentially, we were making print designs
navigable on a computer”
- A List Apart, Scott Jehl
RWD Overview - the reality of today’s web
Web is not print (anymore)
Tuesday, 28 May, 13
13. Designing for a new resolution was the exception!
RWD Overview - the reality of today’s web
Web is not print (anymore)
Tuesday, 28 May, 13
15. RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
16. RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
17. RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
18. RWD Overview - the reality of today’s web
Devices change
Tuesday, 28 May, 13
19. RWD Overview - the reality of today’s web
Context changed
Tuesday, 28 May, 13
20. RWD Overview - the reality of today’s web
Context changed
Tuesday, 28 May, 13
21. RWD Overview - the reality of today’s web
Context changed
Tuesday, 28 May, 13
22. RWD Overview - the reality of today’s web
One web
"The primary design principle underlying the Web’s usefulness
and growth is universality… It must work with any form of
information, be it a document or a point of data, and
information of any quality — from a silly tweet to a scholarly
paper.
And it should be accessible from any kind of hardware that
can connect to the Internet: stationary or mobile, small screen
or large."
- Tim Berners-Lee, Long Live the Web, 2010
http://www.scientificamerican.com/article.cfm?id=long-live-the-web
Tuesday, 28 May, 13
23. RWD Overview - the reality of today’s web
Many webs ?
the desktop web
mobile web
tablet web
“phablet” web
“tabtop” web
internet-enabled fridge web
More on “one web”: adactio.com/links/4789
Tuesday, 28 May, 13
24. RWD Overview - the reality of today’s web
Good News!
The web is inherently fluid & responsive.
We simply need to re-educate ourselves.
Tuesday, 28 May, 13
34. RWD - The Details
What is RWD? - a definition
Started off as a technique for building one
website that would work on all devices.
"Rather than tailoring disconnected designs for
an ever-increasing number of web devices, we
can treat them as facets of the same experience."
- Ethan Marcotte, Responsive Web Design, 2010
alistapart.com/articles/responsive-web-design
Tuesday, 28 May, 13
35. RWD Overview
What is RWD?
It’s really an umbrella term for:
• web standards
• best practices
• some new RWD-specific techniques
... formulated in the context of mobile devices.
It’s not new and it’s not revolutionary!
Tuesday, 28 May, 13
37. RWD - The Details
Fluid Foundation
flexible layout that uses relative sizing (no fixed widths)
Media Queries
target media types and media features
Responsive Images
relative widths (CSS) and / or dynamic replacement (JS)
Tuesday, 28 May, 13
38. RWD - The Details
RWD - Fluid Foundation
Tuesday, 28 May, 13
39. RWD - Fluid Foundation
Declare percentage (%) or ratio (em) widths
instead of absolute values (px)
in order to adapt to the size of the viewport.
section {
margin: 0.5em;
width: 75%;
height: 10em;
}
RWD - The Details
Tuesday, 28 May, 13
41. RWD - The Viewport
... to adapt to the size of the viewport.
meta
name = "viewport"
content = “
width = device-width,
initial-scale = 1
“
developer.apple.com/library/safari/#documentation/AppleApplications/Reference/
SafariWebContent/UsingtheViewport/UsingtheViewport.html
RWD - The Details
Tuesday, 28 May, 13
43. RWD - Media Queries
<link
rel=”stylesheet”
href="layoutPrint.css"
media="print"
/>
RWD - The Details
Tuesday, 28 May, 13
44. RWD - Media Queries
<link
rel=”stylesheet”
href="layout.css"
media="screen and (min-width: 400px)"
/>
@media screen and (min-width: 30em) {
// mobile styles here
}
RWD - The Details
Tuesday, 28 May, 13
45. RWD - Media Queries
RWD - The Details
Tuesday, 28 May, 13
46. RWD - Media Queries
RWD - The Details
Tuesday, 28 May, 13
47. RWD - Media Queries
CSS 2.1 - media types (e.g. screen, print, etc.)
<link href="style.css"... media="screen" />
<link href="stylePrint.css"... media="print" />
CSS 3 - media queries with features:
@media screen and (min-width: 30em) {
// mobile styles here
}
width, height, max-/min-width, max-/min-height, device-
height, orientation, aspect-ratio, resolution
RWD - The Details
Tuesday, 28 May, 13
48. RWD - Media Queries
Use ems instead of pxs in media queries!
@media screen and (max-width: 30em) {
// mobile styles here
}
Your users will thank you
(when zooming in on desktop browsers)
Let’s see why
RWD - The Details
Tuesday, 28 May, 13
49. RWD - Media Queries
(device resolution) device-width
vs
(browser / app resolution) width
device-width is fixed regardless
of the device orientation!
iPhone 4:
device-width = 320px
width = 640px
1 CSS px = 2 device px
RWD - The Details
Tuesday, 28 May, 13
50. RWD - Media Queries
(device resolution) device-width
vs
(browser / app resolution) width
device-width is fixed regardless
of the device orientation!
iPhone 4:
device-width = 320px
width = 640px
1 CSS px = 2 device px
RWD - The Details
Tuesday, 28 May, 13
51. RWD - The Details
RWD - Responsive Images
Tuesday, 28 May, 13
52. RWD - Responsive Images
How do you make fixed-width elements (i.e.
images) work with your awesome fluid layouts?
img {
max-width: 100%;
height: auto;
}
Make images resize with the layout. Also, it’s
much more easier to maintain.
RWD - The Details
Tuesday, 28 May, 13
53. RWD - The Details
RWD - Responsive Images
New problem
Tuesday, 28 May, 13
54. RWD - The Details
RWD - Responsive Images
No HTML-based solution
Tuesday, 28 May, 13
55. RWD - The Details
RWD - Responsive Images
Solutions:
Image Optimization
Scalable Vector Graphics (SVG)
Icon Fonts - css-tricks.com/examples/IconFont
New HTML element - www.responsiveimages.org
Image replacement with polyfills -- picturefill.js
Media Queries - (background) image replacement
Unfortunately, there is no “one size fits all” solution!
Tuesday, 28 May, 13
60. W3C “Responsive Images Community Group”
responsiveimages.org
w3.org/community/respimg
New HTML element proposal
RWD under the hood
Tuesday, 28 May, 13
61. W3C “Responsive Images Community Group”
responsiveimages.org
w3.org/community/respimg
New HTML element proposal
RWD under the hood
Tuesday, 28 May, 13
62. Image replacement with picturefill.js
github.com/scottjehl/picturefill
RWD under the hood
Let’s see it in action!
Tuesday, 28 May, 13
63. Media Queries - (background) images replacement
Display different sizes of the image with media queries!
<div id="test5"></div>
@media all and (max-width: 600px) {
#test5 { background-image:url('images/test5-mobile.png'); }
}
@media all and (min-width: 601px) {
#test5 { background-image:url('images/test5-desktop.png'); }
}
RWD under the hood
Tuesday, 28 May, 13
64. Text
RWD - Responsive Images
adaptive-images.com
filamentgroup.com/lab/rwd_img_compression
cloudfour.com/examples/mediaqueries/image-test
timkadlec.com/2012/04/media-query-asset-downloading-results
css-tricks.com/which-responsive-images-solution-should-you-use
Further reading / resources
Tuesday, 28 May, 13
65. RWD - The Details
RWD - Summary
Fluid Foundation + Media Queries + Responsive Images
Tuesday, 28 May, 13
66. RWD - The Details
More than just “squishy” designs
Tuesday, 28 May, 13
67. Performance
“Well done to Audi and BMW for winning the beauty contest.
From the winner of 2006 International Engine of the Year.”
Tuesday, 28 May, 13
71. RWD & A11Y = ♥
They are really good together!
Tuesday, 28 May, 13
72. RWD & A11Y = ♥ Why?
Personal Overriding Stylesheet
(Fluid Foundation + Media Queries + Responsive Images)
Inherent Inclination to Web Standards
Mobile First+ Progressive Enhancement
Caters to Users' Needs, Devices, Context
Tuesday, 28 May, 13
73. RWD & A11Y = ♥
Personal Overriding Stylesheet
Less about the design, more about the content!
Tuesday, 28 May, 13
74. RWD & A11Y = ♥
Personal Overriding Stylesheet
“My basic point is that it should be the content
that dictates the media queries.”
@adactio
Tuesday, 28 May, 13
75. RWD & A11Y = ♥
“Mobile users want to see our menu, hours and
delivery number. Desktop users definitely want this
1mb png of someone smiling at a salad.”
@wilto
Personal Overriding Stylesheet
Tuesday, 28 May, 13
76. RWD & A11Y = ♥
“Mobile users want to see our menu, hours and
delivery number. Desktop users definitely want this
1mb png of someone smiling at a salad.”
@wilto
Personal Overriding Stylesheet
“RWD is designing for more accessible content!”
George Zamfir
Tuesday, 28 May, 13
80. RWD & A11Y = ♥
Personal Overriding Stylesheet
Reduced Cognitive & Visual Load
RWD goes beyond layouts & images, we’re now tackling
line & letter spacing (leading & kerning), readable
typefaces (even dyslexia) AND responsive typography.
Tuesday, 28 May, 13
81. RWD & A11Y = ♥
Personal Overriding Stylesheet
Reduced Cognitive & Visual Load
RWD goes beyond layouts & images, we’re now tackling
line & letter spacing (leading & kerning), readable
typefaces (even dyslexia) AND responsive typography.
“Georgia works perfectly as body text up until 16 pixels. As
soon as you go over that size, it starts to look odd. This is not a
design deficiency of the typeface. It was simply not designed to
work for big body text sizes and dense screens.”
- informationarchitects.net
Tuesday, 28 May, 13
83. RWD & A11Y = ♥ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
Tuesday, 28 May, 13
84. RWD & A11Y = ♥ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
What does it mean for a11y?
1 finger, no fingers, motor control,
dexterity, novice IT users, etc.
Tuesday, 28 May, 13
85. RWD & A11Y = ♥ Text
Personal Overriding Stylesheet
Fat Fingers Syndrome
header[role="banner"] nav a {
padding:0.4em 1em 0.5em;
}
What does it mean for a11y?
1 finger, no fingers, motor control,
dexterity, novice IT users, etc.
Tuesday, 28 May, 13
86. RWD & A11Y = ♥
Embracing Web Standards
no more
platform specific hacks
custom controls
mouse-only hackery
HTML5 & ARIA
Tuesday, 28 May, 13
87. RWD & A11Y = ♥
Embracing Web Standards
Tuesday, 28 May, 13
88. RWD & A11Y = ♥
Embracing Web Standards
Tuesday, 28 May, 13
89. RWD & A11Y = ♥
Mobile First & Progressive Enhancement
Mobile first
designing for the smallest screen resolution first (<320px)
and use it as the base for the next, larger screen
resolutions
Progressive Enhancement
building for the less-capable devices / browsers first
and incrementally enhance for the more capable ones
Tuesday, 28 May, 13
91. RWD & A11Y = ♥
Progressive Enhancement
1. build for the less-capable devices / browsers first
2. start low in the stack: HTML(5), CSS, basic JavaScript
3. incrementally enhance for the more capable devices
4. use @media queries and advanced JavaScript
Tuesday, 28 May, 13
101. RWD & A11Y = ♥
Mobile First RWD
1. design for the smallest screen resolution first
2. stretch until ugly (not until iPhone screen resolution)
3. (aha) use “ugly” as you breakpoint
4. adapt the content for the new size (until not “ugly”)
Tuesday, 28 May, 13
104. RWD plan
What’s wrong with this guy
(not liking device-specific breakpoints)
?
I’m not alone:
bradfrostweb.com/demo/ish
“Determining breakpoints for a responsive design” chapter
from the book: implementingresponsivedesign.com
Tuesday, 28 May, 13
110. RWD plan
Which breakpoints should we choose? It depends!
Considerations:
look at devices & browsers market share and their
associated screen resolutions & capabilities
filter with your own analytics data
assess your current design & nature of the content
Mobile first - breakpoints
Tuesday, 28 May, 13
112. Text
There’s no perfect set of breakpoints!
Set the breakpoints based on the target audience, the project
goals, typical device market share, nature of content, design...
Tuesday, 28 May, 13
113. RWD & A11Y = ♥
It’s all good news
for accessibility!
Mobile First & Progressive Enhancement
Tuesday, 28 May, 13
114. RWD & A11Y = ♥
Mobile First & Progressive Enhancement
Tuesday, 28 May, 13
115. RWD & A11Y = ♥
Caters to Users' Needs, Devices, Context
Tuesday, 28 May, 13
119. RWD & A11Y = ♥ ?
Accessibility is not lagging behind (for once)
accessibility & web standards are core to RWD
RWD is a champion for web accessibility
we have common goals for our users
RWD is not a fad
Tuesday, 28 May, 13
120. RWD & A11Y = ♥ ?
Accessibility is not lagging behind (for once)
accessibility & web standards are core to RWD
RWD is a champion for web accessibility
we have common goals for our users
RWD is not a fad
a solid framework for us to do better web work
Tuesday, 28 May, 13