Play or Download this Episode (Recorded live on 08/24/2012)
Download MP3 (58.17 MB / 01:03:32)
Subscribe to the Show
Here’s the link to the event page where we did the live show.
Questions Ethan Answers
You reference John Allsopp’s article A Dao of web Design from April, 2000. You quote specifically:
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things”.
How did you get there? How did you learn to let go and accept that web design isn’t fixed, that it’s not pixel perfect? Why do you think this is something we fight so hard against as designers?
So, you’ve coined the term “Responsive Web Design”. You say it’s made up of 3 core pieces: 1. Flexible Grid 2. Flexible Images/media 3. Media Queries
Do you feel like most websites that are noted as being RWD are actually RWD if you take a purist stance on this definition?
Let’s talk Flexible Grids!
Bringing the change from setting our sizes with pixels to ems & %’s is kind of a large shift. As designers we all really like that fixed design approach… What kind of flack did you get at first when you started talking about this? Or did you at all? Do feel like it took a while to be openly accepted?
I love the simplicity of the “relative scaling formula”: target / context = result
Did you get the vision for that while hanging a picture and banging your head on the toilet like Doc Brown and the Flux Capacitor? Where did that come from?
Sometimes when I do this math I get numbers like 0.4583333333em – how did you get at the idea that we should let the browser do the rounding for us and not round it on our own in the CSS?
Flexible Images: What would you say is the biggest challenge right now in conquering the flexible image problem? in terms of serving up device or screen specific sized images…
Tyler Walters: In light of Apple’s new MacBook Pro with Retina display and other manufacturers habits of copying Apple, I anticipate that in a few years, high resolution displays will be common on new laptops and desktop displays.
What techniques (media queries or other magic) do you recommend to send images with appropriate resolution to these high resolution displays while not burdening lower resolution machines with the high bandwidth and longer load times that go along with high-res images?
Media Queries: My mind was blown in 2010 when we had Zoe Gillenwater at our ConvergeSE conference and she dropped Media Queries on the audience. I literally jumped up and gave a “wooo eeee” because i’d not seen it before even though it’s a CSS2 thing. What made you fold in the final piece of the 3 piece suit of RWD with Media Queries?
Natalia Ventre: Can you give us some design tips for big screens? (fullscreen mode)
We talked about liquid layouts already, and mixing liquid designs and targeting screen width with media queries is a brilliant mix. “max-width” lets us kind of end it properly, giving us that control to not let the lines of copy go on forever. Ethan’s quote:
“So when and if my client decides their audience would benefit from a widescreen layout, they could easily lift the current max-width constraint, create another media query, and design a compelling experience”
Are you still a proponent for thinking this way? How have you tackled designing for “wide-screens” so far?
Context for RWD We make a lot of assumptions about what a user wants out of a website depending on what type of device they are using… How do you get to the core of the context of what the user is viewing the website on and what their intentions are?
Jessica Travieso: Hello Ethan, Don’t you think that you have ruined the life of web designers with responsive techniques that have forced us to develop for infinite devices? Do you have any other suggestion that can offer us a painless future?
Roman Serebryakov: When talking responsive design or adaptive design, we can see that a lot of websites follow the similar grid layout. After awhile, as a designer, you start notice that almost every website that is responsive looks the same, logo on left, center, navigation to the right, below etc. Does if bother you that the more responsive designs get, the more similarities and common page design we will see? For designers, there is not going to be much room left for creativity, it will be mostly like designing for the magazine or even newspaper, the expected things are going to go to expected places… It is one of few reasons our company does not spend too much time offering responsive sites to the clients, mostly because our designs are so different and complex with each design that being responsive is perceived as a design limitation, not functional… Your thoughts?
Marko Ranđelovic: Can you ask Ethan what were the most challenging aspects of his latest responsive web design projects?.
Responsive Workflow:
Much is being made of this now as we all struggle with how to work RWD into our web design processes. What kind of workflow have you been a part of that’s been most successful for a RWD project?
In the November 2011 issue of .Net magazine – the one all about RWD. Elliot Jay Stocks said:
“The responsive web design movement has finally heralded a fundamental shift in the way many of us think about designing for the web….we’re designing truly interactive experiences and the days of fixed, flat photoshop mock-ups are almost over. As are the days of designers who can’t code.”
What’s your take on that quote?
What are some of your favorite things that you’ve seen people push RWD forward with?
Prize Winners
Winner of the RWD summit ticket: Ashley Callahan
Winner of your ABA choice of books: Evan Huntley
Links to things mentioned during the discussion:
http://fitvidsjs.com/
https://gridsetapp.com/
http://ejohn.org/blog/sub-pixel-problems-in-css/
https://github.com/scottjehl/picturefill
https://twitter.com/zomigi
http://www.designbyfront.com/
https://twitter.com/RWD
http://www.people.com/people/mobile/home/
http://karenmcgrane.com/
http://www.abookapart.com/products/content-strategy-for-mobile
http://incontrolconference.com/
http://shoptalkshow.com/
http://foundation.zurb.com/
https://github.com/davatron5000/Foldy960
http://styletil.es/
http://paravelinc.com/
https://twitter.com/wilto
http://www.markboulton.co.uk/
http://rogerblack.com/blog/post/the_holy_grail_part_i
Thank You!
THANK YOU’s for listening to the first UMS Book Club and thank you all for becoming members, we’re going to send everyone who “joined” and gives us their address a little welcome kit!
Thanks to Ethan – go get his book if you haven’t already.
Next up is Sept 28 – Mike Monteiro (@Mike_FTW) “Design is a Job”
0 Comments