Menu
I'm about to start designing my site that I coded in php. It's a rather complex site...
Obviously, I want to make it suitable for all browsers and devices.
Should I code the CSS using fixed pixels for normal computer dimensions and when I'm done with that make another stylesheet for other devices such as iphone and ipad?
Or should I attempt to make an adaptive site that works with all resolutions? In this case, should I look into CSS frameworks? Any recommendations?
881
Here's some tips for designing a web page that works on ALL screen sizes. I'll delve a bit into media queries and other things too.
I'm going to write up a basic example of a MAX width 900px page with columns that works on any site mobile/desktop.
default-style.css
img
{
max-width: 100%;
height: auto;
width: auto; /* ie8 */
border: none;
}
.content_wrap
{
width: 900px;
margin-left: auto;
margin-right: auto;
height: auto !important;
}
/* Columns */
#column-wrap
{
float: left;
width: 100%;
}
#column-left
{
width: 30%;
float: left;
}
#column-middle
{
width: 35%;
float: left;
}
#column-right
{
width: 35%;
float: left;
}
default-queries.css
/* Turn it into a liquid layout at our max-width of 900px */
@media screen and (max-width: 900px)
{
.content_wrap
{
width: 100%;
}
}
/* most smart phones */
/* This query will turn all 3 columns into 1 column at 540px */
@media screen and (max-width: 540px)
{
#column-wrap
{
position: relative;
clear: both;
}
#column-wrap div
{
margin-bottom: 10px;
float:none; clear: both;
}
#column-left
{
width: 100%;
}
#column-middle
{
width: 100%;
}
#column-right
{
width: 100%;
}
}
Now for the html :D
index.html
<!DOCTYPE html>
<html>
<head>
<link href="default-styles.css" rel="stylesheet" />
<link href="default-queries.css" rel="stylesheet" />
</head>
<body>
<div class="content_wrap">
<div id="column-wrap">
<div id="column-left">
<p>HELLO I"M LEFT COLUMN</p>
</div>
<div id="column-middle">
<p>HELLO IM MIDDLE</p>
</div>
<div id="column-right">
<p>RIGHT</p>
</div>
</div></div>
</body>
</html>
So this is a most primitive example of a responsive web site. Using the class content_wrapper at a fixed width of 900px (because the biggest image im using may be 900px). But when the screen is smaller than 900px, we switch from fixed to liquid via media query switching to a liquid width will allow our images to scale down, our text to wrap, and a whole bunch of other great things!
But, there's more to it than that. That's all we need to do if the page only has linear content, but most pages have different columns to make the most of large screen sizes. This is where media queries REALLY come in handy. If you study the columns, their sum takes up 100% of the content_wrap at all times. And they will scale down for a small website, but they will be really really tiny. This is why I make another media query for smaller screens and eliminate the multi-column layout. Simply clearing the floats and making each column have a width of 100%, will allow for a much more efficient mobile layout.
Anyway, really long answer but hopefully my views/opinions on how to properly design a website with CSS/HTML (php, ASP.net, MVC, etc, can all be thrown in there too) will get you started! Design with a wrapper, media queries, no upscaled images, and images that look good scaled down are really good practices IMO ;)
I like fixed width pages! They are more universal and prevent over-scaled images Media queries in CSS3 take care of responsiveness ;)
I usually DON'T do mobile-first designs, but that's just my personal preference. I see no advantage to one way over the other
As stated in another answer, for non-CSS3 browsers response.js works very well
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
