SlideShare a Scribd company logo
CSS3 Media Queries (and Responsive Web Design) but for real! The truth, the lies, and the legend! Rudy Rigot [email_address] @rudyrigot http://rudyonweb.net Clever Age
Responsive Web Design
Adaptive Web Design? Responsive Layouts? Mediaqueries? Fluid grid? Responsive Web Design That's my word!
"Whatever is well conceived is clearly said" - Nicolas Boileau SOME TRUTH

Recommended for you

Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012

A presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.

wordpresswordcampwebdesign
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. 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.

cssweb design and developmentresponsive
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World

This document provides an overview of responsive design and related topics. It discusses frameworks like Foundation and Bootstrap that help build responsive sites. It covers navigation patterns, preprocessors like Sass and LESS, and polyfills like Modernizr. It also lists resources for further reading on frameworks, prototyping, navigation, preprocessors, and books about responsive design.

responsive designframeworksweb design
Responsive Web Design "i'm a webpage, and i care about your display!"
? Responsive Web Design "i'm a webpage, and i care about your display!"
Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
See: Progressive Enhancement client 1 client 2 Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

Recommended for you

Responsive web design
Responsive web designResponsive web design
Responsive web design

Responsive web design involves creating layouts that adapt to different screen sizes using flexible grids and media queries. It allows for a device-agnostic approach and is easier to build than separate mobile sites. Key aspects of responsive design include planning with a mobile-first approach, prototyping, using consistent breakpoints based on content, usability testing, writing for different screens, designing visually hierarchical layouts, and addressing images and media. Testing is important throughout the process. While responsive design is a good base, other solutions like responsive or native apps may still be needed, and the job requires ongoing review.

responsive web designresponsiveweb
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...

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.

Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN

DNN is an excellent platform for a responsive website, but its important to know the ''Do's'' and ''Don'ts'' when designing responsively. This presentation will cover all things responsive: from wireframes and mockups, to media queries and javascript snippets. Get valuable tips on how to create a responsive site following modern web standards, while harnessing the power of the DNN framework. Learn how to design and plan your site, develop layouts with a fluid grid, and test to ensure your site looks great on tons of devices!

web designdotnetnukeresponsive web design
http://www.londonandpartners.com Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
http://www.prevention-medicale.org Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
Responsive Web Design "i'm a webpage, and i care about your display!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

Recommended for you

Responsive Design
Responsive Design Responsive Design
Responsive 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.

user experience designresponsive designweb design
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources

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.

responsive designweb designux
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!

Web accessibility is a crucial component of how we construct our websites today, some with legal requirements to ensure our websites cater to clients of all abilities and disabilities. But how much do we actually know about web accessibility, it's implications and it's implementation? How much do we know about the accessibility of the latest technologies like HTML5 and WAI-ARIA? And can we use these now? Once you begin to think about web accessibility and accessibility in general, you start to see the world in a very different way. In this talk, Tady Walsh, will take us through website accessibility, starting at the very beginning and will continue up to and including today's technologies. He will discuss, not only how to cater for the various types of disabilities our website visitors may have, but also the way we as developers and designers should be thinking about website accessibility, in every step of our work. Bio: Tady is a project manager and information architect with Arekibo Communications. With a background in front-end development, he has been working and thinking about web site design and development for the past 15 years. He's a vocal supporter of cool design, good user experience and considerate development methods. His thoughts and opinions can be found on twitter as @tadywankenobi, on his website at http://www.tadywalsh.com and also on Arekibo's blog http://blog.arekibo.com.

html5web accessibilitycss3
Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
? Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
http://w3qualite.net Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are" Wait! I read something, and i thought Responsive Web Design was this thing!

Recommended for you

Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017

This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include: - The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites. - How limitations in early design can foster creativity. - The importance of error handling and defensive coding practices. - Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps. - Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.

pixelsjavascriptprogressivewebapps
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers

An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.

user experience designhtml5web development
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?

The document discusses responsive images and issues around their implementation. It begins by outlining the new <picture> element and srcset/sizes attributes that allow images to adapt based on screen size and resolution. It then discusses challenges like managing many images, the need for image breakpoints to determine appropriate file sizes, and the tension between responsive images and the browser's lookahead parser. Overall, the document examines both the promise and difficulties of responsive images on the modern web.

responsive web designwebresponsive images
Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Yep, it used to be, and now it's blurry! Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot; Wait! I read something, and i thought Responsive Web Design was this thing!
Used to be the one called  Responsive Web Design  between May 2010 and July 2011!! Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
From now on, let's speak about this! Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
Wait! How about the  mediaqueries ?

Recommended for you

Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign

This document discusses responsive web design. It begins by outlining the failures of separate mobile websites and native apps. Responsive design is identified as the key approach because it allows for one website with a layout that adapts to any screen size. The document then covers various aspects of responsive design such as thinking mobile first, information architecture considerations, designing in the browser versus Photoshop, using a fluid or fixed grid, and making design decisions beyond just visual design.

netlash-bseenmobilewebdesign
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites

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

web designresponsive web designmobile
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design

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.

ethan marcottehtml5responsive web design
Mediaqueries = technical tool Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
Let's get some hands dirty a little SOME TECH
Why mediaqueries?
The problem Server Client Webpage (html, css, js, and all that stuff)

Recommended for you

HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?

Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.

html5alternativecss3
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials

Presentation to: Chicago Web Professionals Meetup Group - February 12, 2013. Responsive Web Design NYC Meetup - January 22, 2013.

responsive designweb designresponsive web design
15 Web Design Trends for 2013
15 Web Design Trends for 201315 Web Design Trends for 2013
15 Web Design Trends for 2013

What's happening in the web design world? Here are 15 trends in web design - check them out, see if you use them, and see if you think these are useful!

web designtrendswebsites
The problem Server Client Webpage (html, css, js, and all that stuff) Monochrome, tiny e-book Same webpage (same css& js ?)
Two solutions!
Solution 1: the serves sends different files Server Client Monochrome, tiny e-book Wait! How the hell do i know who i'm talking to?
Solution 1: the serves sends different files Server Client Monochrome, tiny e-book HTTP headers (User-Agent) HTTP headers (User-Agent)

Recommended for you

Content Driven Design
Content Driven DesignContent Driven Design
Content Driven Design

How to do content driven design with two WordPress cases. Session by Topias Dean in WordPress Café on November 10th, 2015.

content driven designdesigncontent design
Design YOUR brand inside trade.Berry
Design YOUR brand inside trade.BerryDesign YOUR brand inside trade.Berry
Design YOUR brand inside trade.Berry

The reason why your Personal Branding is so important as a leader inside trade.Berry, is that the image of yourself is a real, live and tangible proof of the fact that things have changed in this industry. Ethics, transparency and human interaction are the main values we have craved. Take the lead and be the leader! Your invitation & More materials on www.sales-am.com

onlinetradenetworking
Taxonomy-Driven UX
Taxonomy-Driven UXTaxonomy-Driven UX
Taxonomy-Driven UX

Consistency is crucial to a good user experience. Designers go to great lengths to create and test consistent visual designs. The structural design of an information environment, which is of equal importance to a good user experience, is too often ignored. Blumauer presents a “four-layered content architecture” for making sense of any information environment by clearly distinguishing between the content, metadata, and semantic layers and the navigation logic. He discusses several use cases for a taxonomy-driven user experience such as personalization or dynamically created topic pages.

knowledge graphuser experiencesemantic web company
Solution 1: the serves sends different files Server Client Monochrome, tiny e-book HTTP headers (User-Agent) HTTP headers (User-Agent)
Browser sniffing is NOT an ideal solution!
1- User Agent parsing is error-prone Opera 9   Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a   Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution!
1- User Agent parsing is error-prone Opera 9   Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a   Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution! http://www.allocine.fr

Recommended for you

Content Strategy + Navigation Design: UX Overview + Considerations
Content Strategy + Navigation Design: UX Overview + ConsiderationsContent Strategy + Navigation Design: UX Overview + Considerations
Content Strategy + Navigation Design: UX Overview + Considerations

An overview of the key aspects and elements in creating effective ux, content strategy and navigation for content- intensive sites, from publishing to commerce, starting with the basics of CMSes and how most content sites are structured. Taught at a 1-day workshop at General Assembly, 8/17/14.

mediauxstrategy
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)

Wasis Adi Putranto is a Practice Lead for DevOps at OLX Indonesia, the world’s leading classifieds platform, with a presence in more than 40 countries around the globe. This slide was shared on Tech in Asia DevTalk : “Kick-ass Recipe Security for Your Product" in collaboration with PHP Indonesia Community on 22 March 2017. Get updates about our dev events delivered straight to your inbox by signing up here: https://goo.gl/RctmO0 ! Be the first to know when new information is available!

