CSS Beginner Questions
I am about to start developing my site which I have coded in php. This is a rather complex site ...
Obviously I want to make it suitable for all browsers and devices.
Do I have to css using fixed pixels for normal computer sizes, and when I'm done with that make a different stylesheet for other devices like iphone and ipad?
Or should I try to create a responsive site that works with all resolutions? In this case, should you take a look at CSS frames? Any recommendations?
source to share
As usual, it depends. If you think your site will be available on many devices, you probably want to take a look at responsive design: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/ and http: //www.alistapart. com / articles / responsive-web-design / for more details.
The recommended approach is to take a "mobile first" style approach, so it works well with small markup for mobile devices and then gradually improves on other devices with higher resolutions.
You might want to use frameworks or manual code - a bit of a personal choice.
If you have vastly different needs for different devices, you can create completely different mobile sites, similar to current BBC news, for example, although it is worth noting that many sites, including the BBC, are moving towards responsive methods, so this is the trend. which is increasingly accepted.
It's also worth thinking about which browsers your audience will be using. As you go back to older versions of IE, you will need to look at javascript methods like the answer.js library to enable media queries.
source to share
Here are some tips for designing a web page that works on all screen sizes. I teach a little bit on media queries and other things.
- On webpages I've done in the past, they usually have existing graphics (usually banners / headers, etc.). so I usually design the website using the maximum width , for example if the already set banner image is 900px wide, I'm going to make the page 900px wide, or rather the content wrapper will be 900px wide and the content will be 100% .
- Store everything in a global content wrapper . This is the easiest way to ensure that the page size remains 100% consistent.
- the amount constituting the shell should always be 100%. Fill in the wrapper, but it will never go beyond it. You can have many columns or sections, the size of which can be varied in any percentage up to the sum of 100. (eg col1 width = "33%", col2 width = "33%", col3 width = "34%" = 100%)
- Try to choose images that work for ALL screen sizes. There is no built-in way to share photos on mobile when working with responsive web design (there are javascript solutions), but choose an image that looks good when zoomed out.
- Avoid scaling the image up. This is why I try to keep the maximum page size the same size as the header image (if any). If there are no images on the page, 100% liquid layouts are very good too.
- If the content wrapper is fixed, turn it into a percentage with a media query: example below.
I'm going to write a basic example of a 900px wide MAX page with columns that works on any mobile or production site.
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 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 the most basic example of a responsive website. Using the content_wrapper class with a fixed width of 900px (because the most image usage might be 900px). But when the screen is less than 900px, we switch from fixed to liquid via media query . Switching to fluid width will allow our images to shrink, our text to wrap, and a whole bunch of other great stuff!
But this is not the case yet. 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 the larger 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 content. And they'll get smaller for a small site, but they'll be really tiny. This is why I am making a different media query for smaller screens and omitting the multi-column layout. Easily clean the floats and create each column to be 100% wide, dramatically improving mobile layout efficiency.
Really long answer anyway, but hopefully my views / opinions on how to properly design a website with CSS / HTML (php, ASP.net, MVC, etc. can be thrown in there too) get you started! Design with wrapper, media queries, no scaled images and images that look well scaled down are really good practices IMO;)
I love fixed width pages! They are more versatile and prevent overscaled images . Media queries in CSS3 take care of responsiveness;)
I usually DO NOT do mobile projects, but this is just my personal preference. I don't see any advantage for another way
As stated in another answer, for non-CSS3 browsers, response.js works very well
source to share
The two are not mutually distinctive.
Two approaches:
-
Several stylesheets, media queries determine which one to load.
-
Use liquid measurements (percentage) to keep the site fluid.
In reality, you often end up using a little of both.
There are many problems trying to do this, especially the older IE does not support media queries and does all the time.
Frames are good, but you might find them restrictive. There are a lot out there and they all basically do the same thing, so just tweak the Google Responsive CSS framework and see what you find.
I would also recommend looking into SASS at this point - I use it to automatically create an IE style sheet with a 960px wide version without media processes, creating another sheet with all the requests.
source to share
Has already been answered, I see, but I think what I have to say, matters ...
Most sites do both a desktop and a mobile site. Desktop sites are almost always fixed width with a maximum width of around 1000px. This is starting to change, but you'll see more responsive sites than in the past. Mobile sites need to be responsive because of all the insanely different resolutions across all different phone models. I recommend that the smallest width a mobile site should run at is around 320px, because most modern phones are at least that wide.
As far as mobile detection is concerned, have a look at PHP Mobile Detect , this is what I use and it works really well. You just throw in
<?PHP
if ($detect->isMobile()) {
header('Location: /path/to/mobile/site');
} else {
header('Location: /path/to/full/site');
}
?>
at the top of the first page. You should use a separate splash page that redirects to something like index2.htm so that users can choose to view the desktop if they want. This will save you tons of trouble trying to figure out how to set cookies ...
source to share