Responsive Web Design

•

0 recomendaciones•527 vistas

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.

Diseño Tecnología Empresariales

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

Más contenido relacionado

Destacado

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

Destacado (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

Similar 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

Similar 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

Más 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

Más 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

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

VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY

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

VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Servicearoranaina404

❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.Nitya salvi

Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Call Girls in Nagpur High Profile

Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyNitya salvi

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

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

call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...Delhi Call girls

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...BarusRa

Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja Nehwal

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

Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...amitlee9823

Case Study of Hotel Taj Vivanta, PuneLukeKholes

B. Smith. (Architectural Portfolio.).pdfUniversity of Wisconsin-Milwaukee

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

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

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

Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja Nehwal