technologysecuritystartup
Web Design And Development With Open Source
Web Design And Development With Open SourceWeb Design And Development With Open Source
Web Design And Development With Open Source

This is my presentation at "Software Freedom Kosova Conference 2009" where I spoke about Web Design and Development with Open Source tools. The conference was held in Pristina, Kosova on 29 and 30 August 2009. This presentation was done with Open Office Impress.

openwebsource
1- User Agent parsing is error-prone Opera 9   Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a   Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10   Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!
1- User Agent parsing is error-prone Opera 9   Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a   Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10   Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! But...
1- User Agent parsing is error-prone Opera 9   Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a   Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10   Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!
1- User Agent parsing is error-prone Opera 9   Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a   Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10   Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! http://www.state.gov

Recommended for you

Learn how to Responsive web desing
Learn how to Responsive web desing Learn how to Responsive web desing
Learn how to Responsive web desing

This is the thing that U are looking for. This is the best tutorial about responsive web design.I assure U after watching this presentation you definitely will be an expert as responsive web designer. This tutorial will teach you how to make fit your web site in every kinds of device . This Slide will Provide you with tips and ideas related to each of the qualities that a successful responsive web design must have. For hire me on fiverr:- https://goo.gl/Ouv3VL

responsive web templateweb site desingresponsive web design
Student Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and MoreStudent Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and More

This document outlines how to establish student mentoring programs within English curriculums. It discusses pairing students with professionals in areas like creative writing, technical writing, and linguistics. It describes the benefits of mentoring for mentees, mentors, and organizations. It provides details on how to start a program, including recruiting mentors and mentees, suggested activities, and administrative materials that can be adapted from an existing mentoring program toolkit. The presentation aims to demonstrate how mentoring can strengthen student and professional communities within the field of English.

#stc15leaders#stc15
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals

This document provides an introduction and overview of Bootstrap, an open-source front-end framework for developing responsive, mobile-first web sites and apps. It discusses what Bootstrap is, its mobile-first approach, rich component set, theming and customization options. It also demonstrates how to set up and configure Bootstrap, customize it using SASS and CSS overrides, and highlights some of the speaker's recent publications.

html5javascriptbootstrap
1- User Agent parsing is error-prone 2- Browsers are liars! IE8:   Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0 (...) Wait, what?! Browser sniffing is NOT an ideal solution!
1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers? Browser sniffing is NOT an ideal solution!
1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers ? 4- And you're sure you know ALL the browsers... from the future?! Browser sniffing is NOT an ideal solution!
Solution 2: the serves sends everything, the client decides what to use Server Client Monochrome, tiny e-book

Recommended for you

Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites

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.

responsive web designresponsive designmobile
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...

This document discusses bringing an atomic design approach to Sitecore development. It introduces atomic design principles which involve building up small reusable components (atoms) into larger molecules and organisms. These can then be assembled into templates and pages. The document demonstrates how this approach can be translated to Sitecore by creating renderings, data templates and other items to represent atoms, molecules, organisms etc. It discusses challenges of the approach and benefits such as improved portability, consistency and extensibility.

sitecoreatomic designsugcon
Atomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラAtomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ

2015-05-30に開催された「春のフロントエンドまつり」での発表資料

csshtmlweb
But how? some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...
But how? CSS3 mediaqueries! @media  screen { } @media  handheld and (min-monochrome: 1) { } some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...
So... mediaqueries are not only about mobile! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width

Recommended for you

Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CC

Getting Familiar with Animate CC presented at the Adobe Community Professional (ACP) Roadshow Denver. February 2017.

flashanimate ccadobe
Responsive web design
Responsive web designResponsive web design
Responsive web design

This document summarizes an agenda for a responsive design roundtable discussion. The roundtable will cover topics including what responsive design is, the user continuum, and mobile web vs responsive design vs apps. It will take place on June 12, 2013 from 8am to 10am and be led by Christian Glover Wilson. The agenda includes 4 topics to discuss and time for Q&A.

"responsive web design"
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design

Este documento presenta la filosofía del diseño web adaptable o responsive design. Explica que con el aumento de dispositivos conectados a Internet, es necesario crear sitios web que se adapten a diferentes tamaños de pantalla. Define el responsive design como una filosofía que permite que un mismo sitio web se vea bien en todo tipo de dispositivo sin importar las resoluciones o tamaños, gracias a técnicas como media queries, proporciones flexibles y elementos adaptables. Finalmente, recomienda herramientas como frameworks front-end como Bootstrap para facilit

responsiveframeworkshtml5
So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! CC BY – Yusuke Kawasaki monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
Truth and lies, you said? SOME MYTHS
Every website should be responsive MYTH #1

Recommended for you

Using Content to Improve the Customer Experience
Using Content to Improve the Customer ExperienceUsing Content to Improve the Customer Experience
Using Content to Improve the Customer Experience

The document discusses how pharmaceutical companies can improve customer experiences through better use of content and digital channels. It notes that customers now expect personalized experiences across multiple channels. The role of sales representatives is changing as well, as reps utilize digital tools to engage with healthcare providers. However, companies face challenges around inefficient content production processes and inability to deliver consistent, compliant content across channels. The document proposes that companies transform their "content engine" by standardizing processes, scaling production, and integrating internal and external content to engage customers through more relevant, timely content delivered via multiple channels. This approach could yield benefits like reduced cycle times, cost savings, and improved customer engagement.

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design

Joseph Labrecque gave a presentation on responsive web design. He defined responsive web design as allowing desktop web pages to adapt to different screen sizes. He discussed important concepts like CSS media queries and fluid grids. He demonstrated how to use media queries to apply different styles based on screen width. He also overviewed common CSS layout methods and responsive frameworks like Bootstrap and Foundation. Finally, he highlighted tools for responsive design like browser developer tools and Adobe programs like Dreamweaver and Animate.

responsive web designrwd
Web Design Trends for 2014
Web Design Trends for 2014Web Design Trends for 2014
Web Design Trends for 2014

New ideas for web design are emerging every day. Discover some of the most popular trends we see emerging in 2014.

web designwebsite designgraphic design
Every website should be responsive MYTH #1
Could be one page Could be another page Could be another other page http://www.facebook.com
Could be one page Could be another page Could be another other page http://www.facebook.com
Browser sniffing...

Recommended for you

Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop

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.

responsive designweb designuser experience design
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design

- Responsive web design involves creating interfaces that work across a variety of screen resolutions using CSS3 media queries and fluid design. - Designers should start with a mobile-first approach, designing the interface for mobile and expanding it for larger screens. - Key techniques include using flexible units like percentages and ems, responsive images, and media queries to trigger layout changes at breakpoint widths. Frameworks can help implement responsive grids.

interaction designweb design and developmentresponsive
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)

The document discusses issues with supporting older browsers and ensuring websites are accessible to all users. It notes that some users see "broken" sites with older browsers. The suggestions are to not build broken sites, offer basic support as long as it's not broken, use universalie6.css or warnings for real problems, and include visual treatments integral to branding. Comments acknowledge the need to support older browsers but also express excitement about CSS3 and a desire to use new techniques once browsers have fully implemented standards.

elliotjaystocksfowd
Browser sniffing...
Responsive Web Design is awful for front-end performance MYTH #2
Responsive Web Design is awful for front-end performance MYTH #2
Truth because... USELESS ! some css for another device some css for one device

Recommended for you

Responsive Design
Responsive DesignResponsive Design
Responsive Design

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It involves using fluid grids, flexible images, and media queries to automatically adjust for different screen sizes and devices. While the concept has existed since the early days of the web, it has grown in popularity recently due to advances in CSS3 and JavaScript that allow for more flexible and dynamic layouts. Responsive design aims to provide an optimal viewing and interaction experience across a wide range of devices by adapting the layout depending on screen size and orientation.

lrdnugweb design and development
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)

The document discusses embracing progressive enhancement and new CSS techniques. It argues that a small percentage of users seeing enhancements today will grow over time as browser support improves. The author believes designers have a duty to push forward-thinking development by using new CSS features, even if they don't validate or work in all browsers currently. Small things like attribute and nth-child selectors can make code more efficient. Degradation, not validation, should be planned for. The flexibility of the web is a blessing, not a curse, so sites can ensure a good experience for most while offering a great experience for some users.

elliotjaystocks
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild

1. The document discusses responsive web design (RWD) and how it can be implemented simply using media queries. 2. It notes that RWD only requires learning one line of code - media queries like @media screen and (min-width:1025px) { /* your CSS here */ } 3. However, it also cautions that RWD requires more than just technical implementation - it involves designing for different screen sizes and a focus on user experience across devices.

