12 ms·

Responsive Web Design – Advanced Lesson

• webbruce 14y ago
  Great quality instructions Shay, nice work.
• simonwesterlund 14y ago
  it is very funny that this page isn't responsive.
  • deleted 14y ago
    [deleted]
  • pestaa 14y ago
    Is it funny that your towel isn't always clean? Responsive design has its place and the article describes that quite well. IMHO it shouldn't be applied to the article itself.
    • rmrfrmrf 14y ago
      > Is it funny that your towel isn't always clean? This actually made me laugh...
  • nikolakirev 14y ago
    I was about to comment on the same thing, but actually I think it will look good on a tablet and I guess a smartphone is not the best device to read web design tutorials.
• danielovich 14y ago
  This just makes one realize how broken the standards really are. All these things should, to some extent, be taken care off without the developer needing to apply it. I know how things work, just sayin'...it's broken!
  • weareconvo 14y ago
    I'm not sure what it is you mean by "all these things". However, if you read the standards, you'd understand why they behave very conservatively with respect to adding more stuff in there.
• monsterix 14y ago
  This is good stuff. Would be great if it went right in and also talked about limitations like fewer ports-per-connection, poor standards support e.g. stuff like unsupported position:fixed property, dead file-input field, terrible response times for tap/long-tap etc. I mean responsive layout for presentation of content (blog/BS) is fairly easy. For an interactive web-app however, design logic goes quite in the opposite direction. To this end I found http://html5rocks.com http://html5rocks.com a very useful resource. Looking at current number of devices and independent implementations of browsers having different levels of support for web standards, (even on iDevices!) I feel that we are sort of back to 1995.
  • sdp 14y ago
    http://html5rocks.com http://html5rocks.com seems to be a wealth of resources. What in particular did you find useful?
• ericdykstra 14y ago
  This is a really good and succinct overview. I'm definitely saving this article both for self-reference and for showing other people who don't grasp responsive design. Thanks for writing this!
• mnicole 14y ago
  No mention of calc with hard definitions as a fallback? Besides Opera, it's fully adopted on desktop browsers (including IE), Firefox for Android and soon on BlackBerry.
• psvx 14y ago
  My browser (chrome) freezed-up for a few seconds. Seriously.
• gadders 14y ago
  I spent a couple of nights last week reading the beginners course. I've put together a couple of simple websites already, but always using a "copy-paste-hack it about until it works" methodoly. The beginners course was a great way to get the fundamentals straight in my head. Very well written and understandable. Thanks Shay!
• cabalamat 14y ago
  Is there any point in having medium-grey text on a slightly lighter grey backgound, other than to make it very hard to read? http://contrastrebellion.com/ http://contrastrebellion.com/
  • tokenadult 14y ago
    Thank you for sharing the Contrast Rebellion link. I will link to that from the updating version of the colophon of my personal website as I do personal website updates this year. I wish I could upvote that link more than once, as there are many websites posted in designs with too little contrast for reading. And speaking of readability, there are still too many sites that break if a user resizes the browser font size (done with CTRL-+ or an analogous Apple command on most browsers), although that is not a problem with the site kindly submitted here to open this thread.
    • tracker1 14y ago
      Thank you for bringing up the font scaling issues.. I do about 2/3 of my casual reading on the TV, from the couch (HTPC), and usually have to scale to 125% for readability.. I hate when the font is already too small AND doesn't scale properly. A point made in the article is important to me as well... there are times when zooming on my phone is important too, and sites/apps that disable this ability make it painful.. I tend to make the initial size device with, and limit scaling to 1-2x, which is generally enough. I wish that more people paid attention to scaling, especially given higher pixel displays on the horizon, and already in mobile devices.
    • FredFredrickson 14y ago
      Might I ask what browser you're using? Older browsers used to just resize the font inline, and leave other elements alone, but most modern browsers resize everything these days when you use those commands, so sites shouldn't look any different when scaled up or down. It's been this way for a long time, it seems.
  • lowboy 14y ago
    It's easy on my eyes on my monitors. And it's #555 on #fafbfc, hardly "slightly lighter". For that font size/weight I would have gone #333/444 but it's pretty close.
