In developing websites what tools to make your websites compatible in different devices? Depending on what screen resolution the website should be responsive and the layout should fit perfectly in any sizes and not using horizontal scroll to see the other side of your page, it's overlapping you know.... Can you guyz provided me some idea that will make my template responsive with less coding ofcouse?
Website Designs: Ways for Mobile and desktop compatibility
- Thread starter mjtappy
- Start date
Peter
Member
Don't set a fixed width of the page. Let the width of the page be relative to the size of the window (this is the default). If you want you can set a max width (CSS: max-width) to avoid the page from stretching too wide.
Don't specify font sizes in pixels. Use relative units like % or em.
Don't specify font sizes in pixels. Use relative units like % or em.
I can provide you a basic responsive template in html + css, but there is no responsive menu, I'm still working on it. You can look through the code and play around, it doesn't have less in it, but basics of responsive template.
You can download it from: igdesigner.co.uk/responsive.rar
You can download it from: igdesigner.co.uk/responsive.rar
SpasianNrD
New member
Another place where some good templates from is html5up.com. They provide a few sleek designs that can help develop a simple and sleek design.
Another thing I suggest is getting to know JS, using
This tests for different mobile browsers, and OS 's. For example in my site, I have:
So when I have the mobile view, i can hide certain elements easier with jQuery. Also jQuery is also another helpful resource when doing really complicated thing whilst keeping the coding short and simple.
If your still having problems you can look to the stackoverflow.com community, its probably the most helpful when running into coding problems.
Another thing I suggest is getting to know JS, using
Code:
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))This tests for different mobile browsers, and OS 's. For example in my site, I have:
Code:
if(!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))){
$("#hideM").css("display", "block");
}If your still having problems you can look to the stackoverflow.com community, its probably the most helpful when running into coding problems.
mjtappy said:
Yes, with bootstrap you can make responsive websites just by using css classes, everything is included and done for you, so what you need to do is only to build website using classes and maybe override bootstrap css if need.
SpasianNrD said:
jQuery is a library for JavaScript, it is quite hard to know and write on your own, but it is good like you have said it is very good and helpful.
eichenlaub
New member
mjtappy said:
Bootstrap is a great framework to start coding from, and if you're looking for even more of a head start, check out the responsive web templates based on boostrap at themeforest.com!
use meta viewport
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
and media query in css
eg.
or you can use % unit or use width:auto;
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
and media query in css
eg.
Code:
<style type='text/css'>
/* some class or id for wide screen here*/
#wrapper { width:900px; }
@media only screen and (max-width: 800px) {
/* some class or id for screen resolution below 800px here */
#wrapper { width:600px; }
}
@media only screen and (max-width: 400px) {
/* some class or id for screen resolution below 400px here */
#wrapper { width:320px; }
}
</style>or you can use % unit or use width:auto;
smalpierre
New member
what I do is design for small mobile devices first, then set breakpoints going up from there. So before a media query gets triggered, it looks good on mobile. Then I set media queries going up from there. Don't set anything in pixel or percent widths, use ems (or rem) as the units, and you're several steps ahead of the game. Only borders should be set in pixels for the most part.