dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Responsive Design

  1. #1
    Join Date
    Dec 2013
    Posts
    2

    Post Responsive Design

    How to make a Responsive Design without Media Queries???? plz explain it

  2. #2
    Join Date
    Oct 2013
    Location
    3rd planet from the sun
    Posts
    177
    why would you want to make a responsive design without media queries?? Inquiring minds want to know?

  3. #3
    Join Date
    Dec 2013
    Posts
    63
    You can use javascript for detecting screen sizes and moving/resizing elements of your layout. But why should you make RWD without Media Queries? You are afraid that for example Media Queries will not work properly on some kinds of mobile devices? If Media Queries doesn't work Javascript will propably also not work. Besides JS is 'heavy-weight' for CPU.

  4. #4
    Join Date
    Dec 2013
    Posts
    1
    The best for designing a Responsive Design is Media queries. I purchased a website designed by Web Designers Miami. This works very well without any complications of loading the website in any of the window sizes.

  5. #5
    Join Date
    Dec 2013
    Posts
    63
    Different window sizes is only the one side of Responsive Design. There are another things that may cause the problems. All modern browsers on desktop work ok, they have support for almost all the most important and commonly used css features, but on mobile devices it doesn't look so good. Mobile browsers doen't support all features that are available for desktop browsers. I created a webiste with RWD and on dekstop it works very good (I tested it by resizing browser window) but I don't know if it works on mobile devices (due to css features not supported by all mobile browsers). I put a request in 'Website Reviews' for my website but i didn't received any feedback yet so I still don't know if it works.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,834
    My answer to the question in the OP is that there are ways you can build responsive sites without media queries. Eg.

    1. Be realistic on the range of screen widths you support. I.e. Screen widths below 320px need mobile specific web sites because they cannot usefully display the same content as larger displays. So there is little point in trying to support them on a general purpose site.

    2. Increasing the minimum width to, say, 480px will reduce the problems with content moving about. The need for sideways scrolling can be minimised by using a minimum column width for body text of 300px, so the whole column is displayable on a 320px screen.

    3. Using "position: absolute" allows you to mix fixed width columns (for vertical nav bars etc...) with variable width columns (for body text etc...).

    4. Using % widths for graphics allows them to re-size according to the width of the containing div, whilst retaining their aspect ratio.

    5. Consider paginating the web pages to suit a screen height of 768px, as this is a common size for laptops.

    6. If the pages are paginated as above, then Links to a page should be set to a point below the header. This has no effect on larger screens, which will display the header as usual. But on smaller displays the header will auto-scroll out of view to maximise the useable screen area.

    7. Any remaining problems of the layout collapsing at specific screen widths can be overcome with media-specific style sheets. The rule for these is to design the default screen for standard PC displays (minimum width somewhere between 640px and 800px according to content). Then use the "handheld" media setting for screen widths below this division.
    Last edited by jedaisoul; 01-14-2014 at 03:47 PM.

Thread Information

Users Browsing this Thread

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

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