Responsive Design

•

211 recomendaciones•83,702 vistas

Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.

Tecnología Diseño

SARA CANNON
Artist, Designer, & WordPress
Developer In Birmingham, AL

Co-founder / Creative Director
Range

sara-cannon.com @saracannon

The total number of
people using the web on
mobile devices is set to
surpass desktops by 2015.

INTERNATIONAL DATA CORPORATION (IDC)
http://www.idc.com/getdoc.jsp?containerId=prUS23028711

2007 2009 2011 2013 2015

DESKTOP MOBILE

ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf

“ Rather than tailoring
disconnected designs to each of
an ever-increasing number of
web devices, we can treat them
as facets of the same experience.

- ETHAN MARCOTTE

alistapart.com/articles/responsive-web-design

1. ADAPTIVE GRIDS, IMAGES, & MEDIA
2. MEDIA QUERIES
3. TESTING / CRYING TWEAKING
4. ?????
5. PROFIT!

FLEXIBLE GRIDS

alistapart.com/articlesfluidgrids

by Ethan Marcotte

GRID FRAMEWORKS

lessframework.com columnal.com

GRID FRAMEWORKS

cssgrid.net getskeleton.com

TARGET ÷ CONTEXT = RESULT
940

100%

720 220

76.5957447% 23.40425535%

“ The toughest challenge in
implementing the responsive
bits was ﬂuid media.

- LANCE WILLETT, WORDPRESS.COM

MEDIA SOLUTIONS

netmagazine.com/tutorials/ ﬁtvidjs.com
create-ﬂuid-width-videos

by Chris Coyier

MEDIA SOLUTIONS

ﬂex.madebymuﬀﬁn.com ﬁttext.js

filamentgroup.com/lab/responsive_images_experimenting
_with_context_aware_image_sizing

viewportindustries.com/blog/automatic-responsive-images-in-wordpress

CSS3-MEDIAQUERIES.JS
code.google.com/p/css3-mediaqueries-js

css3-mediaqueries.js is a JavaScript library to make
IE 5+, Firefox 1+ and Safari 2 transparently parse, test
and apply CSS3 Media Queries

alistapart.com/articles/responsive-web-design

unstoppablerobotninja.com/entry/fluid-images/

smashingmagazine.com/2011/07/22/responsive-web-design-
techniques-tools-and-design-strategies

zomigi.com/blog/essential-considerations-for-crafting-
quality-media-queries/

palantir.net/blog/scalable-navigation-patterns-
responsive-web-design

designshack.net/articles/css/sass-and-media-queries-
what-you-can-and-cant-do

Más contenido relacionado

La actualidad más candente

Android Architecture

Pietro Alberto Rossi

Responsive web design ppt

NAWAZ KHAN

Nodejs presentation

Arvind Devaraj

Asp.net

Dinesh kumar

Responsive web designing ppt(1)

admecindia1

Bootstrap Components Quick Overview

Perumal N K

Frontend Crash Course: HTML and CSS

Thinkful

Html & Css presentation

joilrahat

Introduction of Html/css/js

Knoldus Inc.

Introduction to NodeJS

Cere Labs Pvt. Ltd

HTML + CSS Examples

Mohamed Loey

SVG - Scalable Vector Graphics

Shweta Sadawarte

Introduction to Bootstrap

Ron Reiter

Android Studio Overview

HTML CSS Basics

Ionic Framework

Media queries A to Z

Dot Net Core

Wordpress

Introduction Node.js

La actualidad más candente (20)

Android Architecture

Responsive web design ppt

Nodejs presentation

Asp.net

Responsive web designing ppt(1)

Bootstrap Components Quick Overview

Frontend Crash Course: HTML and CSS

Html & Css presentation

Introduction of Html/css/js

Introduction to NodeJS

HTML + CSS Examples

SVG - Scalable Vector Graphics

Introduction to Bootstrap

Android Studio Overview

HTML CSS Basics

Ionic Framework

Media queries A to Z

Dot Net Core

Wordpress

Introduction Node.js

Destacado

Boston Globe: Responsive Web Design

The Media Consortium

Responsive Design Workflow: Mobilism 2012

Stephen Hay

