Responsive Web Design

•

0 gostou•527 visualizações

This document discusses responsive design from a visual design perspective. It explains that responsive design uses a flexible grid, flexible images sized with max-width: 100%, and media queries to adapt layouts based on screen size. It provides examples of responsive design implementations and resources for learning more about the approach. The workflow section suggests how to approach building a responsive design.

Design Tecnologia Negócios

RESPONSIVE DESIGN:
A VISUAL DESIGN PERSPECTIVE
July 19th 2012

WHY RESPONSIVE DESIGN?
3 main
elements:
•   Flexible Grid
•   Flexible Images
•   Media Queries

THE FLEXIBLE GRID

Target ÷ Context
= Result
%

CSS MEDIA QUERIES
… aaaand this is where they lost me

WORKFLOW

How to approach responsive design

WORKFLOW
960 px

600 px

480 px

768 px
320 px

FURTHER READING
•   Examples:
–   bostonglobe.com
–   anderssonwise.com
–   us.illyissimo.com
–   stephencaver.com
–   moosylvania.com/blog
•   Resources:
–   Responsive Web Design
–   alistapart.com
–   upstatement.com
–   smashingmagazine.com
–   theexpressiveweb.com

THANK YOU
Kristen Gau
kristeng@theswitch.us
@thegauhaus

liberateyourbrand.com
@liberate

Mais conteúdo relacionado

Destaque

Basic Principles of Interface designZdeněk Lanc

Mastering the Details in Interface Design - Web Design World 2009 - SeattleDan Rubin

Aiga Web 101 — Visual Web Design ProcessRaleigh Felton

Building Web InterfacesChristian Heilmann

Tips for talking about visual design for UX - ConveyUXTania Schlatter

Inspiration from The Edge: New Patterns for Interface DesignStephen Anderson

Interface Design Basics (english)Samo Korošec

Visual Interface DesignJonathan Speh

Guy haviv - History of GUI visual designGuy Haviv

Destaque (9)

Basic Principles of Interface design

Mastering the Details in Interface Design - Web Design World 2009 - Seattle

Aiga Web 101 — Visual Web Design Process

Building Web Interfaces

Tips for talking about visual design for UX - ConveyUX

Inspiration from The Edge: New Patterns for Interface Design

Interface Design Basics (english)

Visual Interface Design

Guy haviv - History of GUI visual design

Semelhante a Responsive Web Design

Designing CSS Layouts for the Flexible WebZoe Gillenwater

Modern Web Boot Camp - BBCON 2015Caleb Copper

CMS Design & Layout Best PracticesKatie Santo

Cover Your Visual Public Relations Assets with Canva and moreLisa Buyer

Contemporary Trends In Web DesignKenny Rosenberg

Free Webinar: 2020 Design Trends: Create an Awesome Website!June Bachman

Responsive Web AppsNick Pettit

Introduction to Search Engine Mechanics: A Look Under the HoodResource Media

Graphics101bthat

Better User Experience for WordPress Sitesaungstad

Ideas for using Web 2.0 tools in the classroom - updated September 2016talkPrimaryICT

MCN 2013 Verso PresentationThe Metropolitan Museum of Art

Responsive Web Designsimonstarr

Creating Blockbuster Content (SMX Advanced 2014)Brent Csutoras

Social Media Boot CampPeter Liu

Graph Walks & Vector Embeddings: Exploiting the head and exploring the tail Brian Johnson

Publishing Student Projects on the WebAmy Goodloe

CSS Framework + Progressive EnhacementsMario Hernandez

A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....Aidan Foster

Using Hypermedia Technologies shughes

Semelhante a Responsive Web Design (20)

Designing CSS Layouts for the Flexible Web

Modern Web Boot Camp - BBCON 2015

CMS Design & Layout Best Practices

Cover Your Visual Public Relations Assets with Canva and more

Contemporary Trends In Web Design

Free Webinar: 2020 Design Trends: Create an Awesome Website!

Responsive Web Apps

Introduction to Search Engine Mechanics: A Look Under the Hood

Graphics101

Better User Experience for WordPress Sites

Ideas for using Web 2.0 tools in the classroom - updated September 2016

MCN 2013 Verso Presentation

Responsive Web Design

Creating Blockbuster Content (SMX Advanced 2014)

Social Media Boot Camp

Graph Walks & Vector Embeddings: Exploiting the head and exploring the tail

Publishing Student Projects on the Web

CSS Framework + Progressive Enhacements

A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....

Using Hypermedia Technologies

Mais de Switch

10.20.30: Trends in Meetings & EventsSwitch

Emerging Trends in MobileSwitch

Crimson Hexagon: Social Intelligence that MattersSwitch

What Robo Cop Can Teach Us About User ExperienceSwitch

Antiplatform: Creating Effective Brand ExperiencesSwitch

Personality Color ProfileSwitch

Cause MarketingSwitch

Post Live: The Crucial Time Following An EventSwitch

Digital Trends 2012Switch

Emotional Intelligence: How to Succeed in Digital, Creative & Marketing Envir...Switch

Switch 10/20/30 - Understanding Universal DesignSwitch

Should Designers Be Certified?Switch

Mais de Switch (12)

10.20.30: Trends in Meetings & Events

Emerging Trends in Mobile

Crimson Hexagon: Social Intelligence that Matters

What Robo Cop Can Teach Us About User Experience

Antiplatform: Creating Effective Brand Experiences

Personality Color Profile

Cause Marketing

Post Live: The Crucial Time Following An Event

Digital Trends 2012

Emotional Intelligence: How to Succeed in Digital, Creative & Marketing Envir...

Switch 10/20/30 - Understanding Universal Design

Should Designers Be Certified?

Último

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls

HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...poojakaurpk09

💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...sonalitrivedi431

➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...amitlee9823

Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588

Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion pills in Kuwait Cytotec pills in Kuwait

Sweety Planet Packaging Design Process Book.pptxbingyichin04

8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Availabledollysharma2066

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home

Peaches App development presentation decktbatkhuu1

How to Build a Simple Shopify Websitemark11275

一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证wpkuukw

Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...nirzagarg

UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...RitikaRoy32

Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile

call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR

Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedDelhi Call girls

Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...amitlee9823

怎样办理伯明翰大学学院毕业证（Birmingham毕业证书）成绩单留信认证eeanqy

Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823