Responsive website layout

by 10 replies
12
how to make theme layout responsive, i can design good websites using html + css but give me the basic logic of making responsive
#website design #layout #responsive #website
  • Responsive simple means your site can adapt to a variety of mobile devices
    & desktops. I would definitely study the craft before diving in and doing it wrong.

    WILL
  • Anything responsive orientates resolution compatibility on different devices. If you have an existing theme and you would like to convert it into something responsive, I'd recommend reading up more on 'media queries'.

    This is a good site to conveniently test compatibility of your content:
    Testing responsive web design in various resolutions | ResponsiveTest
    • [ 1 ] Thanks
  • Hi Sohailglt,

    Check this article: Responsive Web Design just got Easier with the Responsive Grid System

    So easy to apply and it works perfectly..

    Also here you can check how your site works on all devices:

    http://ami.responsivedesign.is/#
    • [ 1 ] Thanks
  • Hang on, you say you're good with HTML & CSS but you don't know how to make something responsive?

    I'd advise you go learn some more CSS, study some pre-made responsive grid systems then implement that into your current theme..
  • Thanks all of you..
  • sohailglt, I'm far from an expert, but I believe the basic gist of making a site responsive is to use percentages rather than pixels. By using percentages, the site responds to the screen resolution of the viewing device, allowing the entire screen area to become visible, rather than adhering to set pixels, which will often lead to having to use a horizontal scrollbar.

    Assuming you're on a desktop or a laptop, try this:

    Lower the size of the browser window you're viewing this page in right now.

    Once you lower the width to the point that it takes up less than 1000 pixels, a horizontal scrollbar will show up on the bottom of the page.

    This is because Warrior Forum (vBulletin forum software) isn't responsive. The page width is set to 1000 pixels, and if your viewing width is less than 1000 pixels, you'll need the horizontal scrollbar to view the entire screen area.

    If the site was responsive, the screen area, and the elements therein, would increase/decrease with the browser window, allowing you to view the entire screen area. To see what I mean, go to Starbucks' website and do the same thing, just play with the browser window size, and watch how the site responds by readjusting.

    To convert pixels to percentages you just have to do some basic math. A div with a width of 600 pixels placed within a container with a width of 1200 pixels would be set to 50%. If the div's width was 300 pixels, the percentage would be 25%.

    Apparently, there's a method to have Dreamweaver do all the math and conversions for you, as explained in the video below:

    https://www.youtube.com/watch?v=TcaOCQdlR1I
    • [ 1 ] Thanks
  • The Twitter Bootstrap is indeed great*. But the downside is that sites look a bit samey and (dare I say) boring.

    Remember not all niches really need responsive sites either.

    *Actually my friend has made an incredible site out of the Bootstrap. I was seriously wowed. But then he is a genius. Sorry I can't share the URL because his niche is smoking hot right now.
    • [ 1 ] Thanks
    • [1] reply
    • A MOST BASIC explanation... you are creating different widths with CSS, so when the browser width narrows to a smaller size in pixels, the layout switches via css code. Look up "CSS Media Queries".

      Heres an example of the code:
      Code:
      @media only screen and (max-device-width: 480px) {

.content, .sidebar {float:none !Important} 
/* remove floats so content comes first, then the sidebar */

	}
      When I want something quick, simple and responsive, I'll set that max width at say 800 or 900 pixels, so every device smaller than a computer screen will 'snap' to my new layout.

      Theres a tool for firefox called Responsive Design View, that will allow you to see your layout in all different shapes and sizes. Normally, I just drag my screen smaller to test quickly, but when its time to really test, i use the firefox plugin.

      Hope this helps!
      • [ 1 ] Thanks
  • Thank you all of you for giving me such kind of information and i'll try all the techniques which are people have mentioned in your posts.
  • [DELETED]
Join the discussion

Next Topics on Trending Feed