Is there is any difference in writing html and css for mobile from web??
The way HTML and CSS is interpreted is completely in the realm of the web browser. Standards have been established, and most major browsers attempt to adhere to these standards these days.
As long as the mobile platform has a browser that implements CSS and HTML in a standard way, then no, there's no difference in writing HTML and CSS for a mobile device.
How you want your web page to look on such a device might be completely different however, and you might need to write a second set of HTML/CSS to present the same data to a mobile browser.
If you enjoyed (sarcasm) the diversity of web browsers, you're going to love mobile phones, browsers and carriers.
PPK got paid by Verizon Germany to do some tests so he got to play with the whole set of phones sold by the carrier and it gave theses posts and tables.
Just horrible.
Yes. There's a difference in CSS for each different browser you're targeting!
It really depends a lot on how modern the mobile devices are, or at least the ones that you are supporting. iPhone, for example, behaves nearly identically to desktop Safari (except the notable absence of Flash). But middle-of-the-line phones from 3+ years ago barely support text-only browsing.
As others have mentioned, the level of CSS support among mobile devices varies even more than on the desktop. What others have not mentioned, however, is a fairly major annoyance that mobile developers need to be aware of: dual CSS media types.
Some (many?) mobile browsers advertise acceptance of both screen and handheld media types. This means that serving a handheld stylesheet is not enough, because the device will also apply the rules from the screen stylesheet.
To overcome this, it is sometimes sufficient to explicitly set rules in your handheld stylesheet for things you would have otherwise omitted. In some cases, it may be necessary to flag certain rules as important.
Other than that, stick to single column layout, go easy on the images, and everything should be fine. And I hope you're not relying on JavaScript, because some mobile browsers don't support it.
Related
Most CSS frameworks nowadays use either Reset CSS or Normalize.css to make sure that all elements have the same initial style across different browsers.
My question is - why? Is there a reason why every browser (or rather, rendering engine) has slightly different default styles? Also, is there any good reason why this is not standardized yet, to remove the need for "resetting" it since most people will want to reset it anyway?
It is always better Reset the style.
The reason that different browsers had different standard value is because they are from different point of view projekted.
Historically, different browser providers have implemented HTML standards
differently, leading to significant differences between the presentation of websites on
different browsers.
Today, the major browsers generally adhere to a high
level of standards
compliance (for HTML4) and very few users still use the problematic Internet Explorer 6
browser, so this is somewhat less of a worry than it used to be.
source: Hier
There are many people that use old browser, and we programmer must code so all get the better result of our work.
So, well, we have an XPage application which works very well on all the browsers including the internal notes browser. Since, our target audience is both the desktop/mobile users we have designed a responsive layout using css media queries which works well on browsers, however, we just found out that when it runs as a notes application, it doesn't respect the media queries. It works as if there were no media queries (For eg. even the mobile specific items are shown on desktop). Any suggestions here to get it working? We are far way through and removing media queries would be kind of a last alternative.
Any help would be really appreciated. Thanks!
I think the reason is that your Notes browser is rendering as IE. IE doesn't support media queries up through IE 8.
IE is the default, try changing the internal browser to Firefox. See this link for instructions.
http://www-01.ibm.com/support/docview.wss?uid=swg21268588
Is there is any feature that enable auto switch of css files based on different browsers.
I don't want to use javascript code for browser detection and switch of css files.
As browser files in asp.net help in loading different css props for different server controls on runtime. Is there is any feature for us to use for auto switching of css files
Thanks
This would bring in a lot of overhead in development and maintenance. The typical way in supporting multiple browsers is by creating a main stylesheet for you site which covers your targeted devices. You also rely heavily on the knowledge stored in those browser files. What if the user agent string is not the actual browser visiting the site?
Use techniques such as:
Utilising vendor prefixes -webkit- -moz- etc.
Media Queries
Ensuring you use percentages as much as possible, fluid layouts.
& Lots of Trial and Error
If this is to cover older versions of IE then you can utilise IE stylesheets and IE selectors.
As described in the Holy Bible for CSS: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I know this is not the sort of thing you looking for but I feel your going down a very bumpy and messy road.
Thanks,
Mike
If I base my CSS on mobile styling, then use #media queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?
I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.
What I am trying to do is use one background for the larger version of the site:
.splash {
background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}
and another for the mobile version:
.splash {
background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}
If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like #media screen and (min-device-width: 481px) {...}, will mobile devices load the large image too?
Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.
If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.
If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.
One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results
Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.
This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.
So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!
Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.
Well, you have a couple options:
Firebug Lite has some mixed results on mobile browsers, but is
an excelent choice in most cases where other inspectors are
unavailable. It does seem to work in iOS and other mobile
browsers with HTML5 support, though.
This question suggests using something called "weinre". I've never used it, but it looks legit enough.
If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!
Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.
Good luck!
My current Website-Design is built with the Bootstrap responsive framework. It uses several custom fonts, which make up about 50% of the document size. The fonts are included via CSS, the way of inclusion can not be changed.
My goal now is to stop mobile devices from requesting these fonts, in order to reduce their bandwidth consumption.
Is there a CSS way, like #media (min-width: 480px), to not load the fonts in the responsive layout?
In most implementations, background images that are referenced in CSS media queries get pre-downloaded. (Unless you do some fiddling with your use of display:none;, but that won't be supported in all browsers.)
The same applies to any fonts you've included via media queries — even if they're specified for a larger/different viewport.*
Why?
This allows for a smoother transition if viewport size is changed, e.g. from portrait to landscape.
Solution?
Considering the constraints you mentioned, I don't see a clean way to do this only with CSS. You could do something with JS (but make sure it degrades gracefully), or PHP.
But the easiest ways to reduce HTTP requests and how much your visitors have to download include doing one or all of the following:
Using less fonts, or web-safe fonts instead.
Using a CDN for fonts.
Including 'minified' font files that only have the characters you'll
be using them for.
Check out Google Web Fonts for the latter two.
If you expect or get a lot of mobile traffic that's important for the site, it's always worth re-thinking a website's design and markup from a mobile-first approach: what's necessary and what isn't. (That approach can often help to even reduce clutter on the desktop version of your site.)
* The fiddling approach could be useful for fonts too, but you'd have to do browser testing yourself, as so far it's undocumented.
You could create two different stylesheets, one for mobile and one for desktop, then use PHP browser detection or various other methods to see if the user is on a mobile device or desktop device, and provide them with the corresponding stylesheet.
Take a look at the PHP get_browser function: http://php.net/manual/en/function.get-browser.php
All background images aren't necessarily pre-downloaded if referenced in your media queries -
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
perhaps this technique would also work for fonts too. Not if you're using anything that'd need JS (like typekit, google) your font's will be requested because of the JS anyways afaik.