Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Separate mobile CSS sheet vs. separate mobile page?

Tags:

css

mobile

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?

like image 268
d-_-b Avatar asked Aug 12 '12 22:08

d-_-b


People also ask

Should I have a separate CSS file for each page?

Generally, it is better to have one single . css file containing data for all pages for 2 reasons: You will allow browsers to cache .

Which CSS technique can be used to define different styles for different screen sizes?

The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device.

How do I use two CSS files in HTML?

Note: There are two different ways to import a CSS file into another using @import url(“style2. css”); or @import “style2. css”; or directly import any CSS file or multiple CSS file in the HTML file directly within <style>@import “style1.


3 Answers

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/

like image 150
Genosite Avatar answered Sep 18 '22 10:09

Genosite


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/

like image 20
Nicholas Albion Avatar answered Sep 20 '22 10:09

Nicholas Albion


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.

like image 32
Xhynk Avatar answered Sep 20 '22 10:09

Xhynk