The document summarizes topics covered in a responsive design meetup, including an overview of responsive frameworks like Foundation and Bootstrap, common navigation patterns, the use of preprocessors like Sass and Less, responsive images, and polyfills like Picturefill. Breakpoints, media queries, flexible grids, and responsive typography, buttons and forms are some techniques discussed for building responsive websites.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
Although responsive web design has only been around for a few years, it's grown up a lot since first we started talking about fluid grids and media queries. Now, we look to responsive design with the goal of providing a good experience for every user on every device. From the DC Web Women Code(Her) Conference, 9/13/14.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.
Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.
Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
Although responsive web design has only been around for a few years, it's grown up a lot since first we started talking about fluid grids and media queries. Now, we look to responsive design with the goal of providing a good experience for every user on every device. From the DC Web Women Code(Her) Conference, 9/13/14.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.
Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.
Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
Talk from The Web Is in Cardiff, October 2014 exploring the business case for web performance, and some of the underlying factors that can make sites slow
A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
Mobile Web Performance - Getting and Staying FastAndy Davies
Slides from mine and Aaaron Peter's talk at QCon London (Mar 2014) on how to measure mobile web performance, things that affect in and how to improve it
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
Talk from The Web Is in Cardiff, October 2014 exploring the business case for web performance, and some of the underlying factors that can make sites slow
A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
Mobile Web Performance - Getting and Staying FastAndy Davies
Slides from mine and Aaaron Peter's talk at QCon London (Mar 2014) on how to measure mobile web performance, things that affect in and how to improve it
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehrJens-Christian Fischer
Früher war alles besser - sowieso! Konnte man vor 20 Jahren alleine mit HTML einen Webauftritt gestalten, hat sich die Anzahl der Technologien, die eine Webentwicklerin beherrschen muss, vervielfacht. Was ist wichtig, was unwichtig? In diesem Vortrag beleuchtet Jens-Christian den aktuellen Zoo von Technologien, und zeigt auf, wie sich diese Vielfalt sinnvoll bändigen lässt.
HTML(5), CSS(3), JavaScript, CoffeeScript, JavaScript Frameworks (jQuery, Prototype, Moo, Dojo, Ext, ...), JavaScript Microframeworks (Backbone, Ember, Flatiron), Templatingsprachen, Hilfsmittel zur Gestaltung von CSS (SASS, SCSS), Responsive Design, Browsererkennung, Caching, Performancetweaks, Testing und vieles mehr wird thematisiert.
Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.
Code examples at: https://github.com/founddrama/vt-code-camp
HTML5 and CSS3 Refresher
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.
http://www.ivanomalavolta.com
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
If you want to design your first custom WordPress theme, this talk is for you. You’ve been venturing out little by little, changing some CSS here and HTML there. You’ve even created a child theme or two. But now it’s time to take things to the next level. You want something that’s all yours!
You convinced your friend put together a design for you in Photoshop, and now it’s time to take the next step. How do you get that beautiful concept to translate into a living, breathing WordPress theme?
That’s what we’ll cover in this action-packed presentation geared toward the curious beginner and intermediate WordPress fans.
Alt text is one of the key components that will make your website more accessible to users with disabilities. But alt text is more than just describing what you see in an image. It needs to consider context, and make sure that screen reader users are supplied all the same information that is available to visual users.
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
You can launch the best-looking website ever, but if it’s not easy to use, it’s not going to be successful. Learn to think like a user and uncover usability problems that might not be apparent at first glance. Find out some basic improvements you can implement to make your site more usable and accessible. User experience isn’t just for designers to think about: everyone who works on a website has the opportunity to make the user experience better. Even little changes can make a big difference.
Presented at WordCamp Calgary, OpenWest, Web Unleashed, ThunderPlains, and ConFoo Vancouver in 2017. Presented at ConFoo Montreal in 2018.
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.
Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.
Your website's users want to get stuff done, and you probably aren't making it easy for them. When users encounter forms with unnecessary steps, content that requires too many clicks to access, or things that just don't make sense, they often give up. In this talk, you’ll see some practical examples of sites that do a good job of making interactions and content easy to follow and understand, and you'll learn how to help your users get to where they want to be without annoying them on the way there.
Presented in 2016 at ConFoo.
Color is one of the first things we learn how to do in CSS — and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.
Presented in 2015 & 2016 at Amazon's WebDevCon, ConFoo, Breaking Development, Mobile+Web Dev Conference, Code Fellows Seattle, CascadiaFest, CSS Summit, CSS Brigade Vancouver, CSS Day Amsterdam, Future Insights Live, WebVisions NYC, and Albany UX.
Your content is the most important feature of your website, so it's important to make sure that the text looks good and is easy to read no matter what device type or screen size it's being viewed on. One size does not fit all when it comes to typography, but you can use media queries to adjust type qualities such as size, line height, column width, margins, hyphenation, and even typeface depending on the viewport size. Learn how you can use CSS to apply design rules that will make your typography look better and perform better across devices. You'll also find out how typography affects the loading time of your website, and what you can do to improve performance.
Presented in 2015 at ConFoo and Albany UX. Presented in 2014 at WebVisions Chicago, Blend Conference, Frontend Conference Zurich, Refresh Ottawa, Mobile+Web Dev Conference, STC Summit, Bmoresponsive, ConvergeSE, and Girl Geeks Montreal.
168. Frameworks
Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained
(Joshua Johnson) - August 2012
http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-
frameworks-and-boilerplates-explained/
15 More Responsive CSS Frameworks & Boilerplates Worth Considering - August
2012
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-
boilerplates-worth-considering/
169. Navigation
Responsive Navigation Patterns (Brad Frost) - February 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-
design/
10 Responsive Navigation Solutions and Tutorials - August 2012
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-
tutorials/
10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) -
October 2012
http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-
successfully/
170. Preprocessors
Sass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012
http://www.vanseodesign.com/css/css-preprocessors/
An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September
2011
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-
comparison-to-sass/
Responsive Web Design in Sass: Using Media Queries in Sass 3.2 (Mason Wendell)
- April 2012
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-
queries-in-sass-32
Create faster fluid layouts with LESS (Paul Mist) - August 2012
http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less
172. Responsive Images
W3C Responsive Images Community Group
http://www.w3.org/community/respimg/
Which responsive images solution should you use? - May 2012
http://css-tricks.com/which-responsive-images-solution-should-you-use/
Responsive Images and Web Standards at the Turning Point (Mat Marquis) - May
2012
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-
turning-point/
Mo’ Pixels Mo’ Problems (Dave Rupert) - September 2012
http://www.alistapart.com/articles/mo-pixels-mo-problems/
Compressive Images (Scott Jehl) - October 2012
http://filamentgroup.com/lab/rwd_img_compression/
173. Resources: Responsive Tables
A Responsive Design Approach for Complex, Multicolumn Data Tables
http://filamentgroup.com/lab/
responsive_design_approach_for_complex_multicolumn_data_tables/
Responsive Data Tables with jQuery
http://mobifreaks.com/coding/responsive-data-tables-jquery/
Responsive Patterns: Table Patterns
http://bradfrost.github.com/this-is-responsive/patterns.html#tables
Responsive Data Tables and Screen Reader Accessibility (Jason Kiss) - August 2011
http://www.accessibleculture.org/articles/2011/08/responsive-data-tables-and-
screen-reader-accessibility/
jQuery Mobile Column Toggle Table Mode
http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-column-toggle.html
174. Prototyping & Design Process
Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-
foundation/
Design Process In The Responsive Age (Drew Clemons) - May 2012
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-
age/
Responsive Web Design Sketch Sheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Style Tiles
http://styletil.es/
175. Books to Read
Responsive Web Design
Ethan Marcotte (2011)
http://www.abookapart.com/products/responsive-web-design/
Mobile First
Luke Wroblewski (2011)
http://www.abookapart.com/products/mobile-first
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
Aaron Gustafson (2011)
http://easy-readers.net/books/adaptive-web-design/
Implementing Responsive Design: Building sites for an anywhere, everywhere web
Tim Kadlec (2012)
http://www.implementingresponsivedesign.com/
176. Other Websites & Misc.
@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD
Future Friendly
making things that are future-friendly
http://futurefriend.ly/
Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/
Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/