rich quickport80responsive web design
Truth because... USELESS ! …  but there may be solutions? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot; min-width : 600px &quot; href=&quot;styles-600.css&quot; /> some css for another device some css for one device
Truth because... USELESS ! …  but there may be solutions? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot; min-width : 600px &quot; href=&quot;styles-600.css&quot; /> Ouch, browsers download them all anyway !  (for now...) some css for another device some css for one device
Truth because for some browsers... USELESS ! some css for another device some css for one device png jpg jpg png jpg png
Truth because for some browsers... USELESS ! …  but this is being fixed! some css for another device some css for one device png jpg jpg png jpg png

Recommended for you

Rails Conf Talk Slides
Rails Conf Talk SlidesRails Conf Talk Slides
Rails Conf Talk Slides

The document discusses challenges with getting users to adopt new technologies like RSS and web 2.0 features. It notes that only a small percentage of internet users are aware of or use RSS, and many consume RSS feeds without realizing it through web portals. It also discusses how users are often not aware of new features or don't see the value in them. The document advocates talking to users to understand how technologies could fit into their lives and designing products with the intended users in mind from the beginning.

Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2

This document discusses progressive enhancement and intentional degradation in web design. It covers embedding fonts and new design possibilities with CSS3, including issues with font embedding and potential solutions. The document encourages using new CSS3 techniques now while planning for degradation, and argues that validation is not essential as new techniques will not validate initially. In 3 sentences: The document discusses progressive enhancement and intentional degradation, embedding fonts and new CSS3 design possibilities, and encourages using new techniques while planning for degradation and argues validation is not essential for cutting-edge techniques.

elliotjaystocks
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design

This document discusses responsive web design. It begins by defining the problem of desktop designs being unusable on mobile devices and having separate mobile sites. It then describes the key aspects of responsive web design: 1) fluid grids and flexible layouts based on proportions rather than pixels, 2) media queries to deliver different styles based on screen size, and 3) flexible images that scale to fit their container. It encourages researching users and sketching out the mobile experience before developing with a responsive grid, media queries, and frameworks.

information architectureuxuser experience
Truth because for all browsers... <img class=&quot;hide_me&quot; src=&quot;image.png&quot; /> USELESS ! img.hide_me { display: none; } img.hide_me { display: inline; } png
Truth because for all browsers... <img class=&quot;hide_me&quot; src=&quot;image.png&quot; /> USELESS ! …  but there are solutions to come !! css rule &quot;content&quot; media query listener dedicated javascript img.hide_me { display: none; } img.hide_me { display: inline; } png Meh... Meh... Meh...
Responsive Web Design is awful for front-end performance True, not great, but will get better! MYTH #2
My Responsive Web Design is going to look like crap on IE6... MYTH #3

Recommended for you

Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010

The document discusses the benefits of designing websites directly in the browser using HTML and CSS rather than designing first in Photoshop. It argues that designing in the browser results in more accurate and web-native designs that are buildable because the design is being built as it is designed. It provides tips for getting started with designing in the browser such as using frameworks for layouts, embracing progressive enhancement, and anticipating how the design will be implemented with content management systems like Drupal.

cssbrowserdesign
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...

Slides from my appearance at Web Directions South 09: a talk that combines my presentations 'Stop Worrying & Get On With It' and 'Progressive Enhancement & Intentional Degradation'.

elliotjaystocks
Going mobile - tip, tricks and tools for building mobile web-apps
Going mobile - tip, tricks and tools for building mobile web-appsGoing mobile - tip, tricks and tools for building mobile web-apps
Going mobile - tip, tricks and tools for building mobile web-apps

The document discusses tips and challenges for building mobile web apps. It notes that while mobile capabilities have improved, developing for the wide variety of devices, browsers, and firmwares remains difficult. Complex layouts are especially challenging due to varying screen sizes and lack of mouse/keyboard. The document recommends tools like WURFL and WALL to detect device capabilities and serve the appropriate experience, as well as testing on actual devices. It emphasizes keeping content simple, reducing requests/file sizes, and adapting to changing mobile landscapes.

osdc2008auosdcmobile
My Responsive Web Design is going to look like crap on IE6... MYTH #3
Falling back is easy some css for old browsers who don't get CSS3 Mobile first? respond.js! some css for another device some css for one device
…  but....
Falling broken is very easy too! some css for old browsers who don't get CSS3 fixing and testing stuff here... …  what am i breaking there? some css for one device some css for another device

Recommended for you

The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design

The document discusses redesigning the BYU website to be more responsive and adaptive to different screen sizes. It notes that the current layout is outdated since it was designed in 2007 for 1024x768 screens. Modern browsers come in a variety of sizes from mobile to desktop and beyond. The document recommends a mobile-first approach using responsive web design techniques like flexible grids, fluid images, and media queries to dynamically serve optimized layouts depending on screen width. It also advocates progressive enhancement and polyfills to gracefully support older browsers.

mobile firstweb designresponsive web design
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign

This document discusses wireframing and responsive web design. It introduces wireframing as a way to plan and test the structure, content, functionality, and user experience of a website. Wireframing helps with communication and reduces costs. The document recommends starting with sketches and low-fidelity wireframes before creating high-fidelity versions. It also suggests using CSS frameworks to create interactive wireframes and prototypes that are responsive across different screen sizes. Tools mentioned include paper, Axure, Balsamiq, Pencil, LucidChart, and CSS frameworks like Foundation and Bootstrap. The document stresses keeping wireframes simple while effectively demonstrating the responsive design.

mind the gapwireframingweb design and development
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Myths

This document summarizes key points from a presentation on web design myths. It discusses the relationships between usability, accessibility, web standards, and guidelines. It argues that these areas are not in conflict, but rather work together to create beauty in web design. Following guidelines can help attain quality and make things easier for users. The document also provides tips for collaboration, transparency in the design process, and bringing together functionality, forward-thinking approaches, and creativity.

As a graphist, thinking Responsive will ruin my creativity MYTH #4
As a graphist, thinking Responsive will ruin my creativity MYTH #4 Brandon Baunach CC BY
A perfect Responsive Web Design makes you want never to leave your smartphone MYTH #5
A perfect Responsive Web Design makes you want never to leave your smartphone MYTH #5

Recommended for you

FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009

The document contains comments from readers of a Smashing Magazine article on CSS3. The readers express hesitation to use CSS3 due to lack of browser support but also excitement for its possibilities. One argues for embracing differences in browsers rather than trying to make experiences consistent. Another says they will have to wait years before clients catch up to fully use CSS3.

elliotjaystocksfowd
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal

The document discusses pushing the boundaries of user experience with Drupal. It talks about using responsive design and progressive enhancement to build websites that automatically adapt to different screen sizes like desktop, tablet, and mobile. Responsive design uses CSS media queries and a fluid, data-driven approach to layouts. This allows a single website to effectively serve users on any device. The document recommends using responsive frameworks like Omega or Mojo themes for Drupal, and discusses building custom "UX modules" to enhance the user experience for different devices.

drupaluser experience
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmxMoved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx

This slide deck will be removed from here in the future. It has been moved to : https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx

tunnigxmsxmx
A perfect Responsive Web Design responds perfectly to ALL devices
So, why do we say &quot;Mobile first&quot;?
So, why do we say &quot;Mobile first&quot;? Minimalist as a user experience design constraint is good Market share is already massive, will get even better!
A good Responsive designer who doesn't know HTML flow is not that good MYTH #6

Recommended for you

Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com

There is often a vocabulary gap between designers an developers, who should aim towards a ubiquitous way of conversing about colours, typography, viewport sizes, or the responsive grid system of a digital product… To bridge this gap at the Guardian, we use a CSS pre-processor as a communication enabler through the abstractions it allows us to put in place. Talk given at the Front-end London meet-up on April 24, 2014. Listen to the talk + slides on YouTube: https://www.youtube.com/watch?v=DAfW1RSWYDA

guardianweb developmentcss
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013

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.

drupalresponsive web designsandcamp
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop

This document provides an overview of key differences between print and web design that a print designer needs to be aware of when designing for the web. It notes that web design involves coding for browsers rather than final printed artwork, uses boxes and grids rather than freeform layout, and loads progressively for users. The document recommends designing with performance in mind by keeping files sizes small and limiting images, colors and transparency. It also stresses the importance of usability principles like minimizing clicks and ensuring the purpose and functionality of a site is clear from the start.

