How to make a Responsive Design without Media Queries???? plz explain it
why would you want to make a responsive design without media queries?? Inquiring minds want to know?
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.
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.
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)