CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

A brief exploration of proposed Level 4 Media Queries and some thoughts about the future of the web. Presented at Responsive Day Out in Brighton on June 27 2014.

This document discusses various mobile design patterns and concepts. It covers common UI patterns like lists, navigation, and forms. It also discusses design principles for mobile like direct manipulation and feedback. It provides examples of implementing lists in Android and iOS. It compares MVC and MVVM patterns and discusses using MVVM frameworks. It emphasizes adapting patterns from desktop to be optimized for mobile interaction paradigms.

Slide-deck covers what is responsive web design, why use it and a walk-through of The Department of Labor's Ride Safe New York website going responsive.

This document is a presentation by Joseph Labrecque on using Edge Animate to create reusable component sets. The presentation covers Edge Animate and component creation, including an overview of Edge Animate, a discussion of historical component creation, anatomy of Edge Animate compositions, creating simple and advanced components, component libraries, and resources. Live demos are provided of creating components in both Flash Professional and Edge Animate.

This document discusses mobile web development techniques and Opera's developer tools. It outlines three approaches to catering websites for mobile users: doing nothing, creating a separate mobile site, or creating one site that works for all devices. Key techniques discussed include using the viewport meta tag to control zoom levels, media queries to apply different CSS styles based on screen width, and keeping mobile design in mind from the start to simplify layouts. The document promotes the goal of a "one site holy grail" that works seamlessly across devices and concludes by introducing Opera's developer tools for testing mobile webpages.

Today’s 'smart devices' are a product of the technology and mental models of our past. From a connected lightbulb to a robot vacuum, using most of these devices requires a native app. This in turn greatly limits their contexts of use. Can we really expect users to download an app to interact with a random ’thing’ they encounter at the mall, a space they explore for an hour at the museum, or a city they will only visit for a day? What devices could we build, what 'smart' environments could we enable if users could simply discover, “walk up and use”(and then if needed, abandon) these objects and environments as they do a web site? This workshop will discuss two new technologies--Physical Web and Web Bluetooth--that can enable on-demand interaction with physical things and spaces using no more than a browser.

This document provides an overview of developing apps for the iPad using web technologies like HTML5, CSS3, and JavaScript compared to developing native apps. It discusses key differences like the APIs available, performance, costs, updating processes, and more. It then provides best practices for web design on iPads, including considerations for touch targets, orientations, animations, images, and more. It also covers specific technologies like HTML5, CSS3, JavaScript, and backend development approaches. The overall message is that web development for iPads is very capable with modern techniques.

The document discusses virtual world options for educational institutions. It provides information on commercial virtual worlds like Second Life, open source options like OpenSim, and browser-based virtual worlds. It also introduces 3D Virtual Campus Tours, a product designed by Designing Digitally specifically for higher education recruitment. Key features highlighted are that it is fully browser-based, specialized for enrollment, and can replicate a campus in high quality graphics. Potential downfalls discussed are higher pricing and lack of editing tools compared to other virtual worlds.

With upcoming frameworks, powerful development tools and evolving technologies, this year looks very promising for web developers. Here are our thoughts on the top web development trends for 2016.

At various Google Developer Day events in Europe I gave a talk on the State of Ajax, that focuses on the core issue of User Experience and where to go from here.

Apart from being the buzzword de jour, what is this Ajax stuff that everyone is talking about? Take a look at some implementations out there and start thinking about how Ajax can add value to your site.

Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.

Does responsive design make a website more or less accessible? In this session you will learn best practices and techniques for accessible responsive design. Responsive web design (RWD) can be very good for accessibility but is also poses some new challenges and design considerations to provide an optimal experience for people with disabilities. When done properly, RWD can address many accessibility issues related to low vision and certain mobility impairments. While responsive web design was not created specifically to address accessibility, its aim is to craft sites to provide an optimal viewing experience and easy navigation for all users and thereby address some accessibility issues. RWD enables the website to adapt its layout to the format of the viewing environment through the use of fluid, proportion-based grids, flexible images and CSS3 media queries. Responsive sites adjust to the screen and presents in the most readable and usable way for that particular screen size and format. This can ensure that font size remains readable and at a high resolution for people with low vision. It also keeps interactive elements large and easier to operate for people with mobility impairments. In this session we will review what a responsive website is and talk about the challenges and opportunities for accessibility in regards to responsive web design.

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.

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

Web development is a broad term that includes various activities involved in developing websites and web applications. It involves web design, content development, scripting, security configuration, and e-commerce applications. Web design encompasses skills like graphic design, interface design, coding, search engine optimization and more. The history of web development began in 1989 with Tim Berners-Lee's proposal to create the World Wide Web. Many technologies were developed throughout the 90s and 2000s that shaped the modern web, including HTML, CSS, JavaScript, browsers, servers, smartphones and more.

The document provides design tips for creating effective web and mobile designs. It recommends focusing on goals and audience, balancing form and function, using alignment and white space to create order and focus on content. It also suggests using typography, contrast, simplicity, and current trends while being subtle to create a delightful user experience.

