Skip navigation
vennom11
Currently Being Moderated

How to make a webpage responsive?

Sep 12, 2013 5:26 AM

Tags: #web_design #responsive_web

I am a newbie in web design. I know basic html and css. Want to learn about responsiveness.

How to make a webpage responsive?

What technology I should use beside HTML and CSS?

 

I hope it will be simple easy and interesting to work with responsiveness.

 

Thanks in advance

 
Replies
  • Currently Being Moderated
    Sep 12, 2013 5:49 AM   in reply to vennom11

    You only need HTML & CSS.

     

    Here is, in it's most basic form, what you need to do:

     

    • Make the site fluid by setting widths as %s. For fixed sizes use min-width and min-height
    • Use media queries. These are small sections of CSS which are only displayed depending on the query's paramaters. A responsive media query needs to have site width and height paremeters
    • You need to put a viewport tag in the head of all of your responsive pages.

     

    Other than that, just be creative. Think about what is and isn't needed for mobile, tablet, and desktop and hide/show elements.

     

    Finding the code for the above should be easy but here's more info: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutor ials/

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2013 1:42 PM   in reply to vennom11

    If you use Dreamweaver CS6 or CC, look at the FluidGrid Layouts feature for creating Responsive Web Designs.

     

    Working Example - Resize your browser viewport to see it work.

    http://alt-web.com/FluidGrid/Fluid2.html

     

    If you don't have CS6 or CC, there are a number of Responsive Frameworks you can use to jump start your projects.

     

    Project Seven's Page Packs (Commercial CSS Layouts for DW)

    http://www.projectseven.com/products/templates/index.htm


    Foundation Zurb

    http://foundation.zurb.com/templates.php

     

    Skeleton Boilerplate

    http://www.getskeleton.com/

     

    Initializr (HTML5 Boilerplate, Responsive or Bootstrap)

    http://www.initializr.com/

     

    DMX Zone's Bootstrap extension for DW

    http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 16, 2013 6:15 PM   in reply to vennom11

    i think reponsive is old news ,my take is you need mobile design stand alone.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2013 10:19 AM   in reply to spudsmurphy13

    That's what mobile apps are .

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 19, 2013 6:21 PM   in reply to Nancy O.

    so if i surf do i need an app to experience a cool web site on my iphone , can you explain or give me a link.

     

     

    just like to know

     

    cheers

    spuds

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 20, 2013 8:29 AM   in reply to spudsmurphy13

    spudsmurphy13 wrote:

    i think reponsive is old news ,my take is you need mobile design stand alone.

     

    You have that the wrong way around - creating a stand-alone mobile website is the old method and using responsive design is a little more beneficial these days. The main reason being if you create a mobile only website and a desktop version, you end up managing 2 versions of the same site. Responsive/Adaptive allows you to create 1 website and adjust the content to fit any screen. You can find any number of articles around the web about doing this using media queries and the viewport meta tag.

     

    If on the other hand, you were creating a mobile experience, or app, separate from your website, then yes, you would create this as a stand-alone product.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 21, 2013 9:24 AM   in reply to Rik Ramsay

    Yes Rik on the surface, the idea of one website for all screen resolutions would seem to be the way to go, however it’s not good enough for most websites, responsive web design isn’t intended to serve as a replacement for mobile web sites with the main purpose of selling branding a product or service.

     

    To understand why you need to create a separate experience for your mobile user, you first need to understand that mobile is not just a smaller screen resolution; mobile is a behavior. Think about it for a second: people do not use their smart-phones the same way they use a laptop, desktop, or tablet. The size of their screen is not the only thing that defines them. They are usually on-the-go or distracted by another form of media (sitting in front of the TV). They may be impatient or looking for specific pages, and if your site does not load within 3 seconds 60% of them will simply leave and never come back”

     

    Responsive design is great, and if you’re planning a website redesign you should certainly consider it. However, if your main goal is mobile optimization, then responsive is simply not enough. Unless your website is just a blog or an online publication, you really should create a separate mobile website. Ultimately, you should ask yourself if the behavior of your mobile users will be different than those of your desktop users. If you know it will not, as is the case with blogs and online newspapers, then responsive may be your Holy Grail after all. For the rest of us, a separate mobile website is the best option.” ( Tim Macchi )

    Regards

    Spuds

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 21, 2013 1:41 PM   in reply to spudsmurphy13

    I agree that mobile is about a lot more than just screen size.  The way people interact with Touch screens is way different than the way they interact with desktops. For example, navigation needs to be bigger and closer to the bottom left and right sides of the screen (where people's thumbs are).  Forms need to be optimized for a better mobile experience. All these things can be done with properly defined media queries.  You don't need a separate site to appeal to mobile web users.

     

    Incidentally, fast loading pages are critical to all web sites, not just mobile. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 23, 2013 6:40 PM   in reply to Nancy O.

    Agreed:

    In a nut shell if you need to reach people on the go , design mobile!

    Thanks for all the feed back.

    spuds

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 24, 2013 3:20 PM   in reply to spudsmurphy13

    I would say, design with Mobile in mind.  But not exclusively.   There's still a ton of people who use tablets, laptops, desktops and TV screens to surf the web.  It's not a closed system, you know?

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 25, 2013 6:02 PM   in reply to Nancy O.

    Now you are talking. Responsive  TV (4k is the new big thing in display tech, and it's coming to a big screen living room TV near you). I Guess you are right as not to design exclusively for mobile what was i thinking ? TV . forget all the past preaching think TV. HO I HEAR YOU SAY, good debate mind you, thank you very much. for hitting (was this helpful) glad i could help.

    kindest regards

    build  mobile first and foremost!

    spuds

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 7, 2013 2:43 PM   in reply to vennom11

    hello pal, the best way is establish in css diferent  codes for different resolutions the most commos is three diferent conditionals one for big screen, one for medium and one for small resolution, in this way you can control styles for each or the most screen sizes, any question dont doubt in reply, greetings

    Jorge Forero

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 30, 2013 4:13 AM   in reply to vennom11

    You may use any reponsive web design tool. These tools are freely available over internet, with the help of which you can get a responsive website easily. For your reference you may browse few tools here http://blog.pixelcrayons.com/web-design/10-responsive-web-design-tools -to-speed-up-the-workflow/

     

    Responsive web design services by PixelCrayons

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 8:33 AM   in reply to pixelcrayons

    The best method for learning about how to create responsive designs is to get to the CSS information that can allow a responsive design to happen. This  is the @media rule in CSS, which tells the browser to detect the browser width of the device and can serve up different CSS rules based on the screen size. There is also a meta tag that may need to be added depending upon the browser for this to work.

     

    The @media rule in CSS is one that every website will be using if they are not already so it is at the center of a responsive design. You can work with this within Dreamweaver CS6 and CC versions easily in the CSS Designer panel, but it is important to understand the concept. Different browsers may need the <meta> tag for the viewport added also, learn more about that tag at http://www.quirksmode.org/mobile/metaviewport/.

     

    Learn the basics about media queries at http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 1, 2013 8:33 AM   in reply to Candyce Mairs
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points