I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
Related
I'm developing a very simple web site, with only one web page, but i need the one single page to look as it should in all the browsers. Now, for testing purposes, i have installed a bunch of web browsers on my windows 7 machine (FF, Chrome, Opera, Safari, Netscape etc.) and after doing some markup changes, i've got the same looking webpage on all the browsers.
Now the question is, does "the way" a browser renders a web-page depend on the operating system the browser is running on? Should I install linux (or other os) and test again or it will just be fine?
You should definitely be testing sites cross-platform, others may disagree, but the rendering is definitely different.
In addition to base-rendering, you may also be missing fonts, have alternate fonts with the same name, have anti-aliasing enabled/disabled on different platforms/configurations and much more.
To see exactly what I mean, on a base install of Windows 7 with Firefox 5, OSX with Firefox 5 and Linux with Firefox 5, when using the font 'Arial' or 'Verdana', you will clearly see the differences, even if those fonts do exist on all platforms.
On top of the differences you'd see above, even your positioning could be out if you're using non-absolute values (hell, even if you are using absolute values such as px it could be out!), so it's always best practice to check your sites cross-platform, it's as important as checking cross-browser, in my opinion.
Even if the same fonts exist on different OS they might look different.
So yes if you want to be sure that the page look satisfactional on the OS you should test..
As rudi_visser said, you should be doing cross-platform testing. It's a bit of a bother, but absolutely worth it.
You can start by using a service like browsershots.org to quickly check if your site looks ok. To check older versions of IE, Microsoft provides some virtual machine images you can run in Virtual PC to really test the sites. Alternatively, there's this site which is like browsershots.org, only faster and IE-only. Please note, that screenshot services are no substitute for actually testing the site on a certain platform/browser, but it's a quick way to see if something's working at all.
I would definitely recommend checking your site in the older versions of IE, since IE has a rich history of, well, not working quite right. IE9 (which I assume you're using) is a big improvement, but a lot of people are still on versions 6-8. Since IE6 was around for ~9 years without major changes, IE 7, 8 & 9 have each had a lot of catching-up to do, so they're all very different.
As for other browsers, their rendering is more consistent across versions, but they may not be consistent across platforms. Again as rudi_visser said, elements might shift around, and especially text can look different. For instance, Mac OS X uses a different font-smoothing technique from Windows, so a line of text may appear longer/shorter, bolder/lighter from one to the other. A cross-platform browser like Firefox will use the OS' font-rendering, so even though the browser's the same on the different platforms, it can still look different. (The exception is Safari on Windows, which, I think, insists on using Mac-like font-smoothing instead of Windows' own).
Just wondering how come final website deliverables (HTML/CSS) end up not looking exactly (pixel perfect) like the layout that was designed in Photoshop? For examples, 14pt in PS is not exactly 14pt in HTML. Why?
Because different browsers have different rendering engines.
In particular, a font may be rendered quite differently between the various browsers and operating systems in current use - Safari and MacOS use more anti-alisaing than Firefox or IE, but IE9 has a new feature called ClearType, which also affects font rendering.
The end result is that between the various browsers, there can be significant differences between how your fonts look, to the point that it can affect your layout.
This site tries to explain it a bit better: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
The bottom line: Don't design your pages to be pixel perfect -- you will be dissapointed. HTML and the web just don't work that way; accept this, and you'll have a much happier life.
(Oh, and there's also the issue of not even getting the same font, if you specify one which isn't available on the user's browser).
I'm developing the CSS file for the mobile version of the website my group are working on for our web design coursework, and I was wondering if it was possible to design a site for touch based browsers using the currently ratified specification of HTML and CSS, as the other member are doing for the desktop variant, or am I going to have to use the draft specification of the new language. I'm not intending to use anything too elaborate, I'm only attempting to allow the user to navigate the site with their finger, and the current implementation allows me to activate a dropdown menu on the desktop, but when I try to navigate on my Android handset, nothing happens.
The menu button gets illuminated in the way that all links in my browser do when they get pressed, but nothing happens. The research I've done since this revelation has led me to the conclusion that I'm going to have to experiment with the new spec, though since this is coursework, I'd rather stick with current standards than experimental drafts of new ones.
P.S. I'm only developing an informative site, not an application.
Yes, you can use older versions of HTML. iPhone, Palm OS, Android, and recent versions of the Blackberry OS all use Webkit, which is the same rendering engine that Chrome and Safari use.
In fact, the very first page on the World Wide Web will work just fine.
We'd need to see your code for your navigation bar to troubleshoot, but it's probably something along the lines of using a hover event to display the navigation (touchscreens can't have a hover event).
I can browse to any site on my iphone using the touchscreen. The language is not the problem. Most mobile browsers on smartphones can handle html(4)/css(2) fine. You should be more worried how to show the content so it will be easy to navigate on the site using a (small) touchscreen. Usability testing is your friend here. Browsing a website made for desktop can be very frustrating (not impossible) on a small touch screen.
Also the size of images and stuff shouldn't be to big. Since loading those can be a pain. At least the t-mobile(Netherlands) g3 network is slow, if available at all.
Note that the 'currently ratified' version of CSS is CSS1 (from 1996), CSS2.1 isn't yet a W3C Recommendation. So from that point of view the standards your other members are using for the desktop variants are not much more ratified than HTML5 and CSS3.
For sure do it! just ensure links are larger for fingers. Also allow the site to resize.
Most mobile sites are HTML1.0.
You would be silly using html5 + css3 unless you knew that it was only going to be used on an iphone eg. webapps.
And don't forget you can still use JavaScript!
Go For It!
Chrome 5 was recently released for Windows, Mac, and Linux, all with the same version number. Are there significant differences in behavior (CSS or JS) between the different platforms, or do they behave pretty much the same?
I'm not interested in how they handle extensions -- just handling of HTML, CSS, and JavaScript.
The only thing to worry about are fonts, as these are (or may be) different or even unavailable on different platforms. The main problem that can arise from this is that fonts are wider or narrower than the ones for which the design was made, thus breaking some elements (for example, if the fonts are wider, certain text blocks will break onto more rows than intended, making the design look out of place; if the fonts are narrower, "gaps" might appear).
There are two solutions for this:
Use a generic font family (such as sans-serif) and while designing take into account all platforms that you wish to support;
Use #font-face, which is supported by all major browsers (except for IE) -- including Google Chrome. This way, you will be able to provide a fully consistent look across all platforms.
Other than the fonts issue, there's nothing to worry about. Both the layout engine (that takes care of HTML and CSS) and the JavaScript engine are the same across all platforms.
Useful resources for fonts:
#font-face - Mozilla Developer Center + most of the links in the See Also section of that page;
Google Font Directory - Google provides a nice API for using webfonts.
So, there are 2 issues here:
why does it look different (on IE it is bolder, more anti-aliased)
how do I make the Mozilla rendering look like the IE one and what impact does this solution have (I am looking for minimal changes, so solutions such as - flash, silverlight or using images are out of the question)
IE looks different because it is using "Clear Type" for rendering the fonts, even if it is not enabled system-wide in Windows. This is not something that you as a web page server can control, but rather is up to the client machine and browser.
If you want Firefox to look similar on Windows, go to Display Settings -> Appearance -> Effects -> "Use the Following Method to Smooth Edges of Screen Fonts" and select "Clear Type". This should apply the same font smoothing effect to Firefox. But as I said, that's up to the end-user, not you the server of web pages.
This site gives a good comparison of font rendering on different browsers.
Not exactly a "minimal change" but certain fonts and sizes look better/more consistent than others. I couldn't say which combinations off the top of my head but I have noticed that some fonts render a lot more bold at 16px than at 15px for example. Experiment and you might find something you can live with. Alternatively try feeding a different font-weight to IE using conditional comments.
You can't unless you can convince Microsoft to use Mozilla's rendering engine, or the other way around. So unless you use your 'out of the question' solutions it ain't going to happen. Font rendering is out of the control of a web designer..
I know you mentioned Flash is out of the questions but have you considered sIFR.
It degrades nicely for non-flash browsers and look the same on supporting browsers.