webdesignworkshop
A good  fixed-width  designer who doesn't know HTML flow is not that good...
A good  fixed-width  designer who doesn't know HTML flow is not that good... …  a  Responsive  designer who doesn't know HTML flow is USELESS!
Methodology ideas, for projects supposedly too big for responsive SOME WAYS
Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development

Recommended for you

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

neo4jneo4j webinarsgraph database
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck

YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well. Some facts about WPRiders and why we are one of the best firms around: More than 700 five-star reviews! You can check them here. 1500 WordPress projects delivered. We respond 80% faster than other firms! Data provided by Freshdesk. We’ve been in business since 2015. We are located in 7 countries and have 22 team members. With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce. Our team members are: - highly experienced developers (employees & contractors with 5 -10+ years of experience), - great designers with an eye for UX/UI with 10+ years of experience - project managers with development background who speak both tech and non-tech - QA specialists - Conversion Rate Optimisation - CRO experts They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals. At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.

web development agencywpriderswordpress development
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing

Invited Remote Lecture to SC21 The International Conference for High Performance Computing, Networking, Storage, and Analysis St. Louis, Missouri November 18, 2021

distributed supercomputerdistributed machine learning
Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development HUHG!!
Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development And mostly here, because we don't have tools.
What do we know? We're dealing with something that &quot;moves&quot; depending on a context
We know how to prototype for one size

Recommended for you

Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf

Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment. How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.

pigging solutionsprocess piggingproduct transfers
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry

Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data. The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs. Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution! Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.

cloudcloud native observabilitycloud native
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf

Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 : - Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants. - REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.

genaicloudrgpd
There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
Non-useless &quot;responsive&quot; designers can be hard to find
Dealing with something that moves depending on context? It's all about the key-frames ! (and what's in between)
Dealing with something that moves depending on context? It's all about the key-frames ! (and what's in between)

Recommended for you

Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation

Manual Method of Product Research | Helium10 | MBS RETRIEVER

product researchhelium10 | mbs retriever
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf

As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models. This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through: - Standard ways of running dbt (and when to utilize other methods) - How Cosmos can be used to run and visualize your dbt projects in Airflow - Common challenges and how to address them, including performance, dependency conflicts, and more - How running dbt projects in Airflow helps with cost optimization Webinar given on 9 July 2024

apache airflowdbtdbt-core
Dealing with something that moves depending on context? For each template Prototype 1 Prototype 2 Prototype 3 Remember, we know how to prototype for one size!
Extra question: when is the design supposed to break down? Prototype 1 Prototype 2 Prototype 3
Two approaches
You know your content : content-driven Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Only works if you know your content really well, and if it doesn't vary too much accross the site or in time... Content content content content content content content content content content content content content content content content

Recommended for you

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx

This is a slide deck that showcases the updates in Microsoft Copilot for May 2024

microsoftmicrosoft copilot
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.

air force fighter planebiggest submarinezambia port
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation

Java Servlet programs

You don't know your content well: market-driven Prototype 1 Prototype 2 Prototype 3 1024 screen iPad (portrait) iPhone (portrait)
You don't know your content well: market-driven Prototype 1 Prototype 2 Prototype 3 1024 screen iPad (portrait) iPhone (portrait)
What do we know? We're dealing with something that &quot;moves&quot; depending on a context
We know how to prototype for one size

Recommended for you

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization. Key Takeaways: * Understand why connection pooling is essential for high-traffic applications * Explore various connection poolers available for PostgreSQL, including pgbouncer * Learn the configuration options and functionalities of pgbouncer * Discover best practices for monitoring and troubleshooting connection pooling setups * Gain insights into real-world use cases and considerations for production environments This presentation is ideal for: * Database administrators (DBAs) * Developers working with PostgreSQL * DevOps engineers * Anyone interested in optimizing PostgreSQL performance Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services

postgresqlpgsqldatabase
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf

To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.

data recoverydatadiskwarrior
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
Non-useless &quot;responsive&quot; designers can be hard to find
Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title How to symbolize content adjustment from a slide to its next slide? Stretching? Fixed size? Or even rotating? Cropping? Content content content content content content content content content content content content content content content content
Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Content content content content content content content content content content content content content content content content How to symbolize content adjustment from a slide to its next slide? Cropping? Stretching? Fixed size? Or even rotating?

Recommended for you

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023 https://arxiv.org/abs/2307.12980

How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx

Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.

rpa in transportationrpa in transportation industryrpa in transportation sector
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
What do we know? We're dealing with something that &quot;moves&quot; depending on a context
We know how to prototype for one size
There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
Non-useless &quot;responsive&quot; designers can be hard to find

Recommended for you

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides

If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights. During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to: - Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value - Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems - Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors - Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported - Look Ahead: Gain insights into where FME is headed with coordinate systems in the future Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!

Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure

Recent advancements in the NIST-JARVIS infrastructure: JARVIS-Overview, JARVIS-DFT, AtomGPT, ALIGNN, JARVIS-Leaderboard

jarvisjarvis-dftalignn

More Related Content

What's hot

CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
Css3
Css3Css3
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
Kate Walser
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Tom Hermans
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
Clarissa Peterson
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Russ Weakley
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
gravityworksdd
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
Clarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
Tady Walsh
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
Christian Heilmann
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
Jason Grigsby
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
Bart De Waele
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
Frédéric Harper
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
Chris Mills
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
Clarissa Peterson
 

What's hot (20)

CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Css3
Css3Css3
Css3
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 

Viewers also liked

15 Web Design Trends for 2013
15 Web Design Trends for 201315 Web Design Trends for 2013
15 Web Design Trends for 2013
David King
 
Content Driven Design
Content Driven DesignContent Driven Design
Content Driven Design
Exove
 
Design YOUR brand inside trade.Berry
Design YOUR brand inside trade.BerryDesign YOUR brand inside trade.Berry
Design YOUR brand inside trade.Berry
Sales-AM
 
Taxonomy-Driven UX
Taxonomy-Driven UXTaxonomy-Driven UX
Taxonomy-Driven UX
Semantic Web Company
 
Content Strategy + Navigation Design: UX Overview + Considerations
Content Strategy + Navigation Design: UX Overview + ConsiderationsContent Strategy + Navigation Design: UX Overview + Considerations
Content Strategy + Navigation Design: UX Overview + Considerations
Oxford Tech + UX
 
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
Tech in Asia ID
 
Web Design And Development With Open Source
Web Design And Development With Open SourceWeb Design And Development With Open Source
Web Design And Development With Open Source
Baki Goxhaj
 
Learn how to Responsive web desing
Learn how to Responsive web desing Learn how to Responsive web desing
Learn how to Responsive web desing
DHARA
 
Student Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and MoreStudent Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and More
Cindy Pao
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
Joseph Labrecque
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
Clarissa Peterson
 
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
SUGCON
 
Atomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラAtomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
Edward Fox
 
Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CC
Joseph Labrecque
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Christian Glover Wilson
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Adrian Alonso Vega
 
Using Content to Improve the Customer Experience
Using Content to Improve the Customer ExperienceUsing Content to Improve the Customer Experience
Using Content to Improve the Customer Experience
Shawn Roman
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Joseph Labrecque
 
Web Design Trends for 2014
Web Design Trends for 2014Web Design Trends for 2014
Web Design Trends for 2014
Accrinet Corporation
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
Clarissa Peterson
 

Viewers also liked (20)

15 Web Design Trends for 2013
15 Web Design Trends for 201315 Web Design Trends for 2013
15 Web Design Trends for 2013
 
Content Driven Design
Content Driven DesignContent Driven Design
Content Driven Design
 
Design YOUR brand inside trade.Berry
Design YOUR brand inside trade.BerryDesign YOUR brand inside trade.Berry
Design YOUR brand inside trade.Berry
 
Taxonomy-Driven UX
Taxonomy-Driven UXTaxonomy-Driven UX
Taxonomy-Driven UX
 
Content Strategy + Navigation Design: UX Overview + Considerations
Content Strategy + Navigation Design: UX Overview + ConsiderationsContent Strategy + Navigation Design: UX Overview + Considerations
Content Strategy + Navigation Design: UX Overview + Considerations
 
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
"Infrastructure Security Practice" by Wasis Adi Putranto (OLX Indonesia)
 
Web Design And Development With Open Source
Web Design And Development With Open SourceWeb Design And Development With Open Source
Web Design And Development With Open Source
 
Learn how to Responsive web desing
Learn how to Responsive web desing Learn how to Responsive web desing
Learn how to Responsive web desing
 
Student Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and MoreStudent Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and More
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
 
Atomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラAtomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
 
Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CC
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Using Content to Improve the Customer Experience
Using Content to Improve the Customer ExperienceUsing Content to Improve the Customer Experience
Using Content to Improve the Customer Experience
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Web Design Trends for 2014
Web Design Trends for 2014Web Design Trends for 2014
Web Design Trends for 2014
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 

