I recently took one of Google's free courses about optimizing for speed, and a new notion was brought up to me about media attributes within the link tag. The idea I guess is to tell the browser not to stop rendering for any irrelevant media queries. I'd like to build a super fast site, but I'm kind of stuck using a bloated Wordpress framework -- forcing me to try to eek out a few optimizations where I can
Is this acceptable?
<link
rel='stylesheet'
id='site-main-400-767-css'
href='../assets/css/mainPhone.css?ver=4.8.2'
type='text/css'
media='screen and (min-width: 400px) and (max-width: 767px)' />
I'll put it on one line in my source code -- I just think this is easier to read for Stack Overflow.
Additional tips for speeding up a bloated framework?
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.
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.
I have two style sheets for one page.
<link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" />
<link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" />
I am testing on android and Iphone, and both seem to be picking up the "screen" style.
Is it better to use #media in one style sheet instead of using alternate sheets or am I doing something wrong.
I have checked the link and server directories to make sure the files existed and where linked properly.
iPhone's Mobile Safari doesn't consider itself of the "handheld" media type.
iOS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iOS.
Source.
Instead, use media queries.
You have to load the handheld style AFTER your standard style. Otherwise everything from your mobile design will be overwritten.
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.