• kronholm 14y ago
  I've only ever done responsive via JavaScript, as I often need to target as many old and new browsers as possible. It seems like my method is way easier and faster than this "new" fancy CSS way. Does anyone have any experiences with both approaches, and if yes, which do you prefer? For those wondering: My method is pretty simple - I use a global ratio which is multiplied with width/heights, and a resize() function, which is called when the page is loaded and resized. Edit: Long timer HN lurker, registered to post this. Also forgot to say I enjoyed the article, thanks!
  • tracker1 14y ago
    I tend to use CSS for the bulk of layout. Lately leaning on say Twitter Bootstrap as a base... and using JS for some tweening, or other points. I also use Modernizr, and other JS to enhance classes in the HTML element for CSS use. I find this works pretty well... I can keep my rules in CSS, but can enhance them via JS. My enhancers are the only script I put into the HEAD (before the CSS), all other scripts are just before the closing BODY element with ads and analytics last of the scripts. I do think that having a good base CSS knowledge is important. The exception to this, would be a full-screen site/application where you are using the full field of view for an interactive display, or simulation. Then JS leaning and even canvas are more important for interaction.
  • zaius 14y ago
    I'd be interested to see this idea in action - got any sites up as examples?
    • kronholm 14y ago
      Sadly no, nothing I can show yet :(
    • rdeck 14y ago
      I think this one can be very useful for examples: http://responsivedeck.com http://responsivedeck.com
  • brimanning 14y ago
• mddw 14y ago
  As usual, nothing on cross-browser compatibility (respond.js, modernizr...), nothing on speed optimisation (a real problem in RWD), on backends issues (regarding the multiples images needed), etc... It often strikes me, reading these tutorials about RWD, than the authors know all very well the theory but have never done a real (ie for a client) responsive website in their life. It's all generic and general stuff, never how a stupid menu can be a real bother when you have to support two different states, touch and mouse, users without javascript, changing states, IE9 with no CSS3 transition support, etc. Tutorials show you the easy way, the way which works only for cable users with a fancy Macbook and the last Safari or 4G iPhone users. In real RWD, what should be easy becomes hard, and nobody'll tell you that. (btw, i'm not a RWD hater. I just want to warn about its realities.)
  • jbail 14y ago
    I barely skimmed the article (I've written myself about responsive design here: http://www.ibm.com/developerworks/library/wa-cssqueries/index.html http://www.ibm.com/developerworks/library/wa-cssqueries/inde...), but he does mention cross-browser compatibility and respond.js in particular.
  • larrydavid 14y ago
    >As usual, nothing on cross-browser compatibility (respond.js, modernizr...), nothing on speed optimisation (a real problem in RWD), on backends issues (regarding the multiples images needed), etc... Well these could all be articles in themselves really. I think this highlights the fact that RWD isn't simply a case of just shrinking your 'full' website down to mobile phone size. It is a rather broad subject and not really one that can summarised quickly in a single article. If you would like to delve deeper into the subject then I would recommend checking out Brad Frost's articles. This is a great starting point http://bradfrost.github.com/this-is-responsive/resources.html http://bradfrost.github.com/this-is-responsive/resources.htm...
• double051 14y ago
  Interesting how this site isn't following it's own advice. The layout is awful for anyone on a phone.
• hawleyal 14y ago
  Ew, float. Hasn't everyone moved on to inline-block?
• gfodor 14y ago
  As someone who's been asleep at the switch with regards to responsive design I get the sense that it's, well, hard. Has anyone written about the "responsive design vs forking the website for mobile" tradeoff? If I were to start hacking together a site today I would probably just create two or three completely different layouts and DRY things up as much as I could in code, instead of trying to get the stars to align and get my browser to render the same assets correctly in all browsers. In other words, responsive design seems to bring under the fold a use case that does not exist: physically resizing a browser window from a desktop size to a mobile size and having a page render correctly as you do it. Its a nice trick, but unless you assume the same client is going to need to see the content "respond" to changes in window size, then it seems prudent to take that use case off the list and simplify the implementation around the real use case: a client with a pre-defined browser window size hits a page and renders it, full stop. (with some small flexibility since users on desktop browsers do resize their window by some % occasionally) (Ie, if you focus on this case, simplest solution may be to fork it at render time in code where you have to and keep the CSS/etc straightforward.)
  • FredFredrickson 14y ago
    I've always assumed the benefit is that you don't have to maintain a separate set of files for each window size... but it seems like, for all intents and purposes, you might as well be if you have to set up special cases for all sorts of window sizes, just in one document.
    • gfodor 14y ago
      Yeah I guess what I mean is you should always aim for DRY but who says the code reuse has to happen on the client? Why not do at least some of the necessary changes based upon screen size upstream on the server if it reduces complexity? My guess is this is probably harder for designers than hacking on CSS. I don't buy the argument that it's more or less DRY depending on where the reuse occurs. The only argument is that there is some value in having the browser understand the layout more fundamentally, but the only use case this enables is the "resize to mobile size on my desktop computer" case, unless I'm missing something.
• esschul 14y ago
  I think most pages are interested in getting a reasonable view in mobile. From my experience the cheapest and best way is to use media queries and say for everything with a viewport less than 700px, let the divs get a 100% in width. Add that to you base.css and it should already be 100x better for your customers/users.