Similar to Responsive Web Design - but for real!

Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
CLEVER°FRANKE
 
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)
elliotjaystocks
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
David Hudson
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)
elliotjaystocks
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
Rich Quick
 
Rails Conf Talk Slides
Rails Conf Talk SlidesRails Conf Talk Slides
Rails Conf Talk Slides
RubyOnRails_dude
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
elliotjaystocks
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
Daniel Drew Turner
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
canarymason
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
elliotjaystocks
 
Going mobile - tip, tricks and tools for building mobile web-apps
Going mobile - tip, tricks and tools for building mobile web-appsGoing mobile - tip, tricks and tools for building mobile web-apps
Going mobile - tip, tricks and tools for building mobile web-apps
Joshua May
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
Nate Walton
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
ipmindthegap
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Myths
elliotjaystocks
 
FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009
elliotjaystocks
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Acquia
 
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmxMoved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Milen Dyankov
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
Kaelig Deloumeau-Prigent
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
Achieve Internet
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop
SuseZ
 

Similar to Responsive Web Design - but for real! (20)

Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)Stop Worrying & Get On With It (FOWD Tour 2009)
Stop Worrying & Get On With It (FOWD Tour 2009)
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)Stop Worrying & Get On With It (WDC Bristol 2009)
Stop Worrying & Get On With It (WDC Bristol 2009)
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
Rails Conf Talk Slides
Rails Conf Talk SlidesRails Conf Talk Slides
Rails Conf Talk Slides
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
 
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
 
Going mobile - tip, tricks and tools for building mobile web-apps
Going mobile - tip, tricks and tools for building mobile web-appsGoing mobile - tip, tricks and tools for building mobile web-apps
Going mobile - tip, tricks and tools for building mobile web-apps
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
 
Debunking Web Design Myths
Debunking Web Design MythsDebunking Web Design Myths
Debunking Web Design Myths
 
FOWD NYC 2009
FOWD NYC 2009FOWD NYC 2009
FOWD NYC 2009
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmxMoved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop
 

Recently uploaded

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 

Recently uploaded (20)

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 

Responsive Web Design - but for real!

  • 1. CSS3 Media Queries (and Responsive Web Design) but for real! The truth, the lies, and the legend! Rudy Rigot [email_address] @rudyrigot http://rudyonweb.net Clever Age
  • 3. Adaptive Web Design? Responsive Layouts? Mediaqueries? Fluid grid? Responsive Web Design That's my word!
  • 4. &quot;Whatever is well conceived is clearly said&quot; - Nicolas Boileau SOME TRUTH
  • 5. Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot;
  • 6. ? Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot;
  • 7. Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 8. See: Progressive Enhancement client 1 client 2 Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 9. http://www.londonandpartners.com Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 10. http://www.prevention-medicale.org Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 11. Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 12. Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 13. Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 14. ? Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 15. http://w3qualite.net Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 16. Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot; Wait! I read something, and i thought Responsive Web Design was this thing!
  • 17. Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Yep, it used to be, and now it's blurry! Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot; Wait! I read something, and i thought Responsive Web Design was this thing!
  • 18. Used to be the one called Responsive Web Design between May 2010 and July 2011!! Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 19. From now on, let's speak about this! Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 20. Wait! How about the mediaqueries ?
  • 21. Mediaqueries = technical tool Responsive Web Design &quot;i'm a webpage, and i care about your display!&quot; Responsive Layouts &quot;how large may i be again ? Wait here as i rearrange my blocks!&quot; Fluid Grid &quot;how large may i be again? Wait here as i stretch my columns!&quot; Adaptive Web Design &quot;i'm a webpage, and i care about whoever you are&quot;
  • 22. Let's get some hands dirty a little SOME TECH
  • 24. The problem Server Client Webpage (html, css, js, and all that stuff)
  • 25. The problem Server Client Webpage (html, css, js, and all that stuff) Monochrome, tiny e-book Same webpage (same css& js ?)
  • 27. Solution 1: the serves sends different files Server Client Monochrome, tiny e-book Wait! How the hell do i know who i'm talking to?
  • 28. Solution 1: the serves sends different files Server Client Monochrome, tiny e-book HTTP headers (User-Agent) HTTP headers (User-Agent)
  • 29. Solution 1: the serves sends different files Server Client Monochrome, tiny e-book HTTP headers (User-Agent) HTTP headers (User-Agent)
  • 30. Browser sniffing is NOT an ideal solution!
  • 31. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution!
  • 32. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution! http://www.allocine.fr
  • 33. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!
  • 34. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! But...
  • 35. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!
  • 36. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! http://www.state.gov
  • 37. 1- User Agent parsing is error-prone 2- Browsers are liars! IE8: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0 (...) Wait, what?! Browser sniffing is NOT an ideal solution!
  • 38. 1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers? Browser sniffing is NOT an ideal solution!
  • 39. 1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers ? 4- And you're sure you know ALL the browsers... from the future?! Browser sniffing is NOT an ideal solution!
  • 40. Solution 2: the serves sends everything, the client decides what to use Server Client Monochrome, tiny e-book
  • 41. But how? some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...
  • 42. But how? CSS3 mediaqueries! @media screen { } @media handheld and (min-monochrome: 1) { } some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...
  • 43. So... mediaqueries are not only about mobile! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  • 44. So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  • 45. So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! CC BY – Yusuke Kawasaki monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  • 46. So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  • 47. Truth and lies, you said? SOME MYTHS
  • 48. Every website should be responsive MYTH #1
  • 49. Every website should be responsive MYTH #1
  • 50. Could be one page Could be another page Could be another other page http://www.facebook.com
  • 51. Could be one page Could be another page Could be another other page http://www.facebook.com
  • 54. Responsive Web Design is awful for front-end performance MYTH #2
  • 55. Responsive Web Design is awful for front-end performance MYTH #2
  • 56. Truth because... USELESS ! some css for another device some css for one device
  • 57. Truth because... USELESS ! … but there may be solutions? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot; min-width : 600px &quot; href=&quot;styles-600.css&quot; /> some css for another device some css for one device
  • 58. Truth because... USELESS ! … but there may be solutions? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot; min-width : 600px &quot; href=&quot;styles-600.css&quot; /> Ouch, browsers download them all anyway ! (for now...) some css for another device some css for one device
  • 59. Truth because for some browsers... USELESS ! some css for another device some css for one device png jpg jpg png jpg png
  • 60. Truth because for some browsers... USELESS ! … but this is being fixed! some css for another device some css for one device png jpg jpg png jpg png
  • 61. Truth because for all browsers... <img class=&quot;hide_me&quot; src=&quot;image.png&quot; /> USELESS ! img.hide_me { display: none; } img.hide_me { display: inline; } png
  • 62. Truth because for all browsers... <img class=&quot;hide_me&quot; src=&quot;image.png&quot; /> USELESS ! … but there are solutions to come !! css rule &quot;content&quot; media query listener dedicated javascript img.hide_me { display: none; } img.hide_me { display: inline; } png Meh... Meh... Meh...
  • 63. Responsive Web Design is awful for front-end performance True, not great, but will get better! MYTH #2
  • 64. My Responsive Web Design is going to look like crap on IE6... MYTH #3
  • 65. My Responsive Web Design is going to look like crap on IE6... MYTH #3
  • 66. Falling back is easy some css for old browsers who don't get CSS3 Mobile first? respond.js! some css for another device some css for one device
  • 68. Falling broken is very easy too! some css for old browsers who don't get CSS3 fixing and testing stuff here... … what am i breaking there? some css for one device some css for another device
  • 69. As a graphist, thinking Responsive will ruin my creativity MYTH #4
  • 70. As a graphist, thinking Responsive will ruin my creativity MYTH #4 Brandon Baunach CC BY
  • 71. A perfect Responsive Web Design makes you want never to leave your smartphone MYTH #5
  • 72. A perfect Responsive Web Design makes you want never to leave your smartphone MYTH #5
  • 73. A perfect Responsive Web Design responds perfectly to ALL devices
  • 74. So, why do we say &quot;Mobile first&quot;?
  • 75. So, why do we say &quot;Mobile first&quot;? Minimalist as a user experience design constraint is good Market share is already massive, will get even better!
  • 76. A good Responsive designer who doesn't know HTML flow is not that good MYTH #6
  • 77. A good fixed-width designer who doesn't know HTML flow is not that good...
  • 78. A good fixed-width designer who doesn't know HTML flow is not that good... … a Responsive designer who doesn't know HTML flow is USELESS!
  • 79. Methodology ideas, for projects supposedly too big for responsive SOME WAYS
  • 80. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development
  • 81. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development HUHG!!
  • 82. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development And mostly here, because we don't have tools.
  • 83. What do we know? We're dealing with something that &quot;moves&quot; depending on a context
  • 84. We know how to prototype for one size
  • 85. There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
  • 87. Dealing with something that moves depending on context? It's all about the key-frames ! (and what's in between)
  • 88. Dealing with something that moves depending on context? It's all about the key-frames ! (and what's in between)
  • 89. Dealing with something that moves depending on context? For each template Prototype 1 Prototype 2 Prototype 3 Remember, we know how to prototype for one size!
  • 90. Extra question: when is the design supposed to break down? Prototype 1 Prototype 2 Prototype 3
  • 92. You know your content : content-driven Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Only works if you know your content really well, and if it doesn't vary too much accross the site or in time... Content content content content content content content content content content content content content content content content
  • 93. You don't know your content well: market-driven Prototype 1 Prototype 2 Prototype 3 1024 screen iPad (portrait) iPhone (portrait)
  • 94. You don't know your content well: market-driven Prototype 1 Prototype 2 Prototype 3 1024 screen iPad (portrait) iPhone (portrait)
  • 95. What do we know? We're dealing with something that &quot;moves&quot; depending on a context
  • 96. We know how to prototype for one size
  • 97. There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
  • 99. Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title How to symbolize content adjustment from a slide to its next slide? Stretching? Fixed size? Or even rotating? Cropping? Content content content content content content content content content content content content content content content content
  • 100. Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Content content content content content content content content content content content content content content content content How to symbolize content adjustment from a slide to its next slide? Cropping? Stretching? Fixed size? Or even rotating?
  • 101. What do we know? We're dealing with something that &quot;moves&quot; depending on a context
  • 102. We know how to prototype for one size
  • 103. There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
  • 105. Responsive Designer? = Fixed-width Designer + Front-end Developer
  • 106. Responsive Designer? = Fixed-width Designer + Front-end Developer
  • 107. Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Content content content content content content content content content content content content content content content content Responsive Designer? = Fixed-width Designer + Front-end Developer ?
  • 108. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development Layout front-end testing (just to check!)
  • 109. Well now... what did we learn here today? SOME OUTCOME
  • 111. But design process hard to industralize CC-BY Hayden &quot;H Dragon&quot;
  • 112. But we are getting there, little by little... CC BY-NC-ND Victor Roblas
  • 113. To be continued in your projects... Thanks for listening, folks! If you feel like there's something you should ask me, come talk to me, i'm a human being! (also, i'm still hanging in Krakow tomorrow, so tweet me, and we'll hang out and speak about it!)

Editor's Notes

  1. So, this talk was given in Krakow, Poland, on Oct 21 st 2011, and i removed a few slides to make it more intelligible here. I&apos;ll skip the presentation of myself, because you can find that on the internet : http://rudyonweb.net/about
  2. So, the topic of the day is Responsive Web Design...
  3. I guess it&apos;s safe to say that it&apos;s been a little bit of a BUZZword lately (ah ah), and like any buzzword, it gets confused with a lot of other words. We&apos;ll try to do two things today: we&apos;ll try to kill the buzzword and put some acurate definitions on things; and then i&apos;ll try to give you some input about how a proper big &amp;quot;too-many-templates-not-to-wireframe&amp;quot; project might go. This last part is going to be interesting, because a lot of things are still being experimental at the moment, so the best practise are still much to be written.
  4. Alright, let&apos;s put some truth into this, and be acurate to kill the buzzwords. (you could say that the words don&apos;t matter on the battlefield, as long as everyone knows where we&apos;re going about, and i would agree; but i assume we&apos;re all professionals around here, so we&apos;re all into acuracy, supposedly)
  5. If i had to put a definition to a site in RWD, then it would be any website that cares about your display.
  6. It basically means that if your display width changes, no matter what the technical way is, you have a serious case of RWD on your hands!
  7. Adaptive Web Design is very often confused with Responsive, and there&apos;s a good reason for that: RWD is AWD! But reverse isn&apos;t true...
  8. It basically is a website that changes according to the browser context, whichever element of the context it uses. If you read the &amp;quot;Adaptive Web Design&amp;quot; book, thinking to read about RWD, you might be disappointed, because all that thing talks about is progressive enhancement (which is basically the same thing as AWD)
  9. Examples : here is a RWD, whose width adapts depending on the browser width. If you want to see responsive websites in actions, you might just want to go to http://mediaqueri.es/
  10. Whereas here is an adaptive website, which isn&apos;t responsive: it doesn&apos;t move when you resize your browser, however, look at what happens when you disable JS (the image to the left). The JS version offers a nice menu, and a beautiful slideshow ; that&apos;s exactly what they call &amp;quot;progressive enhancement&amp;quot;. Adaptive Web Design, in other words. Now you know the difference between the two pretty well, so let&apos;s move on.
  11. Fluid Grid is simple, and has been existing for years (people could do it from CSS2 already). Each of the columns of the vertical grid simply expands with the browser. The tricky bit is: the contents in the columns too need to be &amp;quot;fluid&amp;quot;!
  12. And Responsive Layouts are pretty much the same as Fluid Grids, but once in a while, blocs will move, and get on top of each other. Same tricky bit: the contents still need to be fluid, though.
  13. So this is what you get. A happy buzzword league, which you can relocate precisely in your brains, now!
  14. One question though: are you sure you got the difference between Responsive Web Design et Responsive Layouts?
  15. This is a blatant example of a website with RWD, but not especially Responsive Layouts. No bloc was moved during the making of this browser size change! (This is only the header of the site here, obviously. The site is a site about web quality, started by a few cool friends of mine)
  16. But some of you may ask...
  17. To which i respond : it used to be. Actually, the book speaks about Responsive Layouts, and refers to them as &amp;quot;Responsive Web Design&amp;quot;. The book was published by the almighty Jeffrey Zeldman (and written by Ethan Marcotte), but Zeldman published a blog post later saying they got the wrong word, and that RWD should point to any technique that allows you to have multiple-sized websites.
  18. So, basically, between the publishing of the book (May 2010) and the one of the corrective Zeldman blog post (July 2011), Responsive Layouts was what was called Responsive Web Design! So, you still find it heavily in litterature. What it proves, though, is that the topic is burning HOT, and that history is being written as we speak.
  19. From now on, all along this talk, we&apos;ll speak about this!
  20. By the way, didn&apos;t we forget one buzzword?
  21. One of the things they do: they&apos;re a technical tool (not a design concept, unlike the others), and among other things, they make that leap possible. (among a lot, lot of other things)
  22. Actually, let&apos;s speak about it further, mediaqueries are worth a chapter of this talk!
  23. To understand media-queries, what&apos;s best is to get back to the initial problem that ultimately created them.
  24. Alright, client server HTTP every day stuff. Nothing new.
  25. But now the same website goes to a different client. And it&apos;s not a fancy display screen like the other, it&apos;s a shitty monochrome e-book. How do i control better what is being showed in the e-book?
  26. Basically, it&apos;s either the server deciding, or the clients.
  27. If it&apos;s the server, the server sends a different CSS stylesheet to each device. But it needs to know first what device it&apos;s talking to.
  28. And if you look at it, devices identify themselves with something called a &amp;quot;User Agent&amp;quot;, which is sent in the HTTP headers by the client. Pretty awesome, isn&apos;t it?
  29. Well, actually no, not pretty awesome.
  30. I&apos;m not saying it&apos;s the devil in every case, but it is definitely not the ideal reponse to your issues (more about being pragmatic about that later)
  31. Some of you may know the story: when Opera 10 alpha got released, they used the same-looking User Agent as the previous version (pretty logical). But, the User Agent being quite messy (as you can see), its parsing can go wrong. So when some servers were looking into separating old to new browsers, they recognized Opera, and read the 7 first characters of the User Agent string, thus thinking to be talking to &amp;quot;Opera/1&amp;quot;! Bottom line, some websites were displaying their old sucky version to the latest Opera browser!
  32. Of course, this kind of stupid mistakes in code wouldn&apos;t happen for a major website, since as we all know, they&apos;re all made by clever people who never make mistakes. So it wouldn&apos;t happen to one of the most visited websites in France, our local imdb, for sure (oh wait, yep it did!)
  33. So, when Opera release its final 10 th version, they had to label it wrongly, to ensure that every server would still work fine. And every single person on Earth was happy ever after!
  34. Actually, they weren&apos;t...
  35. Because some other parsers trying to tell mobile browsers from desktop browsers think they&apos;re talking the Palm « Pre » while really talking to desktop Opera and its web engine, « Presto ».
  36. And of course, this would not happen to big websites, since they&apos;re still being made by clever, beautiful people who never make mistakes, like those who made the US Department of State website, for instance, which displays like the picture on the left while in the latest desktop versions of Opera! So that&apos;s one first reason to avoid browser sniffing: it&apos;s hard to parse a string as complex as the User Agent ; and that&apos;s actually also the reason why (wait for it....)
  37. … browsers constantly have to lie! This little trick comes from the time Mozilla was, compared to Mosaic, the only &amp;quot;rich&amp;quot; (well, like, having images and forms, woaw) browser out there, and some servers keep using sniffing scripts today to show crappy text versions of their webpages when talking to something else than Mozilla. Nice...
  38. Plus, anyway, even if the User Agents were reliable, and more semantic, would you be sure to cover ALL of them easily?
  39. And plus, all of those who have yet to exist?? So yeah, browser sniffing -&gt; to the trash for now!
  40. First solution was to let the server decide; second solution would be to send everything to the clients, and let THEM decide what CSS they&apos;re supposed to apply or not.
  41. So what you need is, in the CSS, to be able to tell which part of the CSS applies to which of the two clients (the nice display, or the e-book)
  42. And that&apos;s what media-queries are for initially ! Now, let me attract your attention to the fact that i&apos;m using a keyword which is &amp;quot;monochrome&amp;quot;. You might suess that &amp;quot;monochrome&amp;quot; is definitely not about smartphones, tablets, and other fancy stuff...
  43. And when you look at the 13 keywords that are mentioned in the spec candidate release (latest version to date), you can see that...
  44. … some of them are mostly for e-books, some are mostly for TVs, some mostly for resizable windows, some for mobiles, etc. Pretty simple graph, eh?
  45. Yeah, no, not pretty simple graph...
  46. But what i need you to remember is : mediaqueries are not especially about mobile. They&apos;re very much about each and every device type out there.
  47. Next, we&apos;re going to take a few myths that are being said about Responsive Web Design at the moment, and try to pragmatically tell the truth from the lies.
  48. One first myth that&apos;s heard out there...
  49. Ok, that&apos;s probably more of an opinion (Andreas Bovens from Opera was at Paris Web last week, and he didn&apos;t seem to agree very much), but it seems obvious to me that there are some use cases where the mobile webapp needs to be separated.
  50. For instance, take the Facebook homepage, right? You could make basically at least 3 decent mobile webpages from that! And responsive will make each page turn into one page in the mobile version. You can&apos;t separate the pages.
  51. When you look at Facebook&apos;s latest version of their mobile website, it does look like their home was taken from that green frame in the desktop. What happens to the other features, in that case?
  52. Of course, who says &amp;quot;different use case which justifies a separate app&amp;quot; says &amp;quot;redirection to the mobile website when smart&amp;quot;, and then says &amp;quot;browser sniffing&amp;quot;... Which means we might end up looking like that. There is no better technology today to achieve that, although i insist it is supposedly bad practise.
  53. So, since we&apos;re using bad practise, we might as well do it nicely: a clever way to enable the user to correct the sniffing mistakes when they happen, would be to get each version of the site to link to the other.
  54. Alright, myth 2! Bad for performance? People who say such things should be ashamed!
  55. Although, yeah, they&apos;re mostly right, though...
  56. One first obvious case: when you have a bit of CSS code (green) aimed at a device type (green), and another bit of CSS code (blue) in another media-query, aimed at other devices, then when the first device (green) downloads the CSS, the whole blue part is going to be entirely useless for him!
  57. However, one solution would be to lazy-load the bits of CSS that don&apos;t apply, i.e. to cut the various CSS bits for each mediaquery, each in a different file. The spec does allow you to write your media query in the &amp;quot;media&amp;quot; attribute of a &lt;link&gt; element while embedding a CSS file. The browser could then download only the files that match its current situation, and lazy load the others as the situation changes.
  58. However, this does not at all work, in any browser at the moment (i only tested Firefox, Chrome, and Opera, though): they all download all of the CSS files first, and think later. However again, if it is better for the performance of responsive websites, and it doesn&apos;t damage anything else, nothing forbids the browsers to implement it later on. (NB: this is something i haven&apos;t discussed with the people from Opera and Mozilla that i know; i&apos;ll make a blog post about it, and ask for their opinion, though, so stay tuned!)
  59. Second case: some browsers, when including CSS background images, download them, whether the CSS rule applies or not. Useless!! Naming them would be unfair, so let&apos;s just randomly name them &amp;quot;webkit-based&amp;quot; browsers. ;)
  60. However, the bug is already fixed in Webkit today, the browsers have just not all updated their Webkit engines enough to have the bug fixed. Chrome is up to date on most platforms, but i think to date, Safari is still making the mistake. But not for very long, obviously...
  61. Last case: you have an image in the HTML file, and it&apos;s hidden in the CSS for your device. All browsers today download the file. I had this conversation with Anthony Ricaud from Mozilla, and he was pretty clear about it: content image downloading can&apos;t be blocked by CSS rendering. HTML images shouldn&apos;t wait to know if they&apos;re hidden or not, basically (it would make the performances even way worse)
  62. However, some solutions are coming up. First, you can use the CSS rule &amp;quot;content&amp;quot; to insert the image on CSS (which will lazy-load it in every browser but Safari for now, as we just said); however, putting a content image in your CSS is definitely not smart for your semantic (and your SEO on the image) Or else, you have the &amp;quot;media query listener&amp;quot; feature that has been designed by Microsoft exactly to deal with such cases; however, in Paris Web last week, David Rousset from Microsoft was talking about it, and Daniel Glazman from the W3C CSS Working Group was in the room, and didn&apos;t seem so eager to see it join the spec. At last, you can lazy-load it with javascript! Either you write a script, or there are tons out there for that. But eh... it is javascript, so your accessibility expert might hate you for this...
  63. So at the end of the day, i&apos;d say: alright, the performances are impacted, for sure, but it is an issue that is actively being worked on. Either from progressive bugfixes in the browsers, or by hacking stuff a little bit, and have to make compromises on semantic or accessibility, to gain said lost performance.
  64. Myth #3!
  65. WROOOONG! I&apos;m not saying it is going to make your IE6 optimizations easier; but it will not make them harder either.
  66. An obvious reason would be because fallbacking is easy: old browsers don&apos;t understand mediaqueries, so you can leave your code &amp;quot;for old desktop browsers&amp;quot; outside of any mediaquery, and override it for the newer browsers in mediaqueries. If you want to develop for front-end following the mobile first strategy (which, to me, was mostly introduced for design, but eh), you can write your CSS for mobiles in the mediaqueries-less part, and use respond.js or css3-media-queries.js, which gives IE6-7-8 all the mediaquery abilities. However, if your JS breaks, IE6-7-8 sees a mobile website, so it all depends on which importance you give to those browsers in your project. (for the sake of quality, i wouldn&apos;t do it personally)
  67. So, falling back is easy! But...
  68. Falling broken is also very easy! Because you quickly realize that some mediaquerie-ed CSS code is going to override some other; so if you are modifying your green section here,which targets your green device, and that your blue section is overriding this green section, you might be breaking what your blue device sees without even knowing it. So, you&apos;re supposed to test on every targeted device at each iteration... Yeah, pretty annoying...
  69. Myth #4
  70. Oh, come on, cry me a river here! We&apos;ve been through this before: there&apos;s a new kid on the block, and you have to technically learn about it and its constraints. It might take you some time (i didn&apos;t say it would be easy), but i&apos;m pretty sure you&apos;ll get there this one time again. And if you call yourself a webdesigner, but don&apos;t like when techniques change and improve, then maybe you should go back to print, where the technicality varies a lot less through time! (i&apos;m not saying this in an offensive way! Oh wait, yeah, i am a little bit, you know... but i&apos;m for sure not saying that print design is easier than webdesign)
  71. Moving on from the whiny designers, myth #5!
  72. Here, i strongly disagree! We&apos;re talking &amp;quot;perfect&amp;quot; responsive design here, so of course, sometimes, you&apos;ll go the wrong way for clients&apos; constraints.
  73. But i told you mediaqueries were about every kinds of devices... And i told you we could do fluid... So, ideally, if you have enough money to make the best responsive site possible, you should think about this, and make it ideally fluid for any device size. (for my blog, and most clients&apos; websites, we usually do centered fixed-width for screens, and fluid from the tablet size downwards)
  74. So, if you need to keep every size in mind, and not only about mobile, why do people say to think about mobile first?
  75. Simply because, pragmatically, you will learn by experience that trying to keep a design constrained through its simplicity is very, very constructive. It has happened to me before that a client seeing his mobile (separated) webapp liked it so much, that they decided to remake their desktop webapp from scratch using the ergonomic ideas we had on the mobile one! Another reason : market share! For now, you may still have more desktop visits than mobile visits on your site; however, it is pretty clear now that this will not last too long. So if your website will have more than six months to live, when you think mobile first, you basically think about your future users!
  76. Last but not least...
  77. Actually, this one&apos;s interesting: it has been debated a thousand times that webdesigners (fixed with, that is) should code a little bit, to understand how the HTML flow goes. I&apos;m definitely an advocate of that. I think it is possible to design without it, but you&apos;re missing enough information to let yourself make technical mistakes once in a while. However, in the responsive case...
  78. … NO WAY! The technical constraints have never been so tight, and there are far less things you can technically do, than your imagination allows. So if you are a webdesigner, and you want to go responsive, i&apos;m afraid there&apos;s going to be stuff you need to learn first...
  79. Alright, now that we all have a decent understanding of what Responsive Web Design truly is for real, we should become even more practical, and discuss how things might go in an actual, proper responsive project.
  80. Forgetting a few extra steps that are sometimes needed, this is how your average fixed-size project goes. What we&apos;ve found, is that every step takes at least a little bit extra complexity: since the specifications will include extra info about what should or should not be directly accessible in the mobile version, the back-end should support several image sizes for the same image, etc.
  81. But we also found that where most of the extra effort (and thus extra cost) will be noticed, is in these two steps. Prototyping a page that never looks the same is going to require a lot of time, and making and testing the responsiveness on the front-end developments as well.
  82. But as i previously said, even though the front-end development is going to take a lot of time, it won&apos;t be technically amazingly complex (mediaqueries are a pretty simple tool to approach) In prototyping, however, there is no special tool out there that is especially adapted to Responsive Web Design yet. So not only will we have to spend some effort, but we&apos;re going to have to be creative finding solutions.
  83. Let&apos;s first take a step back, and look at what we know (as of, which things we know how to do, and which problems we&apos;ll know we&apos;ll have) Here are two first things...
  84. &amp;quot;Something that moves depending on a context&amp;quot;? I don&apos;t know if this rings a bell to you, but it sounds to me like animation (Flash, or movies, or others...), except animation moves depending on time, and we are going to move depending on browser width. And any animator would tell you: all the staging is in deciding on the keyframes, and on how stuff happens in between keyframes.
  85. So we&apos;ll do the same: we&apos;ll define keyframes (which happen at some pre-decided browser widths), and we&apos;ll focuse on those, and on how stuff happens in between.
  86. This will take a loooooot of time and effort, because it means that for each template, you will have to do each keyframe. Say you have 15 templates (we&apos;re talking massive websites that can&apos;t be done without wireframing, eh), and you set you mind on 3 keyframes (which is basically a decent minimum), it means you will have at least 45 prototypes to make. Even though we made the design process amazingly more complex, each part of it still remains simple, as we have decent tools today to prototype websites for each size.
  87. This immediately raises a question though: how should i decide on my keyframes?
  88. Two approaches...
  89. If you know your content really, really well, you can try to see by yourself where it makes sense to have it break down... That&apos;s what i did with my blog, because i know basically about what lengths my posts may be, and i have two or three very simple (and similar to each other) templates. However, if your site is complex, this won&apos;t work too well; first because you rarely know your content too well at the beginning of a project; and also, even if you do, out of 15 templates, i guess your content on your homepage will not happen to break down the best on the same size as the content of the category, or the content of the article, or the content of the 404 page, or the content of the internal search results, etc...
  90. Another approach: rather than selecting those sizes randomly, you can allow yourself to be a little twisted, and look at what users use the most in real life. That way, you have a website that has a very, very perfectly-under-control design in the iPad or iPhone in portrait mode, and has a under-ok-control design on every other devices. Of course, the iPhone will certainly die someday (and if they keep running on patent lawsuits, maybe sooner than later! Ah damn, i promised myself i wouldn&apos;t troll today!), so picking those devices might not be accurate on the long term.
  91. So, what you can do, is have a look at your analytics if your website pre-existed (or on a similar website you or someone else might have), and check directly what resolutions your target users use for real at the time of design. It might (and certainly WILL) change from one year to another, but at least, rather than randomly picking sizes, you have the most decent starting point.
  92. Now we have the keyframes figured out, we said it was also about what happens between the keyframes. And the good news is, what happens is usually pretty similar: you don&apos;t have many way to &amp;quot;fluidify&amp;quot; a usually static element.
  93. What you can do, is try to list them at the beginning of the prototyping (or edit the list while prototyping), and decide which transition you&apos;re applying on each element. How to signify which?
  94. Well, here&apos;s an idea: you can give each transition a color, and apply it on your wireframe! We don&apos;t give a damn about colors on wireframes, right? Well then, here&apos;s an idea to use them right. Two notes: first, notice that only the images are involved. Indeed, text is naturally fluid, so you don&apos;t have to express how it will &amp;quot;fluidify&amp;quot;. And second: usually, past the width of the larger keyframe, we make it so the design remains fixed and centered (we don&apos;t want a text with 50 words per line!); this way, the colors on prototype 1 describe the transition between prototypes 1&amp;2; the colors on prototype 2 describe the transition between 2&amp;3; and those on prototype 3 describe the transitions when the design is smaller than the width of prototype 3. Easy!
  95. One last rock in our shoe: i said designers who don&apos;t know the responsive constraints will be useless. But the problem is, &amp;quot;responsive designer&amp;quot; is not yet a popularly recognized expertise. You don&apos;t find job adverts yet for a &amp;quot;responsive designer&amp;quot; position! So, most likely, i guess you are in the same situation as we were when we started: you probably don&apos;t have yet a responsive designer in your crew.
  96. So here&apos;s what we did, and which proved to work well: we coupled a regular fixed-width designer / prototype maker (who knows well how information is supposed to be architectured, who has a expert approach of how the ergonomy will be on the final product, etc) with a front-end developer who knows CSS and mediaqueries well (who can technically assess if what the designer is doing is ok, all the time). I&apos;m not gonna lie, this costed us quite a lot of money at first, because two people are working for one. But eventually...
  97. … after being told a thousand times what is and isn&apos;t allowed to do, your fixed-width designer learns to make less mistakes, and your front-end developer proves less and less useful. And hopla! Your fixed-width designer just gained one level! I mean... he just became the responsive designer you were looking for in the first place... :)
  98. One last thing: your crew or your magical guy has now produced a good set of very numerous prototypes, what should you do with it? It sometimes happens that your front-end dev (or responsive designer) tells you the design might be a little crazy anyway, and he has significant doubts about the technical feasibility of the design.
  99. A good solution would be to have the layout made, really quickly from scratch, by a front-end developer (just the layout, not more) to check that everything can actually be built. One upside: the front-end dev will spend less time on the highly tricky bits later during the front-end phase then, so it&apos;s not exactly time that is lost forever.
  100. Alright, before we say good bye, what did we learn here today?
  101. We learnt that technically, applying mediaqueries to get responsive isn&apos;t so complicated, and Rich would agree with me! Note for those who weren&apos;t at Front Row 2011: Rich Quick (yep, real name) spoke the day before, and introduced the basics of Responsive Web Design on a shorter conference; his final thesis was exactly this: adapting your existing website to be responsive is really easy, because the technical new stuff is not hard to learn.
  102. But as much as the development isn&apos;t so much more complicated, industrializing a design process is way trickier, as we previously saw. (saw... hehe...) ;)
  103. But the good thing is: the solutions and tools are being tweaked as we speak. It is a very interesting time, because people who get their hands dirty to it can definitely improve the design process and the tools, and share with the community. No one in the world has a final answer as of &amp;quot;how you should definitely design your responsive website&amp;quot;; so, you might be one of the next guys bringing up a new idea, that might be useful to every one else.
  104. So good luck with all that! And don&apos;t forget to SHARE, because in a year or two of time, maybe the design process will stabilize a little bit (i think we&apos;re all waiting for a book stabilizing this), and you might be able to look at one or two pages of this book saying &amp;quot;hey, i&apos;m the one who came up with this!&amp;quot; And this will make you rich, powerful, and immensely attractive towards all of the people you meet! (or not, but at least, it&apos;ll be pretty nice) :) Good luck with your projects! And don&apos;t forget to come back to me with your findings, i&apos;m VERY interested to hear!