SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: responsive web

  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    responsive web

    Hello people,

    my name is Monica and i need some help with the media queries. i don't understand at all how this works.

    the website i need to create this is Monica Juravlea, web designer.

    i was thinking to create something for 800px,640 and 480px.

    what i don't understand is how you resize the window in order to see the changes that come up.

    i would be very greatful if you could help me.

    many thanks,

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

    Here's an old example I did that resizes to 4 window sizes. Just close the window smaller and as the window width reaches the required trigger point the page layout will change due to the media queries added to the css. You don't need to do anthing special to make it happen - just close the window smaller.

    However, that page isn't really built in the best way and if designing for mobile you should take the mobile first approach.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Resizing the window manually is one approach, but you can never quite get to the exact size you want to test for.

    One handy tool for testing is the "web developer toolbar" for firefox. one of the menu options it gives you is resizing the browser window to a specified size.... and you can add your own sizes to the menu.

    https://addons.mozilla.org/en-US/fir...web-developer/

    SOME of the functionality in the toolbar, like "document size" are broken in anything newer than FF 3.5.x, however the 'resize' menu still works just fine. Just go into "resize -> edit resize dimensions" and type in the ones you want to test for.... they'll appear on that same "resize" menu item from that point on.

    With the capabilities of most of the handhelds increasing at a blazing pace, I've been going three target sizes on media queries:

    Single column for <768px

    Dual column for 768... 1104px

    triple column (if there's enough content) at 1104..1232

    Always working in fluid/semi-fluid layouts.

    Your current page going through it I'm not seeing there's enough content there to even bother with two sizes, much less three -- though the hard to read script fonts and low color contrasts aren't helping matters a whole lot either -- no matter how 'pretty' they are.

    The nonsensical use of a H2 and wrapping div around the h1/h2 pairing not helping matters a whole lot either... nor the comment placements that could be (ok, ARE) tripping IE and FF rendering errors.

  4. #4
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello guys,

    thank you very much for your feedback. It is much appreciated.

    Best wishes


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
  •