SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resolution and build of responsive web sites

    Hello everyone.

    I'm a graphic designer who wants to understand more about responsive web design (as not to waste to much of the time of the guys who are going to implement the design).

    I see that some sites content is made to fit within a few specified resolutions, while others are even more dynamic, and change. This site http://foodsense.is/ seems to have five resolutions, this one seems to have three http://www.cacaotour.com/index.php/en/cacaotours, and this one seems to have only two http://2011.dconstruct.org/

    So what resolutions should I work within, and is it better to make a design completely fluid, or to make it work within some specific resolutions?

    Thanks for helping!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It does depend on the site in question and what type of content you have.

    In the first example there are lots of images of a fixed width in containers of a fixed width so the only way to accommodate smaller devices is to set breakpoints with media queries and adjust the layout at each screen size. This of course means you need to cater for all device sizes (and landscape/portait orientation). The site works pretty well and looks good as it adjusts but you do get a different layout each time (which I find disconcerting as I'm a continual "window shuffler" and open and close the browser window to various degrees thousands of times a day and I'd rather see a scrollbar - but I'm the only one who thinks that way . It also means you have to design multiple versions of the page which is also a pain.

    The other sites you linked to are fluid/elastic sites with min and max widths which allow the page to shrink and grow within limits and means that they don't have to accommodate every specific device size but only need to change when the layout no longer works at a certain width (whatever that may be). This is the option I would prefer as to some extent you can forget about devices and what size they are as you create a layout that shrinks and grows and you only need to set the media query for the size when the layout needs to change (and not the device).

    Obviously some designs are more suited to fluid and some need to be fixed and some are elastic so there is no real "one size fits all" approach.

    If you are creating designs from scratch then I would go for fluid/elastic so that you cater for as many people as possible from the start and then you would only need to create different versions at the points where your layout no longer scales nicely. On some designs that may mean you need to do nothing (e.g. for a site of mainly text it could grow and shrink at will).

    What you do need to think about though is as you create your designs you keep saying "what if" at every stage. What if the menu doesn't fit all the way across on smaller screens? What if some browsers break a phrase into two lines and some only one. What if there's twice as much text content as shown in the design.... and so on.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Huh_Web View Post
    what resolutions should I work within, and is it better to make a design completely fluid, or to make it work within some specific resolutions?
    As Paul said, you have to decide that for yourself, but as a general rule, I'd look more at sites that are fluid by nature and are continually expanding and contracting. That doesn't mean that everything has to move all the time, though. You could have a fixed width sidebar while the content area expands and contracts. Generally on a really small screen, though, it's probably better to have a sidebar drop below the content, as it just becomes too tight a squeeze otherwise.

    The tough bit for graphic designers is to get away from the idea of a sheet of paper that they are designing for. Designing for a fluid medium like the web is a bit like painting on water. You have to be more flexible and openminded about the design, because it can be expanded and contracted in all sorts of ways. The end user can mess with your layout in all sorts of ways, like having their fonts set to a size bigger than you anticipated. Your design—to be fit for the web—needs to account for all these variables. This isn't as difficult as it sounds, though. The key is not to try to be so in control of the layout, and use design to enhance content rather than to constrain it.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    This is one of the type of questions that cannot bring about absolute answers because how a design is optimally presented depends on your content and how you structure that content. A well-designed site can be done in relative units (em/%) or pixels.

    Personally, I don't like using fixed metrics (px) for layout and fonts anymore, simply because I no longer subscribe to the idea that a design, as a whole, needs a fixed canvas, unlike in print.

    To address the examples you posted, I'd say that if you have a design with, say, five columns, then I'd say a 100% fluid layout is good for larger screen sizes but not so ideal for smaller ones, unless you use media-queries or min-widths, the latter being nearly impossible to make usable on narrow viewports, otherwise you'll end up with having one-word-per-line columns.

    For a one-column layout, I'd say that a 100% fluid design can also constitute a problem because the text lines will likely be too long unless you account for it aptly by making sure the width is narrow (not set to 100% but something more appropriate and apply min/max-widths).

    How many different resolutions and viewport sizes you support depends on whether your design is fluid, semi-fluid, elastic, fixed, or a combination of these and that decision will also determine how many media-queries you'd optimally be using to accomodate as many devices as possible.

    Some reading resources:

    http://www.w3.org/TR/css3-mediaqueries/
    http://coding.smashingmagazine.com/2...ve-web-design/
    http://css-tricks.com/css-media-queries/
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Huh_Web View Post
    So what resolutions should I work within, and is it better to make a design completely fluid, or to make it work within some specific resolutions?
    A completely fluid layout won't happen very often.

    In fact a completely static or flexible design won't happen very often either. (Yeah, I know, static shouldn't ! )

    What happens in real life is a responsive design (media queries help transition to and from bigger "resolutions", widths really) with a hybrid layout: fixed or relative values with any combinations of the fixed (px), fluid/liquid (%) and elastic (em) elements and with min and max constraints.

    One such design should take care of widths from 320px up to 1900px. We could discuss bigger or smaller widths, but it's not realistic.

    Another thing to consider separately are the higher pixel density devices, like you can see in foodsense.is:

    Code:
    /*	RETINA OVERRIDES 
    ----------------------------------------------- */
    
    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {

    All in all, we're not talking about 2, 3 or 5 "resolutions", we're talking how each individual design would go from mobile first: start from a base layout, and then take care of widths from 320px, and then properly handle the extra widths up the screen sizes. Which is the approach I employ.


    You could take a look at this responsive boilerplate that has taught me lots: http://stuffandnonsense.co.uk/projects/320andup/.

    It's based on H5RP and MH5BP, some more stuff to learn from: http://html5boilerplate.com/


    Others would do things differently. They'd start from a 960px or 1140px flexible design and then adjust up and down the (flagrantly different) screen sizes.


    But no matter the starting point, responsive design is the key. Flexible design (fluid layouts, ...) alone won't be able to properly handle big differences in screen sizes.

  6. #6
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    As a side note, dconstruct.org, which you say has "only two resolutions". It's not.

    - it's a hybrid layout, it mixes px and em
    - it has 3 breakpoints, that are not about px, are about em

  7. #7
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    From what I understand there are a couple of main break-out points.

    320px (iPhone landscape)
    480 px (iPhone portrait)
    600px (Android Tablets)
    768px (iPad + ~Galaxy Tabs) and 1024px

    As far as creating a responsive design I feel it's easier to use those breakout points and design a wire-frame. From this wire-frame create your overall design. Responsive Web Design is still in it's infancy, and as such, you're likely to see many adopting the wire-frame technique.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Breaking points are informative not mandatory. If your design is a flexible one, you don't have to "respect" each and all of them. You just have to id the points where the design breaks.

    In a normal responsive design, the bulk of the code is located in the base style. The breaking points styles combined should not be more then, largely, 25% of that base style.

    I'm not sure where you're getting at with wireframing... it's used regardless.


    And I'll also argue that RWD is well past infancy.

  9. #9
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @itmitică;

    I think you're completely correct!

    There are likely to be new trends in RWD, I am just getting my teach dirty now. I never used a wireframe prior, never had to, just got the design without coding this. Maybe this is why I am finding RWD much more different to the traditional way I did things.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  10. #10
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I'm still not sure where you're getting at seamlessly connecting wireframing with RWD...

    Wireframing is a mockup of a layout. You don't "code" a mockup, you're pretending, you're playing make believe layout. It exists since long before web design, and long before RWD.

    RWD, for the most part, is very traditional designing actually. The only other extra thing are the occasional media queries.

  11. #11
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    You code this mock-up and make it work as a wire-frame, without the detail. So basically you would code our all your DIV's without content, and from this make your containers/content holders responsive. If that makes sense.

    Then you'd fill the detail out. It's the only way you can properly do things when coding a wireframe. I tried everything and I wish I had build better building blocks.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sega View Post
    If that makes sense.
    Not really. Sorry.

    Personally, I prefer to start from the content in the design, even Lorem ipsum and similar pretend content stuff when there's not enough content. I also like to use HTML5 semantics, so it's not all divs.

    And we don't seem to understand the same thing with wireframing. For me, there's no code in wireframing. Wireframe = mockup.

  13. #13
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @itmitică;

    You draw our your DIV's, then you make them flexible, from here you make them responsive. Wireframe has no code traditionally, but with responsive web design I think you have to code your wireframe and make it responsive first, otherwise things would get tricky, as I am finding out.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  14. #14
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Everybody has its way, I guess. If it works for you... And I believe you mean to say basic layout.


    For me, RWD is mainly the same thing as before:

    - get content coded in page (semantic, preferably)

    - use the dedicated graphic design to apply the main/common/basic style to the page (75% or more from the total CSS code)

    - find breaking points/quirks/platform specifics in the design and address the issues with MQs (25% or less from the total CSS code)


    The one thing I'm not clear on, is how do you manage to make the design responsive without content. There a good chance that adding the content after would go against the content.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by itmitică View Post

    - find breaking points/quirks/platform specifics in the design and address the issues with MQs (25% or less from the total CSS code)
    Yes that's the approach I like as its not device specific and you only need to cater for the points where the design needs to change rather than worrying about what width the device is.

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes that's the approach I like as its not device specific and you only need to cater for the points where the design needs to change rather than worrying about what width the device is.
    Me too, Mobile first is an interesting concept but I find starting with a high res version first fine and is easier to manage.
    You just need to be a little creative with how to change things at lower res.

    Here's a short 7 minute video on some techniques that might be helpful to some.
    http://vimeo.com/32611202

    Paul, I know you're holding out on pre-compilers. You'll come around eventually

  17. #17
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for all the help! I really appreciate it.

    I have some thoughts and questions though on size/complexity of responsive sites.
    Most of the responsive sites I've seen are not overly complex, on the other hand there are pages like the Boston Globe

    Q1: If I want to make a page with a lot of products, and I want the owner of the site to be able to update it himself, would that be possible/recommended? I'm afraid that a big project like that would be a lot more expensive with RWD than with traditional design.

    Q2: I've read that if the site is browsed via a mobile phone, the phone will download a big picture and scale it down itself. This sounds like a huge waste of bandwidth/processor power. Is it possible to have an image in two or more sises so that the device can download the most appropriate one?

    I'm finding RWD very intriguing, but I worry a bit about how expensive it might get, especially with bigger sites, and also bandwidth on smaller devices.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Huh_Web View Post
    If I want to make a page with a lot of products, and I want the owner of the site to be able to update it himself, would that be possible/recommended?
    It depends on the tool the client is using, to some extent, but a good CMS will allow you to create content areas for a client to insert content into, and as long as you plan what they can upload and where, it should still work.

    Is it possible to have an image in two or more sises so that the device can download the most appropriate one?
    There are lots of people working on this very issue, and though there's no perfect solution yet, there are some pretty good ones:

    http://adaptive-images.com/
    http://filamentgroup.com/lab/respons..._image_sizing/
    http://css-tricks.com/which-responsi...hould-you-use/
    http://adactio.com/journal/4997/
    http://www.alistapart.com/articles/r...-what-we-need/

  19. #19
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Huh_Web View Post
    Q2: I've read that if the site is browsed via a mobile phone, the phone will download a big picture and scale it down itself. This sounds like a huge waste of bandwidth/processor power. Is it possible to have an image in two or more sises so that the device can download the most appropriate one?
    Not all websites would fall in this category, patrons of big size pictures. But there are valid cases where you use them.

    In those valid cases, if you really worry more about the client, than, no matter mobile or desktop, consider this scenario: you always use smaller size pictures (not necessarily the smallest possible, but small enough in size to qualify as slim and still be good looking), that you scale up if necessary. And this would be your low bandwidth version of the site.

    When the user explicitly asks for the high bandwidth version, selecting the visible "High Bandwidth Version" link on your site, you use the bigger size pictures, which, hopefully, are not also bigger in size but are better looking too, in comparison.


    Quote Originally Posted by Huh_Web View Post
    I'm finding RWD very intriguing, but I worry a bit about how expensive it might get, especially with bigger sites, and also bandwidth on smaller devices.
    It's not correct to call RWD expensive. Your content is the one that may be expensive, and that's the thing you'd want to work on: slimming down the content.

    RWD can't help you with heavy content issues, it's not its job, it's not its purpose, it's not a content related technology, so stop asking that from it.

    RWD can only help when it comes to layout. The D in RWD.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by markbrown4 View Post
    Paul, I know you're holding out on pre-compilers. You'll come around eventually
    I'm too thick to use that Don't even understand how to install it lol.

  21. #21
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    Quote Originally Posted by Paul O'B View Post
    I'm too thick to use that Don't even understand how to install it lol.
    Open up Terminal, enter "gem install compass" and you're done.
    It's packaged as an app for $10 too.
    http://compass.handlino.com/

    I cannot express how much I love compass / sass, give it a try, I'm sure you'd find it handy.

  22. #22
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Here's a short 7 minute video on some techniques that might be helpful to some.
    http://vimeo.com/32611202
    Pfeewww! I'm lucky I've not bumped into this when I was first prospecting SASS.

    Don't get me wrong, I use SASS instead of CSS for some time now. But boy, that's a wrong example!

    First off, he's using the old, indented syntax. The new SASS is more true to the CSS form, it uses the curly brackets.

    Then, the fact that it hides "760px" as "narrow" and "1000px" as "tablet" is... weird, to say the least.

    All in all, not something that would make Paul change his mind.

    Also, for Paul to open the terminal and install COMPASS, that would mean Ruby is already installed, and that, normally, SASS is already installed.

  23. #23
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by itmitică View Post
    Pfeewww! I'm lucky I've not bumped into this when I was first prospecting SASS.

    Don't get me wrong, I use SASS instead of CSS for some time now. But boy, that's a wrong example!

    First off, he's using the old, indented syntax. The new SASS is more true to the CSS form, it uses the curly brackets.
    There's a difference between sass and scss, http://sass-lang.com/
    Then, the fact that it hides "760px" as "narrow" and "1000px" as "tablet" is... weird, to say the least.

    All in all, not something that would make Paul change his mind.
    Just names and it's only an example, the names are only there for the author so it makes no difference.

    Also, for Paul to open the terminal and install COMPASS, that would mean Ruby is already installed, and that, normally, SASS is already installed.
    No, if he has Terminal then Ruby will already be installed, unless it's a really old machine.
    Code:
    gem install compass
    Fetching: sass-3.1.3.gem (100%)
    Fetching: compass-0.11.3.gem (100%)
    Successfully installed sass-3.1.3
    Successfully installed chunky_png-1.2.0
    Successfully installed fssm-0.2.7
    Successfully installed compass-0.11.3
    4 gems installed
    You really shouldn't try to one-up people with these posts, I found the video very helpful, if you don't that's fine too.

  24. #24
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Keeping up with the SASS techniques in the video, one would end up with a CSS code structure like this:
    Code:
    header {}
    [...]
    @media A {
      header {}
    }
    @media B {
      header {}
    }
    
    section[role="main"] {}
    [...]
    @media A {
      section[role="main"]{}
    }
    @media B {
      section[role="main"]{}
    }
    
    footer {}
    [...]
    @media A {
      footer {}
    }
    @media B {
      footer {}
    }
    He's trying, with the help of SASS, to explain/pass along others idea as to how it would make much more sense to keep media rules separate for every element involved, rather than grouping all media rules for a common expression into the appropriate separate file or section of the document.

    I strongly disagree. And involving SASS it doesn't make the idea a bit more attractive. In real life development, a more suited code structure is this:
    Code:
    header {}
    section[role="main"] {}
    footer {}
    
    @media A {
      header {}
      section[role="main"] {}
      footer {}
    }
    
    @media B {
      header {}
      section[role="main"] {}
      footer {}
    }

    If I was to try to convince established CSS developers to go for SASS, I'd point them out articles like this one:
    http://thesassway.com/intermediate/l...r-cleaner-code

    As far as SASS and mixins are concerned, this is what I believe to be a useful application in real life development:

    Code:
    @mixin border-radius($radius) {
      -moz-border-radius: $radius;
      -webkit-border-radius: $radius;
      -ms-border-radius: $radius;
      border-radius: $radius;
    }
    A "simplified border-radius mixin" that demonstrates how you can "use the new CSS3 border-radius attribute in a succinct way":

    Code:
    a.button {
      background: black;
      color: white;
      padding: 10px 20px;
      @include border-radius(5px);
    }
    A simple to grasp and powerful example showing what advantages SASS brings to the table:
    - keeping your main code simple, DRY, future proof
    - means to hide the ugliness of the non-standard

    It's also fair to mention that COMPASS it's not the only comprehensive library of SASS mixins:

    http://thoughtbot.com/bourbon/
    https://github.com/MatthieuA/Sass-Css3-Mixins
    https://github.com/v-sorokin/sass-mixin-library

    and a few more.

    To reiterate my SASS-first parallel with Ruby and its Rails framework, like with Rails, COMPASS is not the SASS's only way to exist.
    If one manages RWD without frameworks like 320andup, certainly one would manage to efficiently use SASS without COMPASS.

    I, for one, don't use COMPASS, and I'm managing perfectly fine SASS without it.

    Off Topic:


    Quote Originally Posted by markbrown4 View Post
    You really shouldn't try to one-up people with these posts
    "It's Not A Bug, It's A Feature!"

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ok thanks for the discussion guys on compass/sass it's been very informative but I think we can call that part of the discussion ended now and return to the responsive theme


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •