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

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

DragonBall PowerPoint Template for demo.pptxmirandajeremy200221

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

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

Case Study of Hotel Taj Vivanta, PuneLukeKholes

The Art of Batik, template ppt aestheticTiaFebriani

Government polytechnic college-1.pptxabcdshivubhavv

Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...Call Girls in Nagpur High Profile

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

The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi

Editorial design Magazine design project.pdftbatkhuu1

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

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

(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat

Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...babafaisel

Delhi Call Girls Paharganj 9711199171 ☎✔👌✔ Whatsapp Hard And Sexy Vip Callshivangimorya083

Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy

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

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

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