SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member Willomina's Avatar
    Join Date
    Jul 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive Design Dimensions

    Hi people!

    I have started to learn html&css and now this dilemma troubles me: em or %?

    My web is responsive but I'm not quite sure.
    Footer is ok when I maximize but body and header are strange. Hm.

    Are those dimensions ok or not?
    body {position:absolute;width:auto;max-width:100em;min-width:10em;height:50em;top:0.5em;margin:auto;left:0em;right:0em;}

    Pleas, give me direction. I'm trying to make simple web page for hairdresser.
    http://frizzaloon.byethost3.com/

    Sorry for bad English.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Willomina. Welcome to the forums.

    Hm, the page is way too wide for most screens (100em is too much). You basically have a fixed width layout here, apart from the footer, which is nicer, because it stretches/contracts to fit the window.

    Firstly, avoid using position: absolute for page layouts. it's deadly, really. Absolute elements don't flow nicely with ther parts of the page, making updates miserable.

    % is often better than em, though a combination of them works nicely.

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Every browser that I have come across lately has a built in zoom. Use what you feel most comfortable with. Nothing wrong with fixed pixel (px) and absolute positioning. I wouldn't be able to do this without them - www.unitingrhythms.com - change from mobile to standard mode in anything but IE. As most of it is done in CSS, it looks good zoomed in to a very large level, and maybe the colouring is not right, but for accessibilty there is nothing wrong with the size of the site, but it's all done with px and position:absolute.

    Relative elements don't flow nicely with ther parts of the page, making transitions miserable.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,421
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Markdidj View Post
    www.unitingrhythms.com - change from mobile to standard mode in anything but IE. As most of it is done in CSS, it looks good zoomed in to a very large level, and maybe the colouring is not right, but for accessibilty there is nothing wrong with the size of the site, but it's all done with px and position:absolute.
    I'm not sure quite what you're trying to demonstrate with that example, but if I reduce the size of my browser window (Firefox) I lose the right-hand side of the site. There is not even a horizontal scroll bar. Doesn't seem very accessible to me.

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just to clarify, you know there's absolutly no way to rectify this, or are you just being picky?

    Visit it in a decent browser, Firefox is worse than IE. FACT! (And I have loads that test it). That's why the transitions are left out. It's useless at rendering them!
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,421
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Markdidj View Post
    Just to clarify, you know there's absolutly no way to rectify this, or are you just being picky?
    I'm not just being picky. This is a thread about responsive design, so I expect the design to respond to different window sizes.

    Quote Originally Posted by Markdidj View Post
    Visit it in a decent browser, Firefox is worse than IE. FACT!
    Firefox seems to be the only browser now that will allow me to zoom text without zooming the whole page. For me, that's an important accessibility issue. So, as far as I'm concerned, it is a decent browser. Readable text is higher up my list of priorities than transitions.

    However, we're getting off-topic here and are in danger of hi-jacking the thread. Perhaps this would be best discussed in another thread.


  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    After reading the OP's question again I've realised I have a bit. Sorry Willomina and TechnoBear, just remember, don't fear fixed pixel designs, there's a lot more you can do with them than using em and %, and they can be made as equally accessible.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Willomina View Post
    My web is responsive but I'm not quite sure.
    It's not. It's not even proper relative layout.

    Your layout it's not even relative, you're using a relative measure: em, but the big fixed width on div#header and on a few other divs prevents your design to be elastic.

    Using % instead of em would qualify your layout to be called liquid. It would probably be better for your layout, since em is "fixer" then %.

    Your still-to-be-worked-on relative layout (em or %) would became responsive the moment you'd start using media queries to adapt the layout to smaller and bigger screen sizes.


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
  •