12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Responsive website layout

by sohailglt
10 replies
  • WEB DESIGN
    • |
how to make theme layout responsive, i can design good websites using html + css but give me the basic logic of making responsive
#layout #responsive #website
  • Profile picture of the author WebdevelopmentGroup
    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
    Signature
    WebDevelopmentGroup NYC & CA- Small Business Web Development, App Development, WordPress Development, Graphic Designs, Online Marketing, Local Marketing & more!. "Call us 1.800.219.1314 or message us!". Visit us today! "Now On Live Chat Mon-Fri.". www.WebDevelopmentGroup.org
    (Whitelable our Services)
    ===================================
    ==> #1 OFFLINE MARKETING FORUM ON THE WEB! <==
    www.OFFLINEMARKETINGFORUM.com     (Register Now)
    {{ DiscussionBoard.errors[8700829].message }}
  • Profile picture of the author Riggs
    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
    Signature

    Website: https://jacobriggs.io

    {{ DiscussionBoard.errors[8700854].message }}
  • Profile picture of the author Ziga Solution
    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/#
    {{ DiscussionBoard.errors[8703224].message }}
  • Profile picture of the author Joe Crosbie
    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..
    Signature
    I chose entrepreneurship over further education despite being laughed at by my friends and family..

    I recently hit the "RESTART" button on my life, read my personal blog to find out how I did it :)
    {{ DiscussionBoard.errors[8703840].message }}
  • Profile picture of the author sohailglt
    Thanks all of you..
    Signature
    Dominos Near Me | Translate Plus API
    {{ DiscussionBoard.errors[8707297].message }}
  • Profile picture of the author ConfusedJ
    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
    {{ DiscussionBoard.errors[8708046].message }}
  • Profile picture of the author brettb
    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.
    Signature
    ÖŽ FindABlog: Find blogs to comment on, guest posting opportunities and more ÖŽ
    {{ DiscussionBoard.errors[8714500].message }}
    • Profile picture of the author Trisha
      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!
      {{ DiscussionBoard.errors[8714963].message }}
  • Profile picture of the author sohailglt
    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.
    Signature
    Dominos Near Me | Translate Plus API
    {{ DiscussionBoard.errors[8722132].message }}

Trending Topics