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

VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...Call Girls in Nagpur High Profile

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

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

Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh

Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...amitlee9823

Government polytechnic college-1.pptxabcdshivubhavv

CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵anilsa9823

VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130Suhani Kapoor

Tapestry Clothing Brands: Collapsing the Funneljen_giacalone

CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girlsmodelanjalisharma4

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

young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service9953056974 Low Rate Call Girls In Saket, Delhi NCR

Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls

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

WAEC Carpentry and Joinery Past QuestionsCharles Obaleagbon

VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130Suhani Kapoor

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

Fashion trends before and after covid.pptxVanshNarang19

Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Delhi Call girls

VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile