Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
This document outlines a design thinking challenge to develop a solution to reduce personal carbon consumption. It introduces the design thinking process of empathy, define, ideate, prototype, and test. Participants are instructed to use techniques like brainstorming, prototyping, and user testing to generate ideas and solutions. The overall goal is to discover insights and innovatively frame the problem in a way that puts the user first to ultimately create a viable solution.
Google's Official Note to Product Management CandidatesLewis Lin 🦊
Google's official note to product management candidates
Updated October 2016
Uploader's Note
Google's Text Borrows Heavily from my Google PM prep blog post from 2013: http://www.impactinterview.com/2013/09/google-product-manager-interview/
Stephen Akintayo is the CEO of consulting firms in Nigeria that provide services such as digital marketing, website design, and bulk SMS. He is also an inspirational speaker and serial entrepreneur. The document discusses the concept of dropshipping, which is a retail model where merchants do not keep products in stock, but instead purchase inventory from third parties when receiving orders. It outlines the benefits of dropshipping such as lower capital requirements and overhead costs. However, it also notes disadvantages like low margins, inventory issues from sourcing multiple suppliers, and the potential for supplier errors. The document provides an overview of dropshipping and whether it is a worthwhile business model.
Discover how you can boost your productivity, ignite your creativity, turbocharge your projects, and earn easy and scalable passive income immediately with over 100 AI-powered tools and business ideas.
This document provides an overview of wireframing for product design. It discusses who uses wireframes, including designers, developers, product managers, and others. Wireframes are used to communicate the structure, content, hierarchy, functionality, and behavior of a product interface. The document then covers different styles of wireframing, from low to high fidelity. It also discusses tools for both non-digital and digital wireframing. The goal is to help readers better understand how to use wireframing in the product design and development process.
A primer to growth hacking. Starts with the story of one of the web's most legendary growth hacks, then gets into what growth hacking is and how you can put it to work for your company. Originally presented at Growth Hacking Asia Singapore in Nov 2014
Social Media Strategy Brief for SeamlessMariel Espejo
This document provides an overview and social media strategy for Seamless, an online food delivery and takeout ordering platform. Key points include:
- Seamless merged with GrupHub in 2013 and now services over 25,000 restaurants across the US and London. Revenue was $1 million in 2013.
- The strategy aims to drive acquisition through social media while increasing brand loyalty. Content will encourage user interaction and sharing of delivery experiences.
- Twitter will be used for customer support and promotions while YouTube, Instagram and Pinterest focus on sharing recipes and delivery experiences. A loyalty program will reward purchases and word-of-mouth referrals.
- Success will be measured through engagement metrics like comments, shares
Chatbot solutions for e commerce platform, chatbot platform, build a chatbot,...PriyaNemade
Chatbot solutions for Ecommerce can improve customer service in online stores with the help on natural language processing and artificial intelligence to increase sales and revenue, know more at : https://www.qwentic.com/blog/chatbot-solutions-for-ecommerce-platform
This document provides an overview of web development. It discusses front-end development which involves designing interfaces for users to interact with using technologies like HTML, CSS, Bootstrap, and JavaScript. Back-end development is described as controlling the behind-the-scenes aspects using technologies like SQL, PHP, Java, .NET, and Python to communicate with databases and servers. Specific front-end technologies like HTML, CSS, and Bootstrap are explained. Back-end database technologies like SQL and programming languages like PHP are also outlined. The document concludes that web development provides many opportunities for students and experienced developers.
The Mom Test or How to Ask Better Customer Dev QuestionsJeff Costa
The document provides guidelines for conducting customer development conversations to obtain useful feedback rather than false positives. It advises asking open-ended questions focused on customers' specific experiences and problems rather than opinions. Customers should be asked to show or explain problems in the past rather than make hypothetical claims. The goal is to learn concrete facts about customers' lives rather than generic praise that lacks commitment.
Key learnings:
-Using advanced analytics to uncover monetization opportunities
-Types of campaigns you should automate to drive engagement and save you time
-Lifecycle optimization to take you from activation to repeat purchase
-Tap into dormant and churned users for new monetization opportunities
This document provides templates for business planning tools including a Lean Canvas, SWOT analysis, Pirate Funnel, 4Ps of Marketing, Product-Market Fit Pyramid, Marketing Funnel, and templates for stating a company's mission, vision, and values. It describes each template and provides a blank version to allow the user to create their own customized template.
Slides to the growth hacking workshop I recently gave for AAU students in Prague. We covered the Lean Canvas, getting to product-market fit, Wow! moment, growth marketing, and the analytics you should be focused on.
Customizable pitch deck templates which include two different versions, both built by leading seed investors at NextView Ventures. Entrepreneurs can use them to save time while building a pitch deck to raise seed capital.
A Product Teardown, “or simply teardown, is the act of disassembling a product, such as a television set, to identify its component parts, chip & system functionality” – Wiki
In the context of the teardown for SaaS companies, it involved a deep dive into the company’s Idea, Discovery Process, Landing Page, Sign Up, and its “Wow” experience.
Omnichannel Customer Experience. Companies such as Amazon, Facebook, Google, Apple already know that the future of user experience is automated interface creation depending on customer needs.
A design sprint is a five-day process for taking a product or feature from design through prototyping and testing. It involves five steps: understand, diverge, decide, prototype, and validate. The goal is to get early feedback on ideas by conducting user research, rapidly generating concepts, building quick prototypes, and testing them with real users to learn what works and what doesn't work.
The Mafia Offer: How to Presell your Product at 80% (!) Conversion RateVladimir Blagojevic
This document outlines the "Mafia Offer" framework for preselling a product at an 80% conversion rate without having built the product. It involves conducting customer interviews to identify problems, building a minimal demo solution, employing marketing techniques like social proof and scarcity to build desire, anchoring the price comparison, making a bold promise, and qualifying early customers to ensure a good fit. It recommends taking Ash Maurya's free online course to learn how to implement this preselling strategy.
Dropbox it just works case study analysisSindoor Naik
Dropbox was founded in 2007 by Drew Houston as a file sharing and storage application that allows users to easily sync and access files across devices. It gained popularity through word-of-mouth and viral marketing. While Dropbox saw strong growth and many new users, Houston faced dilemmas around whether to segment users and how to balance adding new features while maintaining simplicity. Competitors like Mozy and Carbonite also posed challenges to Dropbox's business model and growth.
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.
- 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.
The document provides guidance on basic webpage layout and design. It discusses defining the purpose and intended visitors of a website, identifying key elements like primary goals and technology needs. It also covers design principles like proximity, alignment, repetition and contrast. Specific topics include fonts, text presentation, page size, use of tables, and navigation styles. The document provides tips on common annoyances to avoid like suggesting specific browsers, using animated GIFs or scrolling text unnecessarily.
Are you looking for creating your own website? If so, then you must be aware with the principles of creating an effective website design. Make sure your website is responsive, creative and does not hold unnecessary details.
The document discusses various topics related to web design including parallax scrolling, search engine optimization (SEO), grid design, Bootstrap, Animate.css, and common HTTP status codes. It provides descriptions and definitions of these terms, outlines best practices, and links to additional resources for further reading.
Optimizing User Experience with Responsive Web DesignClarissa Peterson
Responsive web design allows a single website to be accessed from any device by dynamically adjusting the layout depending on screen size. The content remains the same across devices but is formatted appropriately for each screen width through techniques like adjusting column numbers and widths. Designing first for mobile forces focus on essential content and ensures parity across devices. Examples demonstrate how navigation, images and text restructure seamlessly for an optimized experience on any device.
Optimizing User Experience Across Devices with Responsive Web Design (Clariss...uxpa-dc
Responsive web design allows a single website to be accessed from any device by dynamically adjusting the layout depending on screen size. This provides an optimized experience for users on all devices without needing separate mobile sites. It works by using fluid, proportional grids and layouts that automatically resize text, images, and elements to fit different screen sizes using CSS media queries and fluid images. This improves usability by ensuring content remains easily readable and accessible on any device with a single codebase.
Responsive web design allows websites to automatically adjust layouts based on screen size and orientation. It uses flexible grids and images, and CSS media queries. As a user switches devices, the website layout and elements resize accordingly. This eliminates the need for separate designs for each device. Techniques like flexible grids, maximum image widths, and responsive images that load different resolutions based on screen size allow websites to adapt seamlessly across devices. Responsive design requires a new way of thinking about design that is flexible and adaptable rather than fixed for each device.
Flexbox is a relatively new front-end feature that greatly simplifies the process of creating a responsive website layout. In the past, in order to create a layout that looked good on a website, you had to use tables or float grids. Furthermore, those approaches aren't the most effective for responsive design, which ensures that the website looks good on desktop, tablet, and mobile platforms. Learn how to use flexbox if you want to stay up to date Flex Web Development with web development trends.
Re-Coding for Responsive Design: Tips, Tricks, and TrapsAliciaVirtue
An overview of ways to answer the challenge of re-coding to add responsive design behavior to a website while operating under organizational design restrictions to maintain a standard, unmobile-friendly look.
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes. It recommends taking a mobile-first approach, using fluid layouts and media queries to make content responsive. Key tips include starting small and resizing the browser, using Chrome's device mode to emulate different devices, and the matchMedia API to bind JavaScript to breakpoints. The overall goal is to provide an optimal viewing experience across all devices.
Responsive web design allows a single website to automatically adapt to different screen sizes and devices. It works by adjusting content, layout, and interactions using fluid grids, flexible images, and media queries. The main benefits are lower costs through a single site, easier updates and SEO, and compatibility with new devices. While initial development costs may be higher, responsive design is recommended for better usability, user experience, and mobile search engine optimization.
The way we work with HTML and CSS has evolved massively over recent years. From writing native CSS, many of us now consider pre-processors a key part of our development toolkit. This talk will explore how we use the front-end tools at our disposal today. We’ll cover some of the mistakes that can (easily) be made when using them and how to ensure that they complement our workflow, helping us to write more maintainable, well structured front-end code.
A brownbag presentation at IPC media in London about the need to use libraries to make web development much less random and more professional. Get the audio at: http://www.archive.org/details/ProfessionalWebDevelopmentWithLibraries
7 Important Guidelines for Effective Responsive Web DesignProweaver, Inc
Responsive web design allows your website to readily format and scale itself depending on what device your web visitor may be using.
Originally published at https://www.proweaver.com/7-important-guidelines-for-effective-responsive-web-design.
The document is a presentation about responsive web design given by Jonathan Bell. Some key points:
- Jonathan introduces responsive/adaptive web design which allows sites to adapt to different devices like phones, tablets and desktops.
- He discusses how sites used to be designed for specific screen sizes but now there are over 100 types of Android devices alone with different sizes.
- Responsive design ensures the user has a good experience on any device by adapting the layout and making content readable and usable regardless of screen size.
- Ethan Marcotte is cited as the "grandfather" of responsive design and some of Jonathan's presentation is based on his ideas.
Alt text is one of the key components that will make your website more accessible to users with disabilities. But alt text is more than just describing what you see in an image. It needs to consider context, and make sure that screen reader users are supplied all the same information that is available to visual users.
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
You can launch the best-looking website ever, but if it’s not easy to use, it’s not going to be successful. Learn to think like a user and uncover usability problems that might not be apparent at first glance. Find out some basic improvements you can implement to make your site more usable and accessible. User experience isn’t just for designers to think about: everyone who works on a website has the opportunity to make the user experience better. Even little changes can make a big difference.
Presented at WordCamp Calgary, OpenWest, Web Unleashed, ThunderPlains, and ConFoo Vancouver in 2017. Presented at ConFoo Montreal in 2018.
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.
Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.
Your website's users want to get stuff done, and you probably aren't making it easy for them. When users encounter forms with unnecessary steps, content that requires too many clicks to access, or things that just don't make sense, they often give up. In this talk, you’ll see some practical examples of sites that do a good job of making interactions and content easy to follow and understand, and you'll learn how to help your users get to where they want to be without annoying them on the way there.
Presented in 2016 at ConFoo.
Color is one of the first things we learn how to do in CSS — and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.
Presented in 2015 & 2016 at Amazon's WebDevCon, ConFoo, Breaking Development, Mobile+Web Dev Conference, Code Fellows Seattle, CascadiaFest, CSS Summit, CSS Brigade Vancouver, CSS Day Amsterdam, Future Insights Live, WebVisions NYC, and Albany UX.
A hands-on workshop at EuroIA in Brussels, Belgium, on 27 Sept. 2014.
Learn the process for creating responsive websites. Gain an understanding of the HTML & CSS behind responsive design, so you can design responsive experiences that can be easily implemented by a multi-disciplinary team. Target audience: UX designers with at least a basic knowledge of HTML & CSS.
Although responsive web design has only been around for a few years, it's grown up a lot since first we started talking about fluid grids and media queries. Now, we look to responsive design with the goal of providing a good experience for every user on every device. From the DC Web Women Code(Her) Conference, 9/13/14.
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.
Your content is the most important feature of your website, so it's important to make sure that the text looks good and is easy to read no matter what device type or screen size it's being viewed on. One size does not fit all when it comes to typography, but you can use media queries to adjust type qualities such as size, line height, column width, margins, hyphenation, and even typeface depending on the viewport size. Learn how you can use CSS to apply design rules that will make your typography look better and perform better across devices. You'll also find out how typography affects the loading time of your website, and what you can do to improve performance.
Presented in 2015 at ConFoo and Albany UX. Presented in 2014 at WebVisions Chicago, Blend Conference, Frontend Conference Zurich, Refresh Ottawa, Mobile+Web Dev Conference, STC Summit, Bmoresponsive, ConvergeSE, and Girl Geeks Montreal.
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.
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.
Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
The document discusses optimizing user experience across devices through responsive design. It explains that responsive design allows a single website to be accessed from any device by adjusting the layout. The key aspects of responsive design are flexibility and adjustability. It emphasizes starting with content and designing for the context of use through small-screen first approaches and testing on actual devices. Frameworks like Foundation can help with responsive design, and style tiles help communicate visual designs. The goal is to provide equal access to content on any device.
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.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGRostyslav Kasyanenko
The Ukrainian and German journalist Rostyslav Kasyanenko has dedicated himself to genealogical research and heraldry. Originally Ukrainian, now living in Munich (Bavaria) he working in Ukrainian Free University (Est. 1921) as archivist. Curator of Heraldic Teams, Member of Ukrainian Heraldry Society (UHS) R.Kasyanenko is Deviser of the Family and Municipal Coat of Arms and Author of the exhibition concept project: “Maritime flags and arms of the Black Sea countries vs. Mediterranean: what has changed in 175 years?”
Author of scientific articles (2023-24):
Parallels between the meaning of Symbol and Myth according to Hryhorii Skovoroda and heraldic systems
Heraldry as a marker of evolution of national identity in Ukraine and Slovakia: from the Princely era to the "Spring of Nations" (XI-XIX centuries)
Historical parallels in the formation of national awareness in Ukraine and Slovakia in modern times (1848-1992)
Proto-heraldry of Kievan Rus': dynastic symbols of the Princely era, and how does the Palatine Lion relate to this?
Symbols of the House of Romanovyches: the Bavarian influence in Ukrainian heraldry
Participant of Scientific Conferences (2023-24):
- XXХІІІ Heraldic Conference of the Ukrainian Heraldry Society, October 13, 2023, Lviv
- International Conference “Slovak-Ukrainian Relations in the Field of Language, Literature, and Culture in Slovakia and the Central European Space”, University of Prešov, Institute of Ukrainian Studies, Faculty of Arts, 18-20.10.2023
- International Conference „The Past, Present, and Future of Heraldry: Universality and Interdisciplinarity“, Vilnius, 12-13.06.24
- International Conference "Coats of Arms as Weapons – Heraldic Symbols in Political, Dynastic, Military, and Legal Conflicts of the Middle Ages and Early Modern Period”, Alfried Krupp Wissenschaftskolleg Greifswald.
According to the heraldist, he has worked with many heraldic artists over
the years. However, he developed the ideas for all the coats of arms himself, except for his own. The case of the Kasyanenko (from the Shovkoplias clan) family coat of arms — featuring an audacious Cossack riding a rhinoceros — deserves special attention. "After all, one could talk about one's own crest, just like one's ancestors, for an eternity," he says.
Right Choice Landscaping offers exceptional villa landscape maintenance servi...rightchoicelandscapi
"Right Choice Landscaping offers exceptional villa landscape maintenance services in Dubai. Our dedicated team ensures that your villa’s outdoor spaces are beautifully maintained, enhancing both the aesthetic appeal and the value of your property. We offer landscaping and Garden design services to commercial property owners and homeowners all over the UAE.
Professional design drives turnover, return, and growth.
How to strengthen the power of design in your domain?
The key is to introduce, specialize, and organize critical capabilities.
Design capacity thus becomes a strategic advantage: valuable, unique, and organized.
Cases from construction, manufacturing, and servicing provide proof.
Achieve your ambition faster with our subject expertise.
Call on us for instruction, support, or execution.
Request a free quick scan* to start.
*) Ask for our conditions.
https://designimpulse.nl
With Fear For Our Democracy I Dissent ShirtTeeFusion
In these times of increasing political polarization, many people feel a deep concern for the health of American democracy. If you're one of them, then the "With Fear For Our Democracy, I Dissent" shirt might be the perfect way to express your convictions.
https://dribbble.com/shots/24472856-With-Fear-For-Our-Democracy-I-Dissent-Shirt
1. Responsive Design
in the Real World
Tools & Resources to Make
Responsive Design Easier
Cleveland Web Standards Association
October 30, 2012
Clarissa Peterson
@clarissa
2. What We’ll Cover:
Frameworks
Navigation Patterns
Preprocessors
Responsive Images
Responsive Data Tables
Polyfills
3. Captions added for those of you playing
along at home!
Almost as good as being there.*
4. Responsive Web Design
This is not an introduction to responsive web design. If you’ve been doing some
responsive design, or at least know what it is pretty well, this presentation is going
to tell you about some tools and resources that will make it easier for you to build
responsive sites. But for those of you who need a little background, I’m going to
explain reaaaaally quickly what responsive design is. The rest of you can just click
forward a few slides. The non-technical description first:
5. When the iPhone was introduced, this is what websites looked like. They
were very, very tiny, and you had to zoom in and out to read anything.
6. This kind of sucked, because if you made the text big enough to read, you couldn’t
even see the whole line of text at once. (yes, a lot of sites are still like this)
7. Responsive Web Design
Responsive design solves that problem. Instead of making the
website really tiny so it fits, the browser is able to keep the content
a normal size regardless of what size your screen is, and then it just
kind of rearranges everything so it fits on the screen in a way that
makes sense and takes advantage of the available space.
8. Go to the Boston Globe site in your browser and then make the browser
window narrower and wider — see what happens. The text stays the same
size, but the content rearranges from three columns to two and then one
column as the browser window gets narrower. That’s responsive design.
http://www.bostonglobe.com
9. Resizing your browser window is just an easy way to see the changes all
at once. But what we’re really talking about is the difference in how a site
looks from one device to the next — such as a mobile phone, a tablet, a
laptop, or a desktop computer. Making your browser window very narrow
(about 300 pixels) will give you a decent idea of what a website looks like
on a mobile phone, but not entirely. Make sure to test on actual devices.
10. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries
There are three parts to responsive design.
11. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries
The first two, the flexible grid and flexible images/media are pretty easy to explain.
12. I’ll demonstrate on The Boston Globe site. This
is the site at about 1280 pixels wide.
http://bostonglobe.com/
13. This is the site at a somewhat narrower width. Note that the columns have
each decreased in width in proportion to the site. So has that big picture off
on the left. That’s because everything is measured in percent instead of pixels.
http://bostonglobe.com/
14. In contrast, check out the Milwaukee Journal-Sentinel
website. It’s also a newspaper, also with three columns.
http://www.jsonline.com/
15. But look what happens at a narrower width. The columns all stayed the exact same
width, so although the empty margins gave us some room to maneuver, after those
were gone, the browser had no choice but to chop off the right side of the page.
http://www.jsonline.com/
16. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries
The third part of responsive design is media queries. This is the magic part of
responsive design. Okay, it’s not really magic. It’s actually pretty simple how a
media query works. It’s just an if-then statement, if any of you are
programmers. And even if you’re not a programmer, the concept is simple:
17. If X is true, then do Y. If X is not true, then don’t do Y.
If those letters look too much like algebra, I can give you an example:
If the time is 12:00, eat lunch. If the time is not 12:00, then don’t eat
lunch. That sounds pretty straightforward, right?
That’s a media query. In responsive design, what we’re generally going to be
querying is the viewport width. That is more or less the same thing as the
width of your browser, which is why we can resize our browser window to
demonstrate responsive design. For mobile devices, the viewport width is
essentially the same thing as the screen width, since you can’t have a non-
full-size browser window like you can on your computer. So you’ll often
hear people referring to screen width in responsive design when they really
mean viewport width. They know what they mean, though.
18. In responsive design, media queries are querying the viewport width, and telling
the browser to do something different depending on the viewport width.
http://www.unitedpixelworkers.com/
19. So as the viewport gets wider on the United Pixelworkers site,
you can see the site looks different. The icons at the top
rearranged themselves a bit, and the font changed size.
http://www.unitedpixelworkers.com/
20. Now, there are two columns instead of one! The media query is telling the
browser: When the viewport is wider than X pixels, do this section of the CSS to
make it be two columns instead of one. If the viewport is not wider, ignore that
http://www.unitedpixelworkers.com/
21. And things just keep on rearranging! You can have
as many media queries as you want.
http://www.unitedpixelworkers.com/
22. And a media query can make pretty much any change to the CSS
that is being used to render the website. For responsive design,
normally it’s going to be parts of the CSS having to do with layout.
http://www.unitedpixelworkers.com/
23. But if you wanted, you could make the entire site turn purple if the screen is
wider than X pixels. I’m not sure why you’d want to do that, but you could.
http://www.unitedpixelworkers.com/
24. @media screen and (min-width: 640px) {
.section1, .section2 {
float: left;
width: 50%;
}
}
This is what a media query looks like.
25. @media screen and (min-width: 640px) {
.section1, .section2 {
float: left;
width: 50%;
}
}
This is the “if” part of the if-then statement. All media queries start with
@media. Then we’re saying: if you’re displaying this page on a screen (as opposed
to print or something else), AND the viewport is a minimum of 640 pixels wide...
26. @media screen and (min-width: 640px) {
.section1, .section2 {
float: left;
width: 50%;
}
}
This part in the middle is the “then.” If the query is true, then do this
CSS. If the query is not true, then ignore this CSS. It is THAT easy!
27. @media screen and (min-width: 40em) {
.section1, .section2 {
float: left;
width: 50%;
}
}
You’ll notice our query was for a viewport width of 640 pixels or wider.
Actually, a better way to do a media query is to use ems instead of
pixels, so the page will be even more flexible. Ems relate to the base font
size for the page. So if our page has a different-than-usual base font size,
either via the browser or via user preferences, things will still look okay.
29. You’ve probably heard that responsive design is hard. Well, it isn’t. I
mean, it’s not any harder than web design is. Sure, web design was a lot
easier in the days before computers were invented. We just sat around
and read the paper all day, waiting for computers to be invented.
30. But eventually we had to learn HTML and CSS. We didn’t
try to learn it all at once, so it wasn’t too bad. Plus, we just
copied other people’s stuff until we got the hang of it.
And it turns out that the awesome thing about web design is that there are a lot
of people out there who want us to copy their stuff. In fact, they make cool stuff
and put it on their websites for everybody to download and use. Our job as
responsive designers is actually not all that hard, because there are people out
there who are much smarter than us, and they are doing all the hard parts for us!
Sure, it’s nice to be a purist and code all our websites from scratch. Just like we
make all our own clothes from fabric that we wove ourselves from cotton that
we grew ourselves on our own farms in our backyard. Right?
Or we can let someone else do the hard parts so that we can go
home at a reasonable hour in time to play with our kids
or watch Law & Order: SVU (your choice).
31. Frameworks
A framework is a starting place for designing or building a website. Not
the whole design, just a starting place. Like the frame of a house.
32. There are a lot of frameworks, and they’re all a bit different, so you’ll have to figure
out what works best for your project and for your style of working. Foundation is
one of the most popular. It’s a 12-column, nestable, responsive grid.
http://foundation.zurb.com/
33. That doesn’t mean your site will have 12 columns.You can have any number of
columns up to 12, as long as the proportions are divisible by 12. For example, you
can have two columns, the first is 4/12 of the screen wide, the other is 8/12 wide.
http://foundation.zurb.com/grid-example1.php
34. Here’s a site that uses Foundation.
http://www.zurb.com/soapbox
35. Once you decide what columns you want, that doesn’t have to
apply to the whole page. Here they have 4 columns,
(3+3+3+3) and right below that, 3 columns (4+4+4).
http://www.zurb.com/soapbox
36. When you download all the files for Foundation, you get CSS,
JavaScript, and this sample file which you can use as a template (or you
can just start your own HTML page and not use the template).
http://foundation.zurb.com/
38. There’s only one breakpoint, and the default behavior is for the columns to stack
vertically. This might not be what you want to happen, but you can change it to
work however you want by adding more breakpoints or different behavior.
http://foundation.zurb.com/
39. <div class="row">
<div class="twelve columns">
...
</div>
</div>
<div class="row">
<div class="three columns">
...
</div>
<div class="nine columns">
...
</div>
</div>
The grid is built around two key elements: rows
and columns. Each row gets a class of “row.”
40. <div class="row">
<div class="twelve columns">
...
</div>
</div>
<div class="row">
<div class="three columns">
...
</div>
<div class="nine columns">
...
</div>
</div>
The columns within the rows: each gets a class of “columns,” and then a
number that correlates as to how wide it should be out of 12. The first row
has one column that spans the entire width of 12. The next row has a
narrow left column (3 of 12) and a wider right column (9 of 12).
41. Responsive
Foundation is by default responsive. All the widths are
percentages. It has one breakpoint at 768 pixels, but you’re not
stuck with that; you can easily change it or add more breakpoints.
42. class="show-for-xlarge"
class="show-for-large"
class="show-for-large-up"
class="show-for-medium"
class="show-for-medium-down"
class="show-for-small"
breakpoints at:
767 px, 1279 px, 1441 px
There are built-in classes you can use to show or hide elements at specific widths;
for example, if you want a nav button to appear on small screens, but the full nav to
appear on wide screens.You can change the built-in breakpoints.
45. Prototyping
You already know that prototyping/designing in PhotoShop doesn’t work when
you need to plan for varying screen widths. Frameworks are really great for
responsive prototyping, because you can build a basic site layout very quickly.
46. Frameworks generally come with built-in styles for various elements, such
as forms and buttons.You probably won’t use these basic, default styles on
your actual design, but they are handy when doing a quick prototype.
http://foundation.zurb.com/docs/forms.php
47. And they are basic enough that the site will look like a prototype
and not a finished design, so your client won’t be confused.
http://foundation.zurb.com/docs/buttons.php
49. Twitter Bootstrap is another framework that is very popular. Besides giving
you a responsive grid, there are also lots of pre-styled UI elements.
http://twitter.github.com/bootstrap/index.html
50. Skeleton is another responsive framework. It’s more lightweight (less styled
elements), easy to use, and there are WordPress and Drupal versions.
http://www.getskeleton.com
51. 320 and Up is a great framework, because it’s intended for small-screen first.
That’s the best way to design a responsive site: by starting with the small screen,
you can focus on your content, which is the most important part of your site.
http://stuffandnonsense.co.uk/projects/320andup/
52. SimpleGrid is another responsive framework. It has three different breakpoints by
default. Again, you can make any changes you want. It’s very simple to implement.
http://simplegrid.info/
53. The Semantic Grid System is a little more complicated, but allows
you to set variables for things like gutter and column widths.
http://semantic.gs/
54. Frameless is not exactly a framework — you don’t
download anything — but more of a way to code your site.
http://framelessgrid.com/
55. HTML5 Boilerplate is HTML5 by default, and includes a lot of
additional styles, tools, and polyfills to help you build your site.
http://html5boilerplate.com/
56. The Golden Grid System is a “folding grid”: the columns
collapse from 16 to 8 to 4 as the viewport narrows.
http://goldengridsystem.com/
57. Resources: Frameworks
Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained
(Joshua Johnson) - August 2012
http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-
frameworks-and-boilerplates-explained/
15 More Responsive CSS Frameworks & Boilerplates Worth Considering - August
2012
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-
boilerplates-worth-considering/
58. Navigation Patterns
One of the tricky parts about making a responsive site is
figuring out what to do with the navigation. The good news
is that someone else already figured it out for us.
59. Brad Frost has this great website where you can view sample code
for different types of things you might want to add to your
responsive site. (there are a lot of other links and resources too)
http://bradfrost.github.com/this-is-responsive/patterns.html
60. Top Navigation
Navigation nearly always follows one of several “patterns.” The first we’ll
look at is top navigation. This is the easiest thing to do with your
navigation, and generally requires only minimal CSS to make it responsive.
61. When we go from wide to narrow width (on the next slide), you’ll
see that the navigation stays in the same part of the page. It moves
down below the logo, but otherwise is pretty much the same.
http://www.gravitatedesign.com
62. This may work okay if we only have a few navigation items, but they might end up
wrapping in weird ways. Or we may have to make them really small so they’ll fit, in
which case it would be difficult to accurately select the links on a touch screen.
http://www.gravitatedesign.com
63. This site has a lot of different navigations and navigation items.
They used a strategy of keeping all the nav items at the top...
http://www.tuj.ac.jp/
64. But what happens is they end up filling the whole screen with navigation,
and you can’t see the content. People aren’t coming to our websites for
the navigation, they’re coming for the content. So this isn’t good.
http://www.tuj.ac.jp/
65. Footer Anchor
Footer anchor navigation is also fairly simple to implement. (by the way, all the
code examples in this section are from Brad Frost’s This Is Responsive site)
66. This is Contents magazine. This is what the site looks like
on a desktop. Basic horizontal navigation.
http://contentsmagazine.com/
67. On a small screen, instead of seeing navigation at the top, you see a button,
“Explore.” You click this to get to the navigation. It’s an anchor link.
http://contentsmagazine.com/
68. When you click it, you jump down to the bottom of the page where the navigation
is. The problem with this is that it can be disorienting to the user to jump around
on the page. However, it’s really easy to implement footer anchor navigation.
http://contentsmagazine.com/
69. <div id="site-nav">
<form> ... </form>
! <nav>
! ! <ul class="nav nav-primary">
! ! ! <li><a href="#">Archive</a></li>
! ! ! <li><a href="#">About</a></li>
! ! ! <li><a href="#">Write For Us</a></li>
! ! ! <li><a href="#">Subscribe</a></li>! ! !
! ! </ul>
! </nav>
</div>
The way this works is that the navigation is at the end of the HTML source
order, so by default it’s at the bottom of the screen. So that’s what you get
on the small screen, with the “Explore” button at the top of the page.
70. @media screen and (min-width: 48em) {
! #site-nav {
! ! position: absolute;
! ! top: -5em;
! ! width: 100%;
! ! z-index: 5;
! }
}
For larger screens, there’s a media query. This simply takes the div
containing the navigation, and uses absolute positioning to put it at the top
of the page. That only happens when the viewport is 48 ems or wider.
71. So here it is at the top. That was just the positioning; you’ll
need some additional CSS to make it look the way you want.
http://contentsmagazine.com/
72. Toggle Navigation
Toggle navigation is a bit more complicated to implement.You’ll see a full navigation
at a wide screen width. At narrow width, you’ll get a Menu button or icon at the
top, which you’ll click to see the navigation. This is getting to be pretty common.
73. This is the Starbucks site. The three-line icon in the top right
means navigation. It’s a fairly common convention.
http://starbucks.com/
74. When you click it, you get the navigation, and the rest of the page content is
pushed down below it (the navigation doesn’t overlap the content).
http://starbucks.com/
75. The site has media queries to put the nav items either in one or two
columns, depending on how much width is available. When you click the ‘X,’
the navigation will disappear and the content will go back to it’s normal spot.
http://starbucks.com/
76. Starbucks uses a toggle navigation, which is one of the patterns on Brad
Frost’s website, so you can look at this example code to see exactly
how it works, and then implement a toggle navigation on your own site.
http://bradfrost.github.com/this-is-responsive/patterns.html
77. The example works the same as Starbucks’ site, but has minimal styling
so it’s easier for you to see which parts of the code are relevant.
http://bradfrost.github.com/this-is-responsive/patterns.html
78. <a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu" role="navigation">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>
This is the HTML. The line at the top is the Menu button.
79. <a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu" role="navigation">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>
Below that is the navigation, an unordered list inside a <nav> element.
80. .js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}
This is the CSS to make the navigation appear and disappear.
81. .js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}
There are two relevant lines of CSS that apply to the <nav>: one shows the
navigation, the other hides it. We’ll switch between the CSS using JavaScript, which
will apply the class “active” to the <nav> element when the Menu button is clicked.
82. .js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}
The first line of CSS, before the Menu button is clicked, hides the <nav>. So the
navigation is already hidden when the page loads for the first time.
83. .js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}
The second line of CSS makes the <nav> visible by giving it a max-height of 15em
(so it’s no longer hidden, and there’s plenty of space to display the whole thing).
84. <script>
(function() {
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link');
$menulink.click(function() {
$menulink.toggleClass('active');
$menu.toggleClass('active');
return false;
});});
})();
</script>
This is the JavaScript. It uses toggleClass from jQuery
to add and remove the “active” class to the <nav>.
85. @media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}
For the wide screen, of 48.25em or wider, we’re using this media
query to override what we just set up for the narrow screen.
86. @media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}
The first line of CSS hides the Menu button, because we
don’t need it on the wide screen: the navigation is visible.
87. @media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}
The second line gives the <nav> the max-height of none. This isn’t the
same as zero; it actually means unlimited. There is no maximum. The
<nav> can take all the space it needs on the wide screen.
88. To determine where to put your breakpoint for this type of navigation, you just
have to try it out and see where the horizontal navigation starts to wrap. Keep in
mind it might be slightly different on different devices or browsers.
89. Left Nav Flyout
Left nav flyout is also used a lot, but it’s more complicated to implement,
so I’m not going to show you the code, but I’ll show you what it looks like.
Keep in mind that as the navigation code gets more complicated, you need to make
sure there’s a fallback for any devices/browsers that don’t support the code.You
don’t want users coming to your site and not having access to the navigation.
90. Like the previous example, there’s an icon at the top,
horizontal bars, to click to get the navigation.
http://www.emerilsrestaurants.com
91. The difference is that here, the content slides off to the side, instead of sliding
down.You would then click the navigation icon again to go back to the content.
Notice how you can still see the content, so you know that it’s still there.
http://www.emerilsrestaurants.com
92. You can also have submenus within the navigation.
http://www.emerilsrestaurants.com
93. Three-Dimensional Menu
This isn’t from the navigation patterns that I referred
to, but it’s an example of something pretty cool.
94. See the arrow over on the left side of the screen? To get the navigation to
appear, you just swipe on your touch screen. On a non-touch interface, you
simply need to hover your cursor on the left side of the browser.
http://lab.hakim.se/meny/
95. After you swipe/hover, you get this. It’s similar to the previous example of
left nav flyout, but instead of the content just moving to the right, it is
displayed so that it looks like a side of a cube that has turned.
http://lab.hakim.se/meny/
96. This is how it looks on a mobile device.
http://lab.hakim.se/meny/
97. Resources: Navigation
Responsive Navigation Patterns (Brad Frost) - February 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-
design/
10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) -
October 2012
http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-
successfully/
10 Responsive Navigation Solutions and Tutorials - August 2012
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-
tutorials/
98. Preprocessors
Next, lets talk about how we write CSS. A preprocessor helps
you write CSS. It doesn’t add new functionality to the CSS, but
rather it makes your CSS more flexible and easier to maintain.
99. There are several different preprocessors. Sass and LESS are two of the more
popular. They all do similar things, but have some different features and work in
different ways.You need to pick which one works best for you.
http://sass-lang.com/ and http://lesscss.org/
100. Sass
I’m not going to say that one or another is better, but for the purpsoes of this
presentation, I need to pick one for the examples, so I’m going to show you a bit of
how Sass works. (all code examples are from the Sass website)
101. The easiest way to explain how this works: you’ll still be writing CSS for
your site, but in special files that have a different extension.You then have
the ability to add in what are essentially shortcuts as part of your CSS.
The preprocessor then will take the files with all your shortcuts and
change them to regular CSS files. When the website is rendered, the
browser will be looking at the regular CSS files, not your shortcuts.
It’s called a preprocessor because your code will be processed to change it
to valid CSS before it’s processed by the browser to render the website.
102. Nesting
Nesting is really handy to keep you from repeating the same things
over and over again in your CSS, and also can make it easier to
understand your CSS when you’re looking at a lot of it.
103. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}
Here we are nesting the ul and li within the #navbar.
104. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}
All the other CSS is contained within #navbar
105. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}
The width and height only apply to #navbar
106. #navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}
But then we have the ul and li within #navbar. So
they’re actually #navbar ul and #navbar li.
107. #navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
When the code is processed, we get this, which is no longer nested, and is what the
browser will get. It doesn’t seem all that impressive in this example, but once you
have multiple layers of nesting, it can make your job a lot easier.
108. .fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
You can also nest styles.
109. .fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
This is what the preceding code will turn into when it’s processed.
110. Variables
Variables are super-handy. If you have something like a color that is repeated
throughout your styles, you can declare it once and then refer to the variable. If
you need to change it later, there is only one place to change it instead of many.
113. #navbar {
border-bottom-color: #ce4dd6;
border-bottom-style: solid;
}
When it’s processed, we get this.
114. Mixins
Mixins are awesome. They allow you to reuse complicated styles without
having to copy and paste. Kind of like variables, except for entire styles.
115. #navbar li {
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
border-top-radius: 10px;
}
#footer {
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
border-top-radius: 10px;
}
For example, if we were using this border radius for multiple elements on
the site. We don’t want to copy and paste it multiple times, and we also
might want it in one place, in case we need to change part of it.
116. @mixin rounded-top {
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
border-top-radius: 10px;
}
#navbar li { @include rounded-top; }
#footer { @include rounded-top; }
The part at the top is where we declare the mixin, “rounded-
top.” The part at the bottom is where we are using the mixin,
applying that set of styles to both #navbar li and #footer.
117. #navbar li {
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
border-top-radius: 10px;
}
#footer {
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px;
border-top-radius: 10px;
}
When the code is processed, this is what we end up with.
118. Math
When you’re doing responsive design, math is one
of the most useful functions of a preprocessor.
119. .sidebar {
width: percentage(360px / 960px);
}
Instead of getting out our calculator to figure out percentages for
widths, we can just write the original numbers into our code.
120. .sidebar {
width: 37.5%;
}
When it’s processed, the preprocessor figures out the
percentage for us and puts it in the CSS.
121. @media Bubbling
@media bubbling is like nesting, but for media queries. So this is handy for
responsive design. It can keep your stylesheets easier to understand.
122. .profile-pic {
float: left;
width: 250px;
@media screen and (max-width: 320px) {
width: 100px;
}
@media screen and (min-width: 1200px) {
float: none;
}
}
In this example, we’re applying different CSS to profile-pic,
depending on the viewport width. Everything is inside profile-pic.
123. .profile-pic {
float: left;
width: 250px;
@media screen and (max-width: 320px) {
width: 100px;
}
@media screen and (min-width: 1200px) {
float: none;
}
}
These styles apply to profile-pic.
124. .profile-pic {
float: left;
width: 250px;
@media screen and (max-width: 320px) {
width: 100px;
}
@media screen and (min-width: 1200px) {
float: none;
}
}
Then here are our media queries, inside! We don’t
need to repeat profile-pic, we just need the style.
125. .profile-pic {
float: left; width: 250px;
}
@media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
}
}
@media screen and (min-width: 1200px) {
.profile-pic {
float: none;
}
}
So when it’s processed, this is what we get: our media queries “bubble” out of the
nest (yes, that’s why it’s called @media bubbling) onto separate lines.
126. $break-small: 320px;
$break-large: 1200px;
.profile-pic {
float: left;
width: 250px;
@media screen and (max-width: $break-small) {
width: 100px;
}
@media screen and (min-width: $break-large) {
float: none;
}
}
We can also use variables as well, like if we have
breakpoints that are used for various site elements.
127. Resources: Preprocessors
Sass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012
http://www.vanseodesign.com/css/css-preprocessors/
An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September
2011
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-
comparison-to-sass/
Responsive Web Design in Sass: Using Media Queries in Sass 3.2 (Mason Wendell)
- April 2012
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-
queries-in-sass-32
Create faster fluid layouts with LESS (Paul Mist) - August 2012
http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less
129. img, object, video {
max-width: 100%
}
We all know that we use max-width: 100% so that our images/media
can change size but will always fit within their containing element. The
problem is that this means the image we upload to the site has to be
the largest size that it will ever display as on the site. We can’t scale
up images, they’ll get blurry. We can only scale them down.
130. Performance
So then we’re wasting a lot of bandwidth, forcing users to download images that
are much larger than what they might need for a particular device/screen size.
And also, how do we serve up the appropriate images for retina screens without
wasting all that bandwidth on devices that don’t need HD images?
131. <picture>
The <picture> element has been proposed, but they’re still hammering
out the details, so you can’t use it yet. But I’m going to tell you how it
will likely work, and then tell you what you can do in the meantime.
http://www.w3.org/community/respimg/
132. <picture>
<source srcset="small-1.jpg 1x,
small-2.jpg 2x">
<source media="(min-width: 18em)"
srcset="med-1.jpg 1x, med-2.jpg 2x">
<source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x">
<img src="small-1.jpg">
</picture>
This is what the code will look like, when we want to display an image on our site.
133. <picture>
<source srcset="small-1.jpg 1x,
small-2.jpg 2x">
<source media="(min-width: 18em)"
srcset="med-1.jpg 1x, med-2.jpg 2x">
<source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x">
<img src="small-1.jpg">
</picture>
This part of the code pretty much works the same as a media query, telling the
browser to display a different image based on the viewport width.
134. <picture>
<source srcset="small-1.jpg 1x,
small-2.jpg 2x">
<source media="(min-width: 18em)"
srcset="med-1.jpg 1x, med-2.jpg 2x">
<source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x">
<img src="small-1.jpg">
</picture>
So not only are there different images for each width (small, med,
large), there are also versions for regular (1x) and HD (2x).
135. <picture>
<source srcset="small-1.jpg 1x,
small-2.jpg 2x">
<source media="(min-width: 18em)"
srcset="med-1.jpg 1x, med-2.jpg 2x">
<source media="(min-width: 45em)"
srcset="large-1.jpg 1x, large-2.jpg 2x">
<img src="small-1.jpg">
</picture>
Then, for older browsers that won’t support the new <picture> element,
there’s a fallback, using <img>, which the older browsers do support.
136. Different Images
But it’s not just different sizes of the same image: you
may actually want to display different images.
137. For example, the image on the wide version of this site wouldn’t look nearly as
good at a smaller size. So instead, they choose to use a different crop of the same
image. Sometimes, you may want to display a different image entirely.
http://www.ottersurfboards.co.uk/
139. What’s a Polyfill?
Picturefill is a “polyfill.” That’s a piece of code that fills in to do something in
older browsers that is only natively possible in newer browsers. For
example, a polyfilll can make older versions of IE do all the things we wish
they could do. But there is a downside: using a polyfill adds extra code to
your site, so there’s more to download and more to process. Think about
whether you really need to do the cool new functionality in every browser.
141. <div data-picture data-alt="Your alt text.">
<div data-src="/img/small.jpg"></div>
<div data-src="/img/medium.jpg" data-media="(min-width:
500px)"></div>
<div data-src="/img/large.jpg" data-media="(min-width:
1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
<noscript>
<img src="/img/small.jpg" alt="Your alt text.">
</noscript>
</div>
We’ll need to upload some JavaScript to our site. Then
this is the code we use to add an image to our site.
142. <div data-picture data-alt="Your alt text.">
<div data-src="/img/small.jpg"></div>
<div data-src="/img/medium.jpg" data-media="(min-width:
500px)"></div>
<div data-src="/img/large.jpg" data-media="(min-width:
1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
<noscript>
<img src="/img/small.jpg" alt="Your alt text.">
</noscript>
</div>
Similar to what I showed you previously, we’re linking to
multiple versions of the image (or different images).
143. <div data-picture data-alt="Your alt text.">
<div data-src="/img/small.jpg"></div>
<div data-src="/img/medium.jpg" data-media="(min-width:
500px)"></div>
<div data-src="/img/large.jpg" data-media="(min-width:
1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
<noscript>
<img src="/img/small.jpg" alt="Your alt text.">
</noscript>
</div>
Then we tell the browser which ones should be
displayed at different viewport widths.
144. <div data-picture data-alt="Your alt text.">
<div data-src="/img/small.jpg"></div>
<div data-src="/img/medium.jpg" data-media="(min-width:
500px)"></div>
<div data-src="/img/large.jpg" data-media="(min-width:
1000px)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the
initial, unqualified source element. -->
<noscript>
<img src="/img/small.jpg" alt="Your alt text.">
</noscript>
</div>
If the browser doesn’t support JavaScript, Picturefill won’t
work. So you use <noscript> to serve a fallback image.
145. <div data-picture data-alt="Your alt text.">
<div data-src="/img/small.jpg"></div>
<div data-src="/img/medium.jpg" data-media="(min-width:
500px)"></div>
<div data-src="/img/large.jpg" data-media="(min-width:
1000px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified
source element. -->
<noscript>
<img src="/img/small.jpg" alt="Your alt text.">
</noscript>
</div>
Then there’s older IE, which won’t do the media query part of the code. So
we’ll use conditional comments to give it the appropriate image.
146. HD/Retina
HD/retina screens have twice as many pixels in each direction
(horizontal, vertical) so you actually need an image that uses 4 times as
many pixels, in order to take full advantage of the HD screen.
149. <div data-src="medium.jpg" data-media="(min-width:
400px)"></div>
<div data-src="medium_x2.jpg" data-media="(min-
width: 400px) and (min-device-pixel-ratio:
2.0)"></div>
But this one has an additional query of minimum device pixel
ratio. So the second image will be served if it’s a HD display.
151. Implement this code, and it will detect the screen size, and then create and
serve the appropriate re-scaled version of the image. We only need to upload
the largest version of the image. The server does the rest of the work.
http://adaptive-images.com/
152. Apache & PHP
One caveat: it only works on sites running Apache and PHP. However, if that
is your site, you can use this solution without changing the actual HTML
you use for images (unlike with Picturefill). So it’s very easy to implement.
Plus, you can use it on top of any CMS, since it doesn’t change your HTML.
153. <?php
$resolutions = array(1382, 992, 768,
480); // the resolution break-points to
use (screen widths, in pixels)
...
To set it up, we’ll need to edit the .htaccess file for our site.
We’ll then upload a PHP file, changing a few numbers in the file
to match the actual breakpoints we’re using on our site.
155. <IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !ai-cache
RewriteRule .(?:jpe?g|gif|png)$
adaptive-images.php
</IfModule>
Before sending the image back to the browser, the server looks
at the .htaccess file to see if there are any special instructions.
156. <IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !ai-cache
RewriteRule .(?:jpe?g|gif|png)$
adaptive-images.php
</IfModule>
In this case, we added special instructions in .htaccess, telling it
that if the server is being asked for an image file, it should go
to adaptive-images.php instead of just serving the image.
157. $resolutions = array(1382, 992, 768,
480); // the resolution break-points to
use (screen widths, in pixels)
The adaptive-images.php file looks at the cookie (remember, it stored the user’s
screen size), and figures out which size image it should serve, based on the
breakpoints we set earlier. It serves the original image if appropriate, or else creates
a scaled-down copy of the image. The scaled-down image will be cached for later
use, so the server won’t need to make the same image size over and over again.
158. This is an example from the Adaptive Images website. The various
versions of the image range from 14 KB to 82 KB. So you’re saving a lot
of bandwidth by serving smaller images where you can. Adaptive Images
can also handle HD images, you just need to adjust the JavaScript a bit.
http://adaptive-images.com/
160. Resources: Responsive Images
W3C Responsive Images Community Group
http://www.w3.org/community/respimg/
Which responsive images solution should you use? - May 2012
http://css-tricks.com/which-responsive-images-solution-should-you-use/
Responsive Images and Web Standards at the Turning Point (Mat Marquis) - May
2012
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-
turning-point/
Compressive Images (Scott Jehl) - October 2012
http://filamentgroup.com/lab/rwd_img_compression/
161. Responsive Data Tables
Data tables can be kind of tricky. If there’s a lot of data, how
do you fit it on a small screen? There are many ways you can
do this; I’m going to show you two different options.
162. Responsive Tables uses CSS/JavaScript to change the display of the
table. This is what your table will look like on a wide screen.
http://www.zurb.com/playground/responsive-tables
163. At a narrow width, it pins the first column (which is likely
headings/labels), and puts a scrollbar on the rest of it.
http://www.zurb.com/playground/responsive-tables
165. <table class="responsive">
<tr> …
And then add the “responsive” class to any
table we want to make responsive. That’s it.
166. Here’s a totally different approach, from CSS-Tricks. This is a table at full width.
http://css-tricks.com/examples/ResponsiveTables/responsive.php
167. When we make the screen narrow, what happens is that the
data is displayed one row at a time, with the labels showing
up over and over, so we know what the data refers to.
http://css-tricks.com/examples/ResponsiveTables/responsive.php
168. It’s hard to explain, so look at the screenshot. This is
what you see when you scroll further down the page.
http://css-tricks.com/examples/ResponsiveTables/responsive.php
169. @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-
device-width: 1024px) {
! /* Force table to not be like tables anymore */
! table, thead, tbody, th, td, tr {
! ! display: block;
! }
! /* Hide table headers (but not display: none;, for accessibility) */
! thead tr {
! ! position: absolute;
! ! top: -9999px;
! ! left: -9999px;
! }
! td {
! ! /* Behave like a "row" */
! ! border: none;
! ! border-bottom: 1px solid #eee;
! ! position: relative;
! ! padding-left: 50%;
! }
The implementation is quite a bit more complicated than the previous
example. In the CSS, we’re basically making each table cell into a row.
170. ! td:before {
! ! /* Now like a table header */
! ! position: absolute;
! ! /* Top/left values mimic padding */
! ! top: 6px;
! ! left: 6px;
! ! width: 45%;
! ! padding-right: 10px;
! ! white-space: nowrap;
! }
! /* Label the data */
! td:nth-of-type(1):before { content: "First Name"; }
! td:nth-of-type(2):before { content: "Last Name"; }
! td:nth-of-type(3):before { content: "Job Title"; }
! td:nth-of-type(4):before { content: "Favorite Color"; }
! td:nth-of-type(5):before { content: "Wars of Trek?"; }
! td:nth-of-type(6):before { content: "Porn Name"; }
! td:nth-of-type(7):before { content: "Date of Birth"; }
! td:nth-of-type(8):before { content: "Dream Vacation City"; }
! td:nth-of-type(9):before { content: "GPA"; }
! td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
And then we use :before to make the labels show up adjacent to the
data for every item. We have to manually enter the labels into the
stylesheet for each table, so this can end up being a lot of work.
171. Resources: Responsive Tables
A Responsive Design Approach for Complex, Multicolumn Data Tables
http://filamentgroup.com/lab/
responsive_design_approach_for_complex_multicolumn_data_tables/
Responsive Data Tables with jQuery
http://mobifreaks.com/coding/responsive-data-tables-jquery/
Responsive Patterns: Table Patterns
http://bradfrost.github.com/this-is-responsive/patterns.html#tables
Responsive Data Tables and Screen Reader Accessibility (Jason Kiss) - August 2011
http://www.accessibleculture.org/articles/2011/08/responsive-data-tables-and-
screen-reader-accessibility/
172. Polyfills
I mentioned polyfills earlier.You can make older browsers do what newer
browsers do. That being said, responsive design is about being responsive to the
device and the browser, not about having your site look exactly the same on
every device. So if you start out building your site with the basics first and doing
progressive enhancement, rather than starting out with the most complicated
version of the site and doing graceful degradation, you’ll find that you don’t
always need to make the older browsers act like the newer browsers.
173. Modernizr is a JavaScript library that detects whether a user’s browser can
take advantage of particular features in HTML5 and CSS3.You just need to
upload a JavaScript file, and then call it from the <head> of the page.
http://modernizr.com/
174. <html class=" js canvas canvastext
geolocation crosswindowmessaging no-
websqldatabase indexeddb hashchange
historymanagement draganddrop websockets
rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients no-
cssreflections csstransforms no-
csstransforms3d csstransitions video
audio localstorage sessionstorage
webworkers applicationcache svg smil
svgclippaths fontface">
When the page renders, the JavaScript adds classes to the <html> tag to show
which HTML5/CSS3 features are supported. So you’ll get something different here
based on the browser, and then you can use it to pick what CSS is applied.
175. <html class=" js canvas canvastext
geolocation crosswindowmessaging no-
websqldatabase indexeddb hashchange
historymanagement draganddrop websockets
rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients no-
cssreflections csstransforms no-
csstransforms3d csstransitions video
audio localstorage sessionstorage
webworkers applicationcache svg smil
svgclippaths fontface">
For example, in the latest version of Firefox, there are only a few
that are not supported. They have “no-” before the feature. Keep
in mind these are all now CSS classes on your page.
176. <HTML class=" js no-canvas no-canvastext
no-geolocation no-crosswindowmessaging no-
websqldatabase no-indexeddb no-hashchange
no-historymanagement draganddrop no-
websockets no-rgba no-hsla no-multiplebgs
no-backgroundsize no-borderimage no-
borderradius no-boxshadow no-opacity no-
cssanimations no-csscolumns no-
cssgradients no-cssreflections no-
csstransforms no-csstransforms3d no-
csstransitions fontface no-video no-audio
no-localstorage no-sessionstorage no-
webworkers no-applicationcache no-svg no-
smil no-svgclippaths">
This is what I get in IE7.
178. .no-boxshadow {
...
}
So let’s say we happen to be using boxshadow in our site design. We can
add CSS to do something different only for browsers that don’t support
boxshadow. We might want to use a polyfill to replicate behavior, or if that
part of the style isn’t essential to the design, we might just need some
simple CSS to accommodate the difference in the design.
179. This is a great site: they’ve collected links to all the different polyfills you
can use to replicate various HTML5 functionality in older browsers.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
180. Respond is one particular polyfill I want to point out. It enables
max-width and min-width media queries in browsers that don’t
support them. (IE8 and older, particularly)
https://github.com/scottjehl/Respond
181. <!--[if lte IE 8]>
<script src=”js/respond.min.js”/></script>
<![endif]-->
You just need to upload the JavaScript file, and then link to it
from your <head> using a conditional comment.
183. Prototyping & Design Process
Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-
foundation/
Design Process In The Responsive Age (Drew Clemons) - May 2012
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-
age/
Responsive Web Design Sketch Sheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Style Tiles
http://styletil.es/
184. Books to Read
Responsive Web Design
Ethan Marcotte (2011)
http://www.abookapart.com/products/responsive-web-design/
Mobile First
Luke Wroblewski (2011)
http://www.abookapart.com/products/mobile-first
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
Aaron Gustafson (2011)
http://easy-readers.net/books/adaptive-web-design/
Implementing Responsive Design: Building sites for an anywhere, everywhere web
Tim Kadlec (2012)
http://www.implementingresponsivedesign.com/
185. Other Websites & Misc.
@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD
Future Friendly
making things that are future-friendly
http://futurefriend.ly/
Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/
Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/
186. If you were actually at the CWSA event (Oct. 30, 2012), you’ll
recognize “Flo” from the Progressive lobby. And that’s me on the
left. It’s been my lifelong dream to pose for a picture next to a
cardboard cutout of “Flo.” I can now cross it off my bucket list.
187. *Also if you were at the CWSA event, and arrived in time
for the warm-up act, you will appreciate this resource:
My Hermit Crab is Not Moving - Is He Molting or Is He Dead?
http://exoticpets.about.com/od/hermitcrabs/f/hcmoltordead.htm
Photo credit: Jessica Diamond via Creative Commons http://flic.kr/p/4T5miW