SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Current responsive best practise?

    I've built a few XHTML and CSS sites and dabbled with a bit of PHP and Javascript in the past.

    Recently I've been looking at HTML5 and think it would be a good time to study responsive layouts too.

    What's the best current way to tackle responsive layouts?

    I've got some info that uses width and pixel count, but with all the new mobile devices sporting very high displays I think this info is way out of date.

    Phil

  2. #2
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Decimal percentage is the best way to calculate responsive design's dimensions. A good explanation you can find here :
    Code:
    http://nimbupani.com/using-decimal-percentage-values-in-responsive-design.html

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    38
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Setting sizes to stiff is definitely bad idea.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about selecting the correcting css file for the device?

    I've found instructions for a css media query

    Code:
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="layoutSmall.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="layoutMedium.css" />
    But I'm wondering if this is best practice because of the high resolution mobile displays, or am I getting mixed up with pixels and the resolution of the device?

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks people, I did a bit more researching and followed some video tutorials and came up with this test page.

    First test page, single column with menu

    After that I was able to piece together something closer to what I was hoping for

    Second test page, a 2 column layout which adapts to a single column on small screens

    The second page uses responsive %s for it's padding.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After working on the responsive layouts, I'm now looking at responsive menus.

    Any ideas about tackling menus for the smart phone sizes. I'm thinking along the lines as a form or pop up menu.

    Links to sample code would be good guys.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To help clarify my question, I've been looking for the best way to display a menu across desktop, tablet and smart phone.

    http://tynesidegraphics.co.uk/responsive/menutest/


    This is looking ok on desktop and tablet but the menu looks too big on a smart phone, so I'm wondering what the other options are.

    Any ideas?

  8. #8
    SitePoint Member
    Join Date
    Jan 2006
    Location
    Los Angeles
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I design my layouts at an average resolution with an idea of how they'll look when shrunk and enlarged. Then I'll code it completely elastic/fluid with the heights/sizes/spacing of the smallest version. Then I add media queries and go from small to large resolutions.

    Just the process that makes the most sense to me and has produced the best results from personal experience.

    Hope this helps.

  9. #9
    Non-Member
    Join Date
    May 2014
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bootstrap is the best practice for responsive website.

    you just add meta viewport name and content inside the header section of html.

    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">


    And then add media query for screen resolution.

    @media only screen and (max-width: 320px) { /*css style coding*/ }


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
  •