www.webdeveloper.com
Results 1 to 15 of 15

Thread: Responsive Design !!

  1. #1
    Join Date
    Mar 2012
    Posts
    63

    Responsive Design !!

    Hi All,

    I read about "Responsive Design", its making me confused.

    Responsive design can be do it there ways?

    1. using only Media Queries
    2. Open source frameworks like (Bootstrap,foundation,responsive.js) etc

    can we do responsive without " Media Queries " , so the design (page) - good in All devices ?

    Any of the following can be used to make responsive ? or we need to include both open source framework and media queries ?

    If do responsive, whats on font and images ( on dynamic pages)

    Looking for your help

    Thanks

  2. #2
    Join Date
    Dec 2013
    Posts
    11
    Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience.

  3. #3
    Join Date
    Mar 2012
    Posts
    63
    Quote Originally Posted by Imran60 View Post
    Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience.
    Hi Imran,

    Thanks for your reply, among 175 visitors on this post, you only replied, thanks.

    But my question is different, i know the result of responsive,.

    i am asking about how to make responsive and make sure it will work on All devices ?

    without media queries and open source frameworks like bootstrap and foundation is possible?

    Thanks

  4. #4
    Join Date
    Oct 2013
    Posts
    465
    Look up "mobile first design". Basically it's designing for small screens, i.e. smartphones, but the design also looks good enough on larger screens -- tablets, laptops/notebooks, desktops.

  5. #5
    Join Date
    Mar 2012
    Posts
    63
    Quote Originally Posted by Kevin2 View Post
    Look up "mobile first design". Basically it's designing for small screens, i.e. smartphones, but the design also looks good enough on larger screens -- tablets, laptops/notebooks, desktops.

    Hi Kevin,

    Thanks for your reply.

    " mobile first design " is the website? or you mention about to do "css for mobile" first.

    can you clairify more. For a reponsive design on All resolustions ( including mobile, tablets, ipad etc)

    can we use only % of sizes in css , css3 and html5 enough? and without use of any media queries or framework

    if my question is confused, please let me know

    Thanks

  6. #6
    Join Date
    Oct 2013
    Posts
    465
    Google "mobile first design"

  7. #7
    Join Date
    Mar 2011
    Posts
    1,137
    There really isn't a one-size-fits-all answer to your question. For all practical purposes, media queries will handle the vast majority of responsive design layouts and they are the standard for responsive design as a part of CSS. Browser support is nearly universal now. As usual, it's just the very oldest versions of Internet Explorer (6, 7, and 8) that are problems. But you really don't need to worry about them since you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones (or use conditional comments to serve them customized stylesheets).

    When it comes to layout, JavaScript is generally only required for more elaborate special effects and situations where the user interacts directly with the webpage, rather than for handling device-dependent issues.

    Mostly, you're going to need to simply learn the basics of contemporary web design in order to really understand this issue. I think you might just be getting a bit ahead of yourself and getting overwhelmed by the jargon that seems to lead in different directions.
    Rick Trethewey
    Rainbo Design

  8. #8
    Join Date
    Mar 2012
    Posts
    63
    Quote Originally Posted by rtrethewey View Post
    There really isn't a one-size-fits-all answer to your question. For all practical purposes, media queries will handle the vast majority of responsive design layouts and they are the standard for responsive design as a part of CSS. Browser support is nearly universal now. As usual, it's just the very oldest versions of Internet Explorer (6, 7, and 8) that are problems. But you really don't need to worry about them since you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones (or use conditional comments to serve them customized stylesheets).

    When it comes to layout, JavaScript is generally only required for more elaborate special effects and situations where the user interacts directly with the webpage, rather than for handling device-dependent issues.

    Mostly, you're going to need to simply learn the basics of contemporary web design in order to really understand this issue. I think you might just be getting a bit ahead of yourself and getting overwhelmed by the jargon that seems to lead in different directions.

    Hi rtrethewey,

    Thanks for your reply,

    i dont care about on IE ,

    As you said,

    "you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones"

    so we need to code media queries for each tablets and smartphones,

    for reference,

    http://www.browserstack.com/responsive

    They have multiple devices, so we need to do media queries for each width and height of devices?

    Please clarify me

    Thanks

  9. #9
    Join Date
    Mar 2011
    Posts
    1,137
    You don't need separate settings for each width and height. You can have your default styles for desktops and laptops, then add a media query for smartphones (320px width). And if you think it's best, you can have another media query for tablets with a lower resolution than most desktops.

    The key point is designing the page with a flexible layout so that you can adjust to different screen sizes without losing any functionality (or, hopefully, without losing visual appeal). My advice is to experiment with some simple pages to learn the basics of responsive design before you try to make a real website. Once you get some experience with how everything works, it will be much easier to create a page you'll like.
    Rick Trethewey
    Rainbo Design

  10. #10
    Join Date
    Mar 2012
    Posts
    63
    @ Rick Trethewey , Thanks

    i start by today and will let you know the results , Thanks

  11. #11
    Join Date
    Dec 2013
    Posts
    63
    masterwin, there is cool website http://quirktools.com/screenfly/ for testing your website on different resolutions. There are some popular devices to choose, you can also set screen size manually.

    Are media queries necessary for RWD? If you have website with very simple layout it's possible to make your page "responsive" without using media queries. If you use floats, if you won't use big static value for widths (like standard 960px, 1008px and so on), if you carefully set fonts sizes (with proper %) you will manage to create responsive website without using media queries but having all functionality and visual appeal. But it will work only for simple layouts. If you have more complicated website, with many different navigations, sidebars, widgets, and so on, than media queries will be very usefull, because you will need a tool for getting the size of the screen used by user for browsing your website.

    But screen resolution in only one side of Responsive Web Design. There is also problem with support for css3, html5 and other techniques in mobile browsers. Not all features are supported in all browsers. There are same websites where you can check what features are supported by the most popular browsers. I use http://caniuse.com/. There are compatibility tables for support of HTML5, CSS3, JS, SVG and other stuff in desktop and mobile browsers.

  12. #12
    Join Date
    Mar 2012
    Posts
    1,390
    Just to add to rtetheway's comments:

    1. It is not feasible, or necessary, to support ALL devices capable of accessing the web. The minimum screen width you really need to consider is 320px, and even that is becoming less important. Choosing a minimum width of, say, 480px makes it far easier to build a site that will look good on the vast majority of displays.

    2. Using % widths is often not the best solution. I use:
    a) Absolute positioning to mix fixed width columns for side menus with variable width columns for body text etc.
    b) Media specific style sheets (not media queries) to provide stepped size adjustments for graphical images.

  13. #13
    Join Date
    Mar 2012
    Posts
    63
    Hi rtetheway & jedaisoul

    i tried responsive, but got alignment issues on the devices

    can you check the link below and ghttp://72.29.85.214/~smartweb/ComingSoon/landing.html


    Thanks

  14. #14
    Join Date
    Dec 2013
    Posts
    63
    masterwin, I've checked your link. There are 'alignment issues' also on desktop (when resizing browser window).

    But I have some comments about your code. This is your html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>Coming Soon</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    
    <body>
    <div class="container" align="center">
      <div class="logo" align="center"><img src="images/logo_top.png"></div>
      <!--<div class="slogan">Bigger. Better. Stronger.</div> -->
      <div class="soon">
         <img src="images/dot.png" class="dotLeft">
         <p>COMING SOON<img src="images/dot.png" class="dotRight"></p>
      </div>
     <!-- <div class="congrats">
           <p>Congrats to our November winner <font color="#A60C5A">Amelie Brown</font>. 
           She won <font color="#A60C5A">$10000!</font></p>
      </div> -->
      <div class="mail">demo123@yoursitename.com<img src="images/separator.png"></div>
      <div class="mailInput">
          <input type="text" name="text" placeholder="Enter your e-mail to subscribe"><img src="images/submit.png" style="max-width:100%">
      </div>
      <div class="footer"><font color="#FFFFFF">&copy; 2013</font> <font color="#cc0066">Company Name</font></div>
    </div>
    </body>
    </html>
    XHTML? Transitional? Why? I don't want to make a flame but why don't you use html5 or at least html4 (strict, not transitional)?

    You have 'css/style.css' so why do you use 'presentation elements' in your html? Don't use 'align="...", 'color="..." etc. HTML represents the 'structure' of your website, css is responsible for 'presentation'. They should be separated. Text alignment, font color should be placed in css.

    You have a couple of 'img' elements. They play 'presentation' role in your website. They also should be placed in css as a 'background-image'.

    You don't need 'container div' because its css attributes can be applied to 'body' tag.

    There are some tricks for making div centered. For example you can change
    Code:
    <div class="footer"><font color="#FFFFFF">&copy; 2013</font> <font color="#cc0066">Company Name</font></div>
    into
    Code:
    <div class="footer">&copy; 2013 <span class=company">Company Name</span></div>
    and
    Code:
    .footer {
      color: #ffffff;
      display: table;
      margin: 0 auto;
    }
    .footer span {
      color: #cc0066;
    }
    It's simpler, centered, and css is separated from html.

    You have quite simple website. One element below the other. You have to play with font sizes and 'centering' elements horizontally (but not 'align="center"'!) and it will look nce and responsive. Try to not use xhtml, html is 'better' for 'standarised/patternised' coding.

  15. #15
    Join Date
    Mar 2012
    Posts
    63
    Hi blasphemy,

    Thanks for your review and suggestions, i will apply today get back to you

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles