I'm trying to find out if it will be a better use of my time (now and in the long-run) to make a separate style sheet for my mobile site (which will look drastically different, but use the same database information and elements), or , make a whole new mobile page and steal what I need from my desktop site.
Does anyone have an advise or know what most developers practice when it comes to mobile sites?
you can use media queries.
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="handheld" href="mobile.css" type="text/css" />
Or in css3
http://www.w3.org/TR/css3-mediaqueries/
A lot of sites these days are concentrating on mobile first, then porting to a full web app for desktops. More and more peyote are using their mobiles to browse the web and a site designed for mobile will generally support desktops better than a desktop site will support mobile browsers.
I read about device.is at HTML5 rocks here: http://www.html5rocks.com/en/mobile/cross-device/
There's a lot of controversy in that. I personally prefer media queries. and it they aren't TOO complex, I put them right in my css file using #media FOO and ( max-size: ### ) { /*stuff*/ }
A "mobile website" usually like m.domain.com, is usually a very stripped down version. containing some products, info, and a way to contact.
Why would you hide the rest of your valuable site info just because someone is on a smaller device? the load time can be a bit longer since there is more content, just make sure you super important stuff is above the fold. (or at least higher up in the draw order)
You can also very easily include click to call and click for map buttons that appear at a certain size using media queries.
Related
I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).
Is there a way to use media queries to load only the required stylesheet?
I have tried:
#import url(mobile.css) (max-width:599px);
#import url(tablet.css) (min-width:600px);
#import url(desktop.css) (min-width:1200px);
and
<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' />
<!-- and again for tablet and desktop -->
but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.
Is it possible to load only the wanted resource using media queries?
I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.
Edit
Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! How do I download ONLY the stylesheet I want based on media query?
If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css
Try doing it within the HTML, for example:
<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />
source
I can't see why this would not work with a (min-width: 1200px)` (for instance).
Normally though css for small screens would be very small, with the small screen using most of the styling in the desktop version, with a few elements hidden and some resized.
I am reading the amazing book of Scott Jehl "Responsible Responsive Design". He writes about CSS Delivering methods and requests from a server. I would like to know if all browsers support the following feature(in the example), in order to load only the necessary media query for a specific device without requesting all the other media-query files.
html example:
<head>
<link href="shared.css">
<link href="screen480.css" media="(min-width: 480px)">
<link href="screen980.css" media="(min-width: 980px)">
<link href="screen1200.css" media="(min-width: 1200px)">
</head>
Most all major browsers will load all of the css files regardless of media query.
If you are looking to dynamically load css files based on media queries, check out Scott's eCSSential.
However, be warned: often times trading network round trips for lower file size is not a good decision. Here is a great article that discusses the limitations of solutions like eCSSential: Debunking Responsive CSS Performance Myths
I am trying to make this site more responsive and have started by making all the attributes in responsive terms such as % and ems, but for some reason it isn't as responsive as I would like. I decided to use media queries to make up for the design flaws.
I've been reading Responsive Web Design by Ethan Marcotte and it helps a lot with most of the design, but the media queries don't seem to be working for my iPad or iPod (aka I'm doing something wrong).
Can anyone readily identify what it is that I'm doing wrong?
http://thelglymovement.com/
I would have to see your code to be completely sure, but from what I can see when I pull up your website, the stylesheet imports below are not actually finding the files from your project folder:
<link rel="stylesheet" href="styles/base.css"/>
<link rel="stylesheet" href="styles/skeleton.css"/>
<link rel="stylesheet" href="styles/layout.css"/>
the only file that seems to be loaded is
<link rel="stylesheet" href="styles/index.css" />
and it does not include any media queries.
When I resize the website in Google Chrome I am not seeing any responsive changes which makes sense because 3 of your style sheets aren't present.
If it seems to be working in your desktop browsers, but the media queries aren't working on mobile I would might take a guess you don't have the viewport meta tag. i.e. <meta name="viewport" content="width=device-width, initial-scale=1">
This makes sure that the mobile devices don't try to scale your webpage down to fit their device size, instead allowing you to determine widths in your CSS (and media queries). This MDN article on the viewport meta tag might be useful for more info.
What should i do so that my website fits properly for different screens.. for example 32" 24" 17" monitors as well as for mobile device(netbooks etc.) with 9" - 11" screens and mobile phones that have anywhere between 2.5" - 5" screen?
How should i design the layout of my homepage/template etc. What should i keep in mind... what would i require for this css, javascript or server languages to read the type of device?
Any other recommendations you'd like to suggest to make the site accessible and usable for various types of devices.
Thanks in advance for all your help.
there no need to write js you can did it simply with CSS. In meta we define that the website adjust according the viewport of the device & also if you want to change in design then write different css for the things which you want to change for example:
for mobile device
<meta name="viewport" content = "user-scalable=no, width=device-width" />'
<link rel="stylesheet" media="all" href="stylesheet/iphone.css" type="text/css" />;
for window resize
<link rel="stylesheet" media="all (min-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;
<link rel="stylesheet" media="all (max-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;
For more information must saw these link's http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
Nothing personal sandeep, but most of the answers to mobile web design questions here are only targeting iPhone or Android. Mobile internet is not just iPhone or Android. There are many devices (in fact more than iPhone and Android put together) that doesn't understand view-port or media queries and active on the mobile internet
If you want to be accessible as many devices as possible.
design light weight pages
do not use horizontal layouts. such as 2-3 boxes next to each other.
make everything vertical so they would fit on small screens
do not use heavy java-script, avoid it as much as possible
do not use too many graphics
avoid using min-width and/or max-witdh in your css
I am updating a website to add some mobile friendly pages.
At the moment we have one big css page with everything in. My idea is to put all the mobile specific css into a separate file and then link both sheets. The mobile css will overide anything in the default css (bigger buttons etc).
Im quite new to css, what is the best practice?
One large CSS file leads to fewer HTTP requests, which can improve performance.
Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.
I have a few stylesheets for any significant app I've worked on.
base.css - always applied.
print.css - this hides menus and other parts of the screen not really good for a printed page. Triggered by the media attribute.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css - applied second, and if and only if it's IE6. I hope to throw this out someday.
<clientname>.css - one stylesheet for each client that wants the site to have their logo/etc.
If I were trying for blazing fast performance, I'd combine them. However, I know sites getting hundreds of millions of hits a day don't bother, so I'd strongly recommend splitting them however makes sense to you, in order to make it easier to maintain.
For the most part, extra hardware is cheaper than extra developer hours and/or more bugs. Maintainability is usually the highest goal for me.
yes you should use more than one css file rather using one big file.
It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.
For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
In the case of styles for specific clients, I would say that it is a best practice to separate them.
Using separate stylesheets for different media is easily done.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
In this case, all the style will be downloaded and applied when the media type matches the device.
However there is another method which is neat if your app is designed for mobiles, because it downloads the stylesheet ONLY if the media type matches.
<style type="text/css" media="screen">
#import "screen.css"; /* Note that some (older?) browsers don't support #import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
#import "mobile.css";
</style>
<style type="text/css" media="print">
#import "print.css";
</style>
I'd use two as well. Keeps things more tidy when editing for each device (computer and mobile device). I have one huge CSS stylesheet which I use for all browsers with the help of the css browser selector script, and I hate having to scroll through 6000+ lines of CSS, so I'd say the best way at least from experience is to separate them out!
Group your CSS meaningfully and serve it carefully.
For example, if you have CSS that is applied through out your site (e.g. CSS reset) make it separate file and include it for each page.
Then for each logical component of your site create separate CSS file and serve it on pages that belong to respective logical component. (Say you have a blog and polls on your site, if blog never needs CSS for polls you don't need to include it in blog.) But bare in mind this isn't practical for small sites.
Group your CSS by media for which they are used. If you have style sheet for printing keep it separate of your basic sheets if it makes sense (don't use separate files if you only have single CSS property for printing since it is not worth the request time).
Keep in mind that more sheets assume more HTTP requests and each request costs certain amount of time.
So there isn't explicit way these thing should be handled, it's all about making your CSS easier to maintain and easy for client to download (less HTTP requests, smaller size etc.)
I would use multiple style sheets to keep things better organized, then compress them into one file before putting them on the site, to improve performance.
You should have a range of CSS sheets for various tasks, else things get messy fast!
I think its better to use 1 for style, 1 for ie6 one for ie7. Nothing more.
Organization should be automatic inside the style.css. Using logical classnames and comments.
Less httprequests is good. Less markup is good. :)
I prefer two style sheets myself. The first one, and the one that always comes first in my HTML, is a reset style sheet. The implementation of this first style sheet helps web pages to display more consistently across different browsers.
Often, it is not necessary to create more than one additional style sheet. Generally, CSS commands specific to IE are ignored by Firefox and other compliant browsers and vice-versa. The real problem arises when an item on a page must be positioned and sized to be exactly the same across multiple browsers - at that point, more than two sheets become necessary although it is sometimes possible to get good results through proper ordering within the sheet.