I delivered this presentation at WordCamp Toronto, November 15, 2014. This presentation covers typography basics and best practices, type trends in web design, personalities of type, an introduction to Google Fonts and different ways to enable fonts on your WordPress website. The ideal audience is anyone looking to better understand Typography and how it relates to web design. They don’t need to have a coding or design background, but that would be an asset. Learning Outcomes Understand the different types of fonts and when to use them Recognize the various personalities and tones fonts have and how they can affect your message Know what the current trends are in Typography and web design Use theme options and/or plugins to modify fonts Leverage Google Fonts and integrate them directly into your theme

Have you ever built a house? Imagine buying a lot, hiring a contractor, and then he shows up with a crane, bulldozer, and some 'crete and says "I'm ready." We often do the same thing when we build websites. We know we want a website, but don't do the necessary planning to turn our ideas into reality. In wireframes for WordPress, I will discuss what wireframes are, my process for creating them, and how they fit into WordPress.

Good graphic design doesn’t happen by mistake, and neither does clever font marriage. With this Ultimate Guide to Font Pairing we show you how to make your designs beautiful, with simple and effective type applications Read more at http://blog.canva.com/the-ultimate-guide-to-font-pairing/#Q3yEZPx6iwbBkRME.99

A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.

The document discusses usability and provides tips for improving the usability of websites. It addresses common usability issues like not knowing what page you are on or not being able to find what you are looking for. It provides solutions like ensuring the logo links to the home page, using clear navigation, typography, forms, and calls to action. The document emphasizes that usability is important for user satisfaction and business results.

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.

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

Responsive Design is the buzz in design, but as we all know, design is only part of the story. With the arrival of the HTML5, CSS3 and javascript triumvirate we can no make truly immersive mobile and desktop browser experiences. Coupled with modern PHP web application practices, your web app will feel and act closer to a native app, at a fraction of the cost. In this presentation, we'll dive into designing your modern web application to take advantage of as much of the platforms' limitations and advantages. Sure, you can't use the camera, but in many cases can use the accelerometer, and it'll always be granted to look right, any angle you look at it! These days, there's no excuse for not having a "mobile version" when all you need is one site that can transform itself to suit the device!

Responsive web design allows a website to adapt to different screen sizes using fluid grids, scalable images, and media queries. It involves developing sites using relative units like percentages instead of pixels so elements resize proportionately. Media queries allow different CSS stylesheets to be loaded depending on screen width, orientiation, resolution and other factors. This allows a single website to be accessed seamlessly on any device from phones to desktops to tablets without needing separate mobile sites.

This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.

Slides for my Adobe MAX 2011 presentation on Optimizing Sites for Mobile Devices. In this hands-on lab, I explore the concept of developing a mobile strategy that approaches mobile as an equal partner in the design process, and explores techniques to help site content deploy across devices and contexts.

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.

Designing for the web is no longer what it used to be. The number of devices with web-browsing capabilities is growing at an increasing speed. RWD is an approach aimed to provide a solid viewing experience for a multiple of screens with one set of code.

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 presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.

The document discusses responsive web design, which involves creating websites that automatically adapt their layout to different screen sizes and devices using flexible grids, flexible images and media, and media queries. The key ingredients of responsive web design are a flexible grid-based layout, flexible images and media that resize appropriately, and media queries which allow the application of CSS styles based on characteristics of the device. Responsive design aims to provide an optimized viewing and interaction experience across a wide range of devices without the need for separate mobile sites.

This document discusses responsive web design. It defines responsive design as adjusting a website's layout to different screen sizes and devices. Key aspects of responsive design include fluid grids that adapt to different widths, responsive images that scale appropriately, and responsive fonts whose size adjusts. Media queries allow applying CSS styles conditionally based on screen width. The ideal fluid layout works across browsers from 780px to 1260px, accommodating most users. Responsive images avoid sending large files to small devices. Responsive typography optimizes line lengths for readability.

Is your site ready for the mobile web? Are you sure? Go ahead, check it on your phone, and your kid's phone, and a tablet, and some Android dealies, and a Bleakberry. And a TV or two. I'll wait. That was an eye-opener, right? Web design and front end development has never been more complex than it is now, and it's likely to get worse before it gets better. Should you design your site "Mobile First"? How about "Adaptive" or "Responsive"? What's the difference between those again? I want to talk about why you might want to choose these approaches to your project. CSS is also not really up to the task of managing all this complexity. Sure, it *can* do it, but pure CSS strains almost to the breaking point under the pressure. So let's welcome Sass to the party. Sass is a CSS preprocessor that gives CSS authors the tools we've been aching for in creating and managing large and complex CSS projects. We'll cover a few of the Sass basics, but the real value here is in the more sophisticated tools that let you manage all the moving parts necessary in creating all this new-fangled wizardry. We'll cover: - Mobile First - Adaptive Design - Responsive Design - Stand-alone mobile options - Sass - Mobile-focused tools - Compass - Survival Kit - Susy

These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12