Making Your Site Printable: CSS Summit 2014

If you are aware of accessibility practices, you may know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing stricly code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.

The document provides an overview of a presentation on accessibility. It discusses statistics on disabilities worldwide and in the United States. It then discusses techniques for improving accessibility such as writing user stories from personas with different impairments and conducting basic accessibility tests like checking for proper keyboard and screen reader functionality.

Adrian Roselli presented on the topic of "Selfish Accessibility". He argued that building accessible websites benefits all users now and in the future, as disabilities are common and can affect anyone over time. He suggested taking basic accessibility tests like using only the keyboard, turning off images/CSS, and checking color contrast. The presentation covered accessibility statistics, ways accessibility impacts everyone personally, and basic checks to improve accessibility. The overall message was that building accessibility into websites now serves one's own future needs and helps others.

Accessibility practitioners tend to live in a bubble, taking for granted many of the basics with which developers struggle. Explore questions developers ask one another.

We can all pretend that we’re helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn’t intended to be a deep dive, but more of an overall primer for those who aren’t sure where to start nor how it helps them.

We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.

We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

Slides from my workshop on accessibility at Booster Conference 2016 in Bergen, Norway. 23 different techniques for fun and awesomeness.

We can all pretend that we're helping others by making web sites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

This document discusses accessible design and provides best practices for creating accessible websites. It explains that accessibility is important for people with disabilities, both temporary and permanent. The key aspects of accessible design are supporting the content, functionality, and providing access for everyone. Common mistakes like low color contrast, hard to read typography, and lack of structure are identified. The document then outlines a workflow for accessible design that includes selecting content formats, creating a semantic layout, styling text elements first without color, then adding color, and creating style guides. Resources for further information on accessible design are also provided.

The lang attribute is necessary, I explain why. Animated GIFs and videos can be found on my site at http://adrianroselli.com/2017/03/slides-from-roledrinks-at-csun.html

With recent announcement that all code submitted to WordPress core (as well as themes) must meet WCAG 2.0 AA, proper accessibility techniques are more important within WordPress than ever. I’ll review some basic and fringe accessibility techniques you can use for your personal and client projects, as well as for contributing to WordPress core.

The document summarizes Adrian Roselli's presentation on "Selfish Accessibility" at UX Singapore 2014. It provides background on Adrian Roselli and defines accessibility terminology. It then discusses statistics on disability rates and types to emphasize the widespread need for accessibility. It explores motivating accessibility from a self-interested perspective by considering how disabilities can unexpectedly affect anyone. Finally, it offers techniques for accessibility including user stories, personas, and checklists, as well as resources for further information.

You know it's important for your web project to be accessible to people who use all kinds of assistive technology to access the internet. But all the guidelines for web accessibility you can find don't go much beyond "make sure all your images have alt text", and all the resources you can find treat "accessibility" as a synonym for "making your site work in a screen reader". You know there are other things you should be doing and other forms of assistive technology you should be accomodating, but all the best practices documents are a complicated morass of contradicting information (if you can find best practices documents at all.) Have no fear! This tutorial gives you a number of concrete steps to take to make things more accessible. This presentation has downloadable notes and exercises available at http://denise.dreamwidth.org/tag/a11y . Video of the talk should be available later.

Presentation given to students on the Bachelor in Web Development degree at the Business Academy Southwest (https://www.easv.dk/en) in Esbjerg, Denmark on the 17th November 2017.

The document provides an overview of prototyping accessibility for a workshop presentation. It includes instructions for group exercises to prototype user interface elements and develop personas. It also covers various accessibility topics like disability types, user experience models, technical accessibility standards around text alternatives, typography, links, color contrast, labeling fields, document structure, and keyboard/screen reader support. The goal is to educate attendees on inclusive design practices through hands-on exercises and discussions.

If you work in accessibility, you probably know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.

Where I talk about why you should make your site print-friendly, how to go about doing it, and techniques to measure when users print pages.

This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.

The document summarizes a presentation given by Adrian Roselli on fringe accessibility techniques that should be avoided. It discusses common techniques like clicking on labels and checking color contrast. It then covers more fringe techniques such as avoiding default focus styles, using <h1> headings wisely, and setting the lang attribute. The document warns against disabling zoom, using tabindex greater than 0, and avoiding infinite scroll. It emphasizes that accessibility is an ongoing process rather than a checklist.

This document provides an overview of responsive web design and media queries. It begins with an agenda for the topic and then discusses how media queries allow content to adapt to different screen sizes and orientations. It provides examples of common media query values like width, height, and orientation. The document also includes code snippets showing how to write media queries and link different style sheets. Finally, it outlines workshops and assignments for students to practice working with media queries hands-on.

The document discusses responsive web design and its key elements. It notes that the web is now accessed through various devices like desktops, mobile phones, tablets, TVs and game consoles. Responsive web design adapts websites to different screen sizes and devices by using flexible grids, images and media queries. Some key aspects are using relative units like ems instead of pixels, flexible layouts, images that scale with the page and media queries to apply CSS styles for different devices. The document provides examples and resources for learning more about responsive design.

Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts. It should now be easier than ever to respond to a format that has existed since the start of the web – print. I’ll walk through the process for making your responsive sites respond to the format we most often forget.

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

Node.js 101 with Rami Sayar Presented by FITC at Web Unleashed 2014 in Toronto on September 18 2014, 10:30 - 11:15am Node.js is a runtime environment and library for running JavaScript applications outside the browser. Node.js is mostly used to run real-time server applications and shines through its performance using non-blocking I/O and asynchronous events. This talk will introduce you to Node.js by showcasing the environment and its two most popular libraries: express and socket.io. TARGET AUDIENCE Beginner web developers ASSUMED AUDIENCE KNOWLEDGE Working knowledge of JavaScript and HTML5. OBJECTIVE Learn how to build a chat engine using Node.js and WebSockets. FIVE THINGS AUDIENCE MEMBERS WILL LEARN Node.js environment and basics Node Package Manager overview Web Framework, express, basics WebSockets and Socket.io basics Building a chat engine using Node.js

OVERVIEW Twitter Bootstrap is a wildly popular HTML and CSS framework for building websites and web applications. It is the number 1 project on GitHub. Bootstrap supports responsive web design, allowing the layout of your page to adapt to the device (desktop, tablet, mobile). This talk will introduce you to the basics of using Bootstrap and show you how to build responsive web layouts to build your own app. TARGET AUDIENCE Beginner web developers ASSUMED AUDIENCE KNOWLEDGE Working knowledge of HTML5 and CSS3. OBJECTIVE Learn how to use Twitter Bootstrap to quickly build a beautiful, responsive web app. FIVE THINGS AUDIENCE MEMBERS WILL LEARN Twitter Bootstrap basics Bootstrap CSS basics Bootstrap responsive layouts Bootstrap components JavaScript Bootstrap plugins

The document provides an overview of designing Drupal themes. It discusses common tools used to design themes such as Photoshop, Fireworks, and Illustrator. It also discusses Drupal-specific tools like Firebug and the Theme Developer module. The presentation covers designing for Drupal concepts like regions, blocks, and views. It provides examples of existing Drupal themes and recommendations for naming conventions, image preparation, CSS organization, and common theme techniques like CSS resets and menu placement.

Website Fundamentals - Web Technologies - Responsive Design - Web Browsers A great place to start if you are interested in web designing or research on the internet

The document provides an overview of responsive web design. It discusses techniques like using media queries and mobile-first approaches to adapt styles based on screen size and other factors. It covers best practices like letting content determine breakpoints, treating layout as an enhancement, and accounting for different user contexts. It also highlights common mistakes to avoid and emphasizes the importance of testing designs on actual devices.

A brief presentation for the Missouri State Digital Media Developer group on cutting through the hype surrounding mobile development and responsive design.

This document discusses responsive web design (RWD). RWD allows websites to automatically adjust their layout depending on the user's screen size using media queries. It is important for accessibility and usability as most internet users now access the web on mobile devices. The document recommends using a mobile-first and progressive enhancement approach where basic content and functionality work on all browsers and advanced features are progressively added. It provides examples of RWD techniques and tools to test responsive designs.

This document provides guidance on creating web services. It discusses registering a domain, planning the service, developing the service, launching it, and measuring its success in an iterative process. It also covers choosing a web hosting provider, deciding between using WordPress or custom coding, and the basics of HTML5 and CSS for building the web service structure and design. The key steps outlined are to plan the purpose, information architecture, user interface, and branding before starting development.

Designers can have an outsized impact on the accessibility of a project, being the ones who produce the visuals that are often critical for understanding and sign-off. Adrian will talk about the ways designers contribute to the overall accessibility of a site or application. We'll look at typography, structure, documentation, colour, contrast and more. Each of these has a corresponding WCAG SC to help provide guidance.

Presented with Christian Ståhl Everyone is talking about responsive design. But are you really ready to bring SharePoint to mobile and tablets? While you may have an idea of what your site will look like when finished, there are many basic concepts and pitfalls that aren’t always outlined in the “How To’s”. In this session, we will go through foundational steps to planning a responsive SharePoint site including how to handle a hybrid content scenario that uses publishing and team sites. You will learn what tools and templates can make your life easier during design, build and testing. If you are excited about the capability of bringing SharePoint to any device but not sure where to start, check out this session to get the foundational understanding of the concept, best practices and examples to get you started.

presportal.ru is the biggest Russian knowledge bank about presentations. We publish best presentations.

This document summarizes Vitaly Friedman's talk on responsive design techniques and tricks. The talk covered resolution independence using SVG/icon fonts, content choreography with Flexbox, compressive images that maintain quality at different sizes, conditional loading of assets based on breakpoints, and lazy loading of JavaScript and social buttons. It also discussed maintaining aspect ratios for images and videos across screens, and serving different video files for different devices. The overall message was that responsive design requires a new mindset and pragmatic solutions rather than rigid rules.

Developers who choose HTML elements that best describe a screen’s structure and semantics often don’t know how browsers use their CSS to break those semantics.

My Selfish Accessibility talk as a 5 minute Ignite talk, with slides that auto-advance every 15 seconds and no speaker notes. You know, for fun.

We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing or you after something else limits your abilities). We’ll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This is an overall primer for those who aren’t sure where to start nor how it helps them.

http://adrianroselli.com/2019/04/slides-the-role-of-design-in-accessibility-a11yto-meet-up.html Designers can have an outsized impact on the accessibility of a project, being the ones who produce the visuals that are often critical for understanding and sign-off. Adrian will talk about the ways designers contribute to the overall accessibility of a site or application. We'll look at typography, structure, documentation, colour, contrast and more. Each of these has a corresponding WCAG SC to help provide guidance.

Many (most?) developers make the effort to choose HTML elements that best describe the structure and semantics of the content. They then use CSS to set the layout for the visual design. What they don’t know is how browsers use that CSS to break the HTML semantics. I will demonstrate issues and offer unfortunate workarounds.

The document is a slide presentation by Adrian Roselli for London Web Standards about using the lang attribute in HTML. It discusses what the lang attribute is, examples of its use, research showing around 47% of pages use it correctly, its importance for HTML validation, internationalization, accessibility, and screen readers. It also covers fun facts like the history of the "en-US-x-Hixie" language code.

Running tests with real users is critical for so many organizations, whether when evaluating MVPs or just as part of iterative updates. For an organization that already has embraced inclusive design, the next step is to integrate it into user testing by incorporating users with disabilities into your normal testing process. Note that this is not the same as accessibility testing. Ideally your accessibility work is done so that you can test a fully functional and accessible site/application for usability regardless of disability. I will discuss how to plan for and execute these sessions as well as pitfalls to avoid. Ideally you will walk away with high-level understanding of where to start.

Accessibility practitioners tend to live in a bubble, taking for granted many of the basics with which developers struggle. Explore questions developers ask one another.

If you’ve embraced inclusive design, next is to integrate it into user testing by incorporating people with disabilities into your process.

Adrian Roselli discusses how accessibility benefits everyone now or in the future. Supporting accessibility now helps serve one's future self as people age and experience injuries or impairments. It also helps others who are currently injured or encumbered. Teaching younger developers about accessibility helps future generations if they pass on what they learn. Accessibility is an ongoing process, not just a checklist, and requires ongoing maintenance.

The document summarizes a presentation where the presenter discusses what they have learned about accessibility from questions and answers on Stack Overflow. It includes questions asked on Stack Overflow about HTML, CSS, ARIA, assistive technology, and accessibility in general, along with short answers or responses provided. The presentation concludes by emphasizing the importance of accessibility professionals being present and providing guidance on sites like Stack Overflow and at local tech events.