Adaptive layouts - standards>next Manchester 23.03.2011

The document provides tips for optimizing websites for mobile and cross-device use. It discusses the varied mobile landscape and capabilities that websites need to account for. Key recommendations include using responsive design with CSS media queries to render pages appropriately based on screen size and features. The document also advocates the "One Web" principle of providing consistent content across all devices when reasonable.

This document discusses touch events for responsive web design. It begins by explaining how browsers emulate mouse events on touch devices, which can cause problems like delayed responses. Native touch events are introduced as a better solution, covering events like touchstart, touchmove, and touchend. The document explores issues like touch versus mouse/keyboard, multi-touch support, and touch event support across browsers. It provides examples of how to track finger movement and implement swipe gestures using touch events.

This document discusses developing web applications for TV. Key challenges include large screen sizes, imprecise input like remote controls, and variable performance. Design recommendations include making interfaces responsive, optimizing for navigation with a directional pad, and minimizing features like scrolling that don't work well on TVs. Testing and debugging tools from TV manufacturers can help develop and ensure good performance.

Patrick Lauke gives an overview of new web technologies available in HTML5, including canvas, video, geolocation, offline support, storage and more. He discusses the history and development of HTML5, how it standardizes current browser behavior, and new powerful form and semantic elements. Patrick provides demonstrations of canvas, video, geolocation and other features, noting their importance for building applications without plugins. He encourages developers to start using these technologies today.

This document discusses methodologies and techniques for optimizing websites for mobile devices, including using responsive design with CSS media queries. It presents three main approaches: building a separate mobile site, making no changes, or optimizing the main site for mobile. The bulk of the document then focuses on how to use CSS media queries to optimize websites, covering features like width, height, and orientation. It also discusses related techniques like viewport meta tags and approaches being considered for future standards.

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and hoping normal websites work okay on mobile, 2) Creating a separate mobile-optimized site, or 3) Having a single adaptive site that uses techniques like fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then goes into details about techniques for adaptive sites, including viewport meta tags, touch and gesture support, and using device capabilities like geolocation without plugins. It emphasizes that adaptive design is useful not just for mobile but any device.

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and relying on modern mobile browsers to render normal sites, 2) Creating a separate mobile site with a subdomain or folder, and 3) Having a single adaptive site that uses fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then covers various techniques for adaptive design, including viewport meta tags, touch and gesture support, multimedia without plugins, geolocation, and offline capabilities.

This document discusses approaches to web development for mobile devices. It begins by noting the increasing importance of the mobile web. It then examines three approaches: 1) Doing nothing and hoping modern mobile browsers can handle desktop sites, 2) Creating a separate mobile site, and 3) Having a single adaptive site that refactors content for different screens using fluid layouts, progressive enhancement and media queries. The document dives into techniques for adaptive design like viewport meta tags, touch events, and responsive images. It also notes remaining challenges like viewport interpretation and high-DPI screens lying about resolution.

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

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.

Expanded version of my "Making your site mobile-friendly" speed talk, delivered via Skype for the Russian Internet Technology (RIT) conference, Moscow, 12 April 2010

This document discusses responsive web design, which allows websites to automatically adjust to different screen sizes. It describes how meta tags and media queries enable responsive design. Meta tags provide metadata about the HTML document and viewport settings. Media queries use CSS to apply different styling based on screen width, similar to if/else statements. Examples are provided for styling smartphones, tablets, laptops and various screen orientations. Images and videos are made flexible using max-width and height:auto. While responsive design improves compatibility and usability, it can increase load times and hovering may not work as expected.

This document discusses responsive web design (RWD) and its implementation in the iMIS platform. It begins with an overview of RWD and how users access the internet on mobile devices. It then provides recommendations for achieving RWD, including flexible layouts, images/video, and CSS media queries. It also discusses mobile-first design and testing RWD across browsers and devices. Tools for RWD like Chrome DevTools and responsive frameworks like Bootstrap are also mentioned. Resources for learning more about RWD best practices in iMIS and examples of responsive sites built in iMIS are provided.

The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.

From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.

The document discusses responsive web design for universal access. It summarizes Kate Walser's presentation on responsive design and accessibility. The presentation covers what responsive design is, how it works using fluid grids, flexible images and media queries, and how responsive design can improve accessibility by adjusting content and layouts for different devices. It also provides exercises for attendees to evaluate websites on mobile devices and plan responsive designs.

This document discusses responsive web design techniques including: - Using viewports and media queries to adapt layouts for different screen sizes. - Sizing images fluidly using max-width: 100% so they are responsive. - Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns. - Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals. - Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.

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.

The document discusses responsive web design and how it offers a way forward to design work meant for different experiences across a gradient of devices. It provides examples of using CSS media queries to serve different stylesheets based on screen width and other device features. This allows content to adapt to different screens from mobile to desktop in a fluid, responsive way.

Responsive web design allows sites to adapt to different screen sizes and devices. Key techniques include using flexible layouts with relative units, media queries to apply styles conditionally, responsive images, and grid systems. The viewport meta tag controls scaling. Flexbox and grids help build flexible layout structures. Tables can be made responsive by scrolling or rearranging content for small screens. Mobile-first and content-focused approaches support responsive goals.

Responsive web design (RWD) creates dynamic changes to a website's appearance depending on the screen size and orientation of the device being used to view it. It uses media queries and breakpoints, which allow different style rules for different screen widths. A mobile-first approach designs for mobile screens first before adjusting styles for larger screens.

CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.

There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.

This document discusses various techniques for responsive images in web design, including browser sniffing versus feature testing, image sizes for different screen resolutions and bandwidths, and different implementation methods like .htaccess files, the <picture> element, and JavaScript libraries. It covers topics like using the browser width to determine layouts, screen resolution detection, and bandwidth testing. Workarounds discussed include using background images, SVGs, icon fonts, and compressed JPEGs. The document advocates a mobile-first approach and using CSS media queries to adapt designs based on screen size.

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the guidelines' normative text. And, of course, it is not perfect - with some omissions, handwaving, and straight-up loopholes. So where does this leave developers and auditors? In this talk - a reprise of a previous talk, now updated to cover new SCs from WCAG 2.2 - Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

Update about Pointer Events Level 3 work for the upcoming W3C Technical Plenary and Advisory Committee (TPAC) 2023 in Seville https://www.youtube.com/watch?v=r0spZl1qaa0 https://w3c.github.io/pointerevents/ https://www.w3.org/TR/pointerevents/ https://www.w3.org/2023/09/TPAC/ https://patrickhlauke.github.io/touch/w3c_tpac2023_pewg/ Cross-posted from https://www.w3.org/2023/09/TPAC/group-updates.html#pointer-events

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...

HTML offers many features and attributes that can make your sites more accessible...but only if they're used wisely. Can there really be "too much accessibility"? Audio recording: https://archive.org/details/Psf8August2007.PatrickH.Lauke-TooMuchAccessibilityGoodIntentions

Patrick H. Lauke: Styling Your Web Pages with Cascading Style Sheets / EDU course / University of Salford / 13 February 2006