Ready for responsive? It’s not just about layout design: a responsive redesign will raise challenges with your content strategy, layout organization, cms and technology solution. This workshop introduces attendees to the mindset and techniques necessary for embracing the fluid nature of the web. This half-day session will review the basic principles of responsive web design, including addressing topics such as user experience and best practices, grid design and rapid prototyping techniques.

Responsive Webdesign

Antonio De Pasquale

Responsive Web Design: Clever Tips and Techniques

Vitaly Friedman

Maximizing Sales from eCommerce Sites (Forte Consultancy Group)

Berkin Ozmen

Responsive web-design through bootstrap

Zunair Sagitarioux

Artesanias de guaranda

jta100

As web developers, we might not always have experience or training with principles of design. This presentation's goal is introduce some basic design principles and provide some resources to help developers create better designs or at least become more aware of design. Finally, the end of the presentation will introduce Bootstrap 3 in more of a workshop format. I'll show people who to add Bootstrap to their project and how easy it is to apply some basic design.

Design for Developers: Introduction to Bootstrap 3

John Bertucci

www.exoplatform.com - The second session of "eXoers on the grill" presentation in Vietnam. After a very good start last month about the Git Rebase Functionality presented by Trong from the Portal team the subject of this session was the Responsive Design. This presentation was prepared and presented by all members of UI Team: Giang, Hoa, Trung and Thibault. eXoers on the Grill aims to provide some incentive & fresh air for our staff in order to constantly re-think our methods, spread good practices, promote some technology or tools, generate ideas, etc... All the teams are invited to contribute by picking up some hot topics of their choice and spread to other teams.

Introduce Bootstrap 3 to Develop Responsive Design Application

eXo Platform

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...

Cedric Spillebeen

Introduction to Responsive Web Design

Clarissa Peterson

Design Process in the Responsive Age

Pon Kattera

An investigation into the use of twitter by lecturers and students to support...

Ed de Quincey

materi webdesign - CSS

Galeria de fotos

Galeria de fotos2

Teaser Proposal

Responsive Web Design Workshop

Stewart Curry

Wichtige Bezeichnungen im Zusammenhang mit Webdesign und Webentwicklung. Hier geht es nicht so sehr ins Detail. Die Slides sollen lediglich einen schnellen Überblick und kurze Definitionen zu den genannten Bereichen im Webdesign geben. Begriffe wie "Usability" und "Whitelabel" werden von Laien häufig falsch angewendet, was z.B. bei Briefings und Workshops mit Kunden und Entwicklern zu Missverständnissen führen kann. Es ist wichtig ein gemeinsames Verständnis dieser Bezeichnungen zu haben. Ich habe diese Zusammenfassung aus eigenem Interesse für einige Projekte erstellt und war der Meinung sie ist vielleicht auch für Andere hilfreich. Anregungen gern in die Kommentare oder direkt an mich. Danke an @franz für's Gegenchecken.

Webdesign Fachbegriffe

sascha assbach

$Academy PRO: UI\UX. Introduction.$ $Academy PRO: UI\UX. Introduction.$

Academy PRO: UI\UX. Introduction.

Binary Studio

Destacado (20)

Boston Globe: Responsive Web Design

Responsive Design Workflow: Mobilism 2012

Responsive Webdesign

Responsive Web Design: Clever Tips and Techniques

Maximizing Sales from eCommerce Sites (Forte Consultancy Group)

Responsive web-design through bootstrap

Artesanias de guaranda

Design for Developers: Introduction to Bootstrap 3

Introduce Bootstrap 3 to Develop Responsive Design Application

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...

Introduction to Responsive Web Design

Design Process in the Responsive Age

An investigation into the use of twitter by lecturers and students to support...

materi webdesign - CSS

Galeria de fotos

Galeria de fotos2

Teaser Proposal

Responsive Web Design Workshop

Webdesign Fachbegriffe

$Academy PRO: UI\UX. Introduction.$ $Academy PRO: UI\UX. Introduction.$

Academy PRO: UI\UX. Introduction.

Similar a Responsive Design

A Future Friendly Web

Marcel Kalveram

Responsive web design has taken our industry by storm and with good reason: it helps us improve our reach with less effort. But incorporating responsive design is not the goal, meeting our user’s needs is. Responsive design is not an end in itself… it’s just the beginning. As a fitting way to kick off our new workshop series, we’ve asked two internationally-renown mobile web and responsive design experts—Brad Frost (of This is Responsive, and Pattern Lab fame) and Aaron Gustafson (author of Adaptive Web Design)—to come and teach us everything we need to know about working in this multi-device reality. For the first part of the day, Brad and Aaron will survey the landscape of responsive design, covering: * broad concepts, * strategies, * the design process & deliverables, *emerging design patterns and principles, and * development best practices and considerations. Then, we’ll break into small groups to tackle some thorny responsive challenges through discussions, sketching, and maybe even a little coding while Brad & Aaron provide real-time feedback and push us to go further. At the end, we’ll share our findings with the class and get additional feedback from the experts.

Responsive Design & Beyond [Code & Creativity Workshop]

Aaron Gustafson

Mobile is all the rage these days — and it should be. Many website owners believe creating a separate mobile website is the solution, with browser sniffing to redirect all "mobile" traffic to a separate m.example.com domain. But it turns out that most of the time this is a terrible solution. Come hear Jen Simmons talk about how there's only one web — not a mobile web separate from the desktop web. And learn how you can use HTML5 and responsive web design to create one unified website or web app for your project and Just Have It Work™ on a wide range of devices.

Jensimmons html5live-responsivedesign

Jen Simmons

[Mobile Future] Sofia Svanteson, Ocean Observations

Mobilbusiness

Workshop 11: Trendy web designs & prototyping

Visual Engineering

In 2017, “adaptive content” has become a buzzword. To some, it’s a complex, long-term initiative to structure content for flexible reuse and dynamic targeting. To others, it’s a way to ensure that everyone, everywhere, sees exactly what they want—like magic! In this talk, Karen shares her perspective (and reservations) on how adaptive content is being used today. She’ll discuss how adaptive content supports targeting content to device type—and why that’s rarely necessary. She’ll also describe ways that adaptive content can support tailoring content according to context—and ways that can go wrong. You’ll walk away with a better understanding of when adaptive content is necessary and how to get the most value from it.

"Adaptive Content, Context, and Controversy

Blend Interactive

Take a look around you, on a train, in a queue at the supermarket or at a concert. Chances are good you will see people interacting with their mobile phones or tablets. So far there has been a title wave of new apps being developed by companies and organisations. But is an app really always the answer to the question of how to reach, and interact with customers in mobile devices? In this session we look at the differences between native apps, and mobile web sites, and most important - how do we decide between the two, when we want to engage with customers in the mobile context.

The mobile landscape - Do you really need an app?

Valtech UK

The mobile landscape london 2012

Mathias Strandberg

What’s the difference between responsive and adaptive? While responsive design embraces an ethos of “One Web,” adaptive solutions aim to serve different information based on what we know about the person or the device. When people say they want to go “beyond responsive,” they often mean they want to implement adaptive solutions. In this talk Karen unpacks what people really mean when they talk about adaptive designs or adaptive content. She outlines scenarios in which it makes sense to target information to the device or context—and when it doesn’t.

Adaptive: Content, Context, and Controversy

Karen McGrane

The Mobile Landscape - Do you really need an app?

Valtech UK

The mobile landscape london tfm&a 2013

Mathias Strandberg

Julie Mckenzie-project4-fwd

mckenzjules

Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...

Lee Roberson

Responsive web design

Senthilkumar Gopal

Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…

Atwix

Web design is not an interactive brochure anymore. Smart mobile devices have forever changed the way we think and interact with websites. Now you have to consider an array of things you didn’t have to worry about before, such as HiDPI graphics, UI/UX patterns, touch target sizes, gestures, and managing expectations. All the while not losing track of what’s important: Content. We’re going to discuss the influence of mobile on design, trends, and implementation methods, as well as how touch is changing our lives. As designers and developers, we can benefit from learning about how mobile is changing the way we interact with websites, and what that means for the future of UI.

The Future of UI - How Mobile Design is Shaping The Web 2

Responsive Design

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Responsive Design

Similar a Responsive Design (20)

Más de Sara Cannon

Más de Sara Cannon (20)

Último

Último (20)

Responsive Design