Responsive Design

Started by Torben, September 28, 2011, 07:06:07 AM

Previous topic - Next topic

Torben

Responsive design is the new black. Take a look at these examples: http://mediaqueri.es/

The basic idea of responsive design is that the design should adapt to the browser size using HTML5 and CSS. So as you re-size the browser the design will change.

Personally I don't like it when they try to adapt the content to my iPhone. I quickly start looking for the button to deactivate the mobile version but there isn't one. In many cases zooming works just fine for me.

bill

I haven't worked on any responsive design sites. Are there standards in place or is everyone still winging it? I used to have a lot of fun with fluid design sites, but we didn't have the CSS and HTML support we do today. Actually it was all a bit kludgy.

rcjordan

>kludgy

Kludge is my specialty.  It is still possible to to make fluid work pretty well on a range of devices from smartphones to 50-inch monitors (probably higher, but that's where I quit testing).  But it takes some special handling of image resizing though it's still basic html. I do not, however, try and reduce the image's size/bytes on the fly. Instead, I use a median size and reduce or expand based on percentages.  In some highly detailed graphics, there *may* be distortions at the extreme ends of the range but it's really not that much of a problem.

>adapt the content to my phone

IMO, consistency of UI is far more important than maximizing the convenience of usability for each device.  Louise is constantly nuking apps that alter the UI for phone or tablet user and then accessing them by browser JUST so the UI stays the same.  (ICab allows her to set the user agent, which is a big help in stopping all that made-for-mobile crap.)

agerhart

QuoteLouise is constantly nuking apps that alter the UI for phone or tablet user and then accessing them by browser JUST so the UI stays the same. 

I've done that as well

I hate when the APP doesn't have the same features

rcjordan

>hate when the APP doesn't have the same features

Either the developers just don't get it or they're counting on mobile to completely displace desktops & laptops (cut to image of a massive corporate cubicle farm where everyone is using a smartphone for work).


Source code for the kludge I'm using for variable images.  I set up 2 classes (left, right) for each of the size percentages I use.

<div class="left28"><img src="whatever.jpg" alt="" /></div>

.left28 {
 float:left;
 width:28%;
 z-index:1;
 margin: 0 5px 2px 0;
 padding-left:5px;
 padding-right:5px;
 padding-bottom:3px;
}

>new black

This was high on pinboard just yesterday.

http://adaptive-images.com/

Gurtie

>> consistency of UI is far more important than maximizing the convenience of usability for each device
>> Either the developers just don't get it or.....

heh, I've just finished a book about designing for internal website searches. One of the bits I found interesting was his (very pursuasive) argument that you should not only rework but probably entirely rethink the design for different devices as the intended usage is likely very different.

That does make sense to me on the basis that *most* computer users are 'typical browsers' and can be encouraged to explore and cross sold to, while mobile users tend to want quite specific focused output from their search (and are often using one thumb to navigate). His comments about tablets and that smartphone and table usage is almost entirely different (different zones which can easily be touched repeatedly, different states of mind when using them generally, very different 'owners' in that tablets are much more of a shared device and phones are very personal) were quite perceptive, I thought.

Just highlights that we do need to user test I guess :)



Rupert

We were just looking at this, and Rich pointed me to this:
http://www.alistapart.com/articles/responsive-web-design/ and a good example:

http://bostonglobe.com/

I really like the way the pages changes to give less data when it narrows. Purely width based not browser based.   Would be a big refit for us.

... Make sure you live before you die.

bill

That Boston Globe site is quite well done. However I read that it was quite expensive to do and took a long time to perfect. Not something one could slap together in a weekend from the sounds of it.