I'm trying to compile a guide for students used to publishing in print who are learning web design.
Some obvious things which web developers know but they don't:
You can't rotate graphics in HTML
All objects have to be rectangular, you can't have a circular DIV
Many typographical effects in their repertoire can't be achieved
Some things which are tricky are:
Can they have variable opacity? Well, yes and no.
Can they have rounded corners? Maybe.
Some things which aren't technical difficulties, but which are problems:
Image file sizes: I have a student who wants to have a different large graphic header on every page of their site; that's not technically a problem, but it will mean a visitor has to wait for a new graphic to load every time they navigate
Accessibility: "why not just make everything a graphic, to overcome the limitations of HTML?"
Please help me fill out my list and add any hints or tips for people making this transition.
web is not print
Layouts can be fluid.
elements don't have to be absolutely positioned
web pages need to be checked in several browsers for compatibility
avoid divitis; from experience people coming from print into this field do everything by brute force instead of trying to think of elegant solutions for optimization and semantics purposes
print is consumed visually - the web is consumed by people with visual impairments as well. Don't forget lynx users no matter how small the market share is :)
semantics is important, learn about them
thats all i can think of right now...
Coming from someone who has done both print design and web design (and done a decent job at both, I think), it seems like you're off to a good start. Other thoughts:
Darko Z mentioned this but I think it's worth stressing that browser incompatbilities must be recognized and dealt with. In the print industry there are standard formats like PDF which guarantee that things will come out in print the way they look in design; besides, many publishers will directly accept the native file formats of the most popular design programs, like Adobe InDesign, Quark XPress, even MS Word (for the cheapskates ;-P). The point being that print designers are used to a "set it and forget it" approach where they assume that once they design something a certain way, it will stay designed. The fact that there are different web browsers which render the same web pages slightly differently is likely going to be a major pain in the butt for people used to the print world.
Addendum to the above: fonts. You can't use (or at least can't rely on) uncommon fonts in web design, for obvious reasons.
Screen real estate has to be used effectively because there's a limited amount of it. And I mean really limited - no matter how hard you try, you can't write HTML that will make someone's monitor expand 5 inches or put another screen on the back ;-) It's not like in print where people can peek back and forth between different pages of a book. Reading web pages is kind of like looking at parchment through binoculars; you have to design the pages with that limited field of view in mind.
Web page designs are dynamic and transient; they stay up for a while, they get boring, they get recycled/replaced with new designs. So you're not stuck with mistakes. But it also means you need to design with future changes in mind, e.g. by using CSS so you can change the look of whole classes of elements easily. There is some use of styles in print design but nowhere near as much as online.
Fonts and Text
You are limited to a small subset of
fonts
Fonts are viewed at different sizes
There is a readability limit for how
wide paragraphs should stretch (in a
fluid layout)
Write for readers of all types - Some
will skim, others will read in detail
Images
Sites are viewed at different
resolutions and screen sizes - Design accordingly
To achieve transparent backgrounds in
IE6, use PNG8 with alpha (IE6 doesn't
support varying levels of
transparency, it's either 100%
transparent or it's opaque)
Use CSS sprites
Images should not be used in place most of text
The img tag should be used for images
with semantic value and all layout
images should be CSS images
Every img tag needs to have the alt
attribute to validate
(X)HTML and CSS
Browser rendering varies greatly
Validate CSS and (X)HTML for a
greater probability that the design
will be cross-browser friendly
Don't use CSS hacks
Use the proper semantic markup
Pages should be able to work without
JavaScript enabled
Read Yahoo's guide for
performance and use YSlow
Dreamweaver's design mode doesn't
reflect how a page will appear in
real browsers
General Design
Simpler is often better in terms of
usability, accessibility, design, and
download size
Lists of greater than five or six
items should be broken up visually
Consistency is important - Don't
change your navigation, etc without
an extremely good reason
When choosing colors, keep those with
color-blindness in mind. This will
affect how you choose to convey
meaning by color.
Place the most important information
above the fold (the part of the
screen that shows without scrolling)
The web is interactive. This
drastically affects how you consume
and display information. You can hide and subsequently display information using tabs, accordion, and similar methods.
Think in terms of primary and
secondary calls of action. What do
you want the user to do? Where do you
want them to go next?
Some broad points:
1. Print is static, the web is interactive.
The essence of a print project is a fixed point in time, an idea captured on paper or some other substrate. Web projects are moving, changing experiences that represent both the ideas of their creators and their users.
2. Everything is uncertain.
You mention typography in your answer, it's probably worth broadening that to cover all aspects of appearance. The variety of operating systems and hardware available mean that its hard to determine how all your audience will experience your final design. Whilst some things must be compatible across all browsers, sometimes it is not worth the time and effort needed to make something pixel perfect in all systems.
3. Learn about programming.
Unless you've an aptitude for it, you don't need to learn how to program for the web. But it would still be a big help to gain some familiarity with web programming, as if you can't code, you'll need to work closely with someone who can and you need to be able to communicate effectively with them.
4. Create working prototypes
When something is static, it can be designed using a static format. To design something interactive like a website, you should be making use of moving prototypes that represent the kind of behaviour the final design will have. You can use paper to do this, or more sophisticated mockups using xhtml, css and javascript, or a dedicated prototyping program.
The user controls how they want to see content on the web, not you. Your design will not look the same to all people because some people may make it different on purpose.
Screens can be arbitrarily large or small
The web is interactive: usability trumps pretty-lookingness
Your page will be read by machines: make sure the data is easy to get at by scripts that can't read images / large blobs of text (aka "be semantic")
Remember to save your jpg files in RGB format not CMYK format. I regularly get sent jpgs that won't display on a web-site and every time it's because it's been saved in the wrong format from Photoshop.
This will become less of a problem as browsers support more image formats, but considering that 20%+ of users are still on IE6 for the sites we develop this will take a while to go away.
A lot of these are good rules of thumb for print designers who want to learn how to actually markup HTML and write CSS. But as a Web developer in the past, I'd frequently just take a designer's template and write the HTML and CSS for them. Whether or not that task was simple or difficult depended on the designer's awareness of the capabilities of CSS.
There was one pain point in particular that kept coming up. So for print designers moving to the web, the absolute number one rule to remember is:
Don't design any element to have an explicit, pixel-perfect height. You can restrict the width all you want, but changing fonts, preferred font sizes, and different text strings being pulled from the database on different pages means that text needs to be able to flow vertically without generating hideous, hard-to-use overflow scrollbars.
Designers who remember this can usually conjure up designs that are easy to cut up and integrate in a mostly semantic manner. Designers who forget this sometimes end up creating designs that have to be shoehorned into a 3 inch by 3 inch box, and that's when I reach for the vodka.
A given color or font will render differently in different browsers.
Especially when one browser is on Windows and the other is on Mac or Linux, etc.
I wrote a blog post about this a while ago - http://aloestudios.com/2008/08/dear-print-designer-doing-web-design/
So did my friend Mark - http://www.visual28.com/articles/tips-for-better-web-design
Jeffery Zeldman's book Taking Your Talent to the Web is specifically targeted to the question you have asked. It's been out for a few years...not sure if there's a 2nd or 3rd edition. Check it out.
My main advise is that you need to recognize that while you have dot precision in print applications, most of the time in web design your focus is to design and code a site that will accomplish your content and layout goals for any number of platforms, resolutions and color depths. Color depth has become less important than it was in the past.
Related
I've recently been going over some HTML and CSS stuff to get more into web development, I have been designing sites on and off for a while now and I would love to start actually developing some.
I've seen Bootstrap mentioned so many times all over the internet and I was wondering if someone could help me out and point me in the right direction... I've been learning the fundamentals of HTML/CSS and as I understand it, Bootstrap is a html/css UI framework?
I have my own UI designs in a PSD file, how would I get them to work within Bootstrap?
Is it a matter of slicing up my images and adding custom CSS into Bootstrap?
I know that I am a long way off from this, but this is the type of stuff I want to be doing:
http://heyflat.com/themes/todo/index.html
If you can point me towards the type of stuff I should be learning in order to get there I would much appreciate it, so far I will continue with my html/css stuff but I would love to start using Bootstrap and customizing it seems essential to me for what I would like to be able to achieve...
Thank you for reading :)
Updated
Overall, my process has not changed much except for how I think about converting PSDs to HTML and CSS. I look forward to the day I discover a tool as flexible and comfortable as Photoshop that can output directly to good HTML and CSS. That day has yet to come to me. Here's the process I follow, utilizing Photoshop and Bootstrap.
I find that Photoshop is a great way to imagine, share and iterate over a visual design because it frees me to experiment in ways that are currently either impossible or too time consuming to realize just with HTML and CSS.
Once a design is agreed upon, I begin planning how the target design will be realized with HTML, CSS and JavaScript.
I consider the browsers of my target audience. For example, IE8-, does not support rounded borders. If IE8- users are a large portion of my audience and those rounded borders are critical to the design I may take the time to slice out images and add extra HTML and CSS.
I decide if I am going to use a framework like bootstrap. Browser support must also be considered when deciding on a framework. If a framework has examples like bootstrap then I can checkout those examples in various browsers. If using a framework then I commit to doing it their way. That is, I use their grid system, html and class names for everything. I only add my own when the framework cannot meet a specific need. I do augment their classes as needed using a separate stylesheet but always in appropriate, low risk ways, bootstrap encourages this. I will probably never augment the grid system except perhaps through their customizer, but I have never needed to do that.
Next I implement the design. I may find that some elements need to be sliced out of the PSD, but most, like drop shadows, rounded borders and gradients, can be rendered using CSS. Some aspects of the PSD may need to be tweaked to accommodate responsive behavior or to make implementation simpler. As has always been the case, I target standards compliant browsers first and adjust for the others later. One of the nice parts about a good framework is that there is usually very little that needs tweaked.
I review the document at various resolutions in browsers my target audience use, and consider and implement additional tradeoffs as needed. For example, if it is not critical that those rounded corners show up in IE8- then I will keep it simple, render them using CSS, and let IE8- alone. I still verify that it looks acceptable in IE8 and IE7.
Steps 4 and 5 are generally not sequential but steps I bounce back and forth on. Also, make sure your client is on board or you can get them on board with how you are supporting various (not-so-modern) browsers and your reasons for doing so (shorter load times, less development time, easier maintenance, and so on).
Bootstrap 2 examples: http://getbootstrap.com/2.3.2/getting-started.html#examples
Bootstrap 3 examples: http://getbootstrap.com/getting-started/#examples
What is your preferred approach when creating websites :
Make effort so pages looks exactly the same on every browser ? or
Let the browser apply its default stylesheet on some specific objects like inputs, borders, colors, etc. ?
The first solution is obviously what we would naturally have in a perfect world, but require a lot more work, CSS hacks, browser specific stylesheets and so on.
Is it what webdesigners should tend to do ?
About the second one, I'm thinking about forms, disabled elements, colors sometimes, table's header and footer... It is a lot easier to let the browser handle it and has the advantage of being consistent across websites for the user.
Is it a good practice or I am being lazy ? How to "sell" this solution to a client that don't care about those considerations ?
I'm looking for the pro and the cons of each method.
How to choose between one and another ? Where is the limit ? (How about : stick to the W3C standards and let the browser handle the rest ?)
The art of web design is to work within the constraints of the medium, of which there are many, and still come up with something 100% functional across many different platforms. It is a challenge to make your pages look good and function completely across all browsers at multiple screen sizes, resolutions, cultures, languages, connection speeds, accessibility issues, etc., If you can just accomplish "not broken in IE" that is something.
Of course I want it to look like it did in Fireworks, but that is not a realistic target. Every single machine is different, so every view of your page will be too.
You some CSS framework like Twitter Bootstrap Or Blue print. There are actually Many out there. Then if you are writing custom CSS I would recommend you to use CSS Preprocessors.
List of CSS Frameworks
List Of CSS Preprocessors
http://twitter.github.com/bootstrap/
Since Twitter Bootstrap and many in the list cover responsive designs too so you dont need to rework for Tablets and other Equipments.I hope this list will get you started.
As a developer you would want a consistent look across all browsers. You don't want to have a lazy attitude as you suggested!! That is a terrible habit for a developer and leads to poor quality products.
Familiarize yourself with the different frameworks out there that address cross browser issues. Twitter bootstrap and jQuery are a great place to start. Also get to know the different browsers and understand what they support and what they don't, so that when you are coding you can avoid certain things!
While most web designers desire consistency across browsers, there's nothing inherently "right" about it being so, and in practice it depends on the nature of the web pages you are creating.
In particular, total consistency runs contrary to the principles of Progressive Enhancement and Responsive Web Design. There's no golden rule, do what's right for your client in each situation.
One business goal requires that I make a form on screen that's pixel-perfect. If a user prints this form, it will exactly match the US Government Printing Office version of the form; the printer will produce a (reasonably) scannable copy of this document. The previous solution is PDF, which will only work to a certain point for us.
I'm leaning towards HTML/CSS, and would like suggestions on tools to assist that.
For tools, PixelPerfect in Firefox seems a good start. The target platform for this is (drum roll) IE6, if it helps. The document looks like this.
If HTML/CSS is a complete no-go, Adobe Flex is my next choice.
If pixel perfect printing is the goal, and not even PDF will get you there, you can pretty much give up straight away on printing from the browser. There are waaaay too many variables when rendering on the client side: from different browsers (IE6? Good luck!) to different fonts, to user settings, to A4 vs Letter size paper.
Could I ask why PDF doesn't suit?
I agree that pixel-perfect layouts are very, very hard to achieve with html/css, particularly with forms. However, I think pdfs can recieve input from external web forms, or have textfields that when filled out will print.
Flex outputting to pdf would be a good idea, but I don't think using flex as an rendering engine will help too much with this.
Another option would be to make the pdf and use a server-side langage to customize it with fields from a prior webform, and output the result. (Can easily be done with ruby/django/php, there are some good pdf libraries out there.)
First, abandon pixels. What you're looking for is a print stylesheet, with everything specified using physical units (cm/inches), font size in pt, etc. What is displayed on the screen, in what font size, and whether it is pixel-perfect or not doesn't seem relevant to your requirement of producing a scannable copy.
The question is now, is IE6 support for physical units and print stylesheets complete enough for that? Given my experience with making print stylesheets for clients, where IE would simply crash during the print process if you looked at it wrong, I'd say not too likely -- not with the complexity of the forms you're dealing with.
If you're worried about the renderer (IE, Acrobat, etc.) screwing up, you could always render the form on the server, and just serve an image to the user.
Dean, check out Prince. Bert Bos and Håkon Wium Lie used it for production of their book on CSS. They explain a bit about it in an A List Apart article.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
At work I see one colleague designing a site in Photoshop/Fireworks, I see another taking this data, slicing it up and using Dreamweaver to rebuild the same from scratch.
It seems like too much mucking around!
I know that Photoshop can output a tables based HTML, and Fireworks will create divs with absolute positioning; neither appear to be very helpful.
Admittedly, I haven't tried much of (DW/FW) (CS4/CS3) since becoming a programmer, so I don't know if new versions are addressing this work flow issue, but are we still double handling things?
Can we attach some sort of layout metadata (this is a rollover button, this will be a SWF, this will be text, this logo will hide "xyz" <h1> text etc) to slices to aid in layout generation? are there some secret tools which assist in this conversion process? Or are we still restricted to doing things by hand?
The frustration continues when said hand built page needs to be reworked again to fit Smarty Templates/Wordpress/generic CMS.
I acknowledge that designers need to be free of systems to be able to do whatever, but most conventional sites have:
a header with navigation
a sidebar with more links
the main content part
maybe another sidebar
a footer
Given the similarity of a lot of components, shouldn't there be a more systematic approach to going from sliced designs to functional HTML?
Or am I over-simplifying things?
-edit-
Mmmmm.... I suppose I will accept an answer, but they weren't really what I was looking for.
It just seems like designing the DOM is a bit of holy grail ("It's only a model!"), and maybe with all the "groovy" things you can do with HTML and Javascript, it would be mighty hard work, but with a set of constraints (that 960 stuff looks interesting), some well designed reset style sheets and a bit of... fairy dust? we should be able to improve the work flow.
Photoshop's tables by themselves are pretty much useless, I agree, but surely we can take this data, and then select a group of cells and say "right, this is a text div, overflow:auto" or "these cells are an image block, style it with the same height/width as the selected area". Admittedly here at work there are other elephants in the room that need to make their formal introductions to management, but some parts of the design>page workflow seem... uneducated at best.
To me, doing it by hand is an advantage. You only have to get it right once, and if you're going specifically for visual appeal, you've likely got a lot of work ahead of you making it cross-browser friendly...
Would love to hear other answers. This is just my take on it as I make more data-driven than visually appealing sites.
Skip Photoshop entirely and just get your designers mocking up straight in the view HTML. Not only will you remove the complicated, awkward-feeling process you're feeling, but you'll get better, more resilient designs, because 100% of it will be based on what's possible in HTML/CSS, not what's possible in Photoshop.
More reading:
Why We Skip Photoshop
(37signals)
Walls Come Tumbling Down (Andy
Clarke) (via Jason Berry's
answer)
Web Designers Should Do Their Own
HTML/CSS (37signals) (via Paul
Souders' answer)
A number of people nowadays are designing straight into the browser using (X)HTML/CSS because of that exact problem - all of the mucking around with Photoshop and then going to code after getting the client to sign-off on a static design.
A good read is Andy Clarke's Walls Come Tumbling Down presentation.
Omega touched on it, but I think the biggest problem is cross-browser compatibility. If all those browser quirks didn't exist (coughInternetExplorercough), what you suggested would be much simpler. However, it often takes a lot of hand-coding to make it look pixel-perfect in every browser.
Another thing is fine-grained control. Sure, you can just pop your PSD template into Dreamweaver or whatnot and have a working website, but it's going to use hacks and ugly things like tables to make it work. And even then, it probably won't work entirely like you want it to. You have to remember things like accessibility and SEO, too, and Dreamweaver just can't give you that.
My opinion is that HTML/CSS is sufficiently simple that a competent web designer should be moderately fluent in it. Photoshop has its place for quick look-and-feel experiments, but I think this misses an important step: user experience design.
Personally, I've been designing and prototyping directly in HTML for some time now. This is where the clean separation of content and layout provided by CSS really shines. I organize pages into regions using unstyled divs, which allows me to organize the page conceptually (i.e. keep related items near each other in the code) and postpone thinking about appearance. This has the side effect of making a pretty thorough site inventory.
Next I'll use CSS to lay out the divs, which happily also produces wireframes (useful for reviews and paper prototyping.)
The last step is applying visual elements: color, text styles, graphics. I'll use whatever graphic program I need to cook up the pretty.
Note the orthogonality inherent in this method: develop concepts, then layout, then look and feel. This puts the hard thinking (conceptual models) up front, and the most volatile thinking (colors/styles) at the end. So when the art director changes the color palette, you only have to edit one CSS file. And if you need to change your conceptual model, much of the layout and look/feel may be reusable.
If you need traction in this method you can use a standard css grid like 960 (http://960.gs/). It handles a lot of the arithmetic and floaty business that makes layout such a chore.
In addition to Rahul's link above I also recommend: http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
It's a nice pie-in-the-sky sorta dream, but I think as long as websites are written in (X)HTML/CSS, at the end of the day, you'll always have to do some, most or all of the work manually.
There's just a fundamental rift between static pixels in some 'shopping software and dynamic, changing, expanding, content-focused, text-based sites. The best tool to bridge that gap is still... the human professional.
Tools like iWeb (completely WYSIWYG) or DW/Fireworks (somewhere in the middle) only get you so far or have serious limitations. You get only pre-fabbed templates in case of iWeb, often sub-optimal code in case of DW/Fireworks. You'll have to decide which limitations you can live with and when it's best to do it manually.
There are several tools such as Sitegrinder that do just that.
Adobe themselves has a project in Labs called Catalyst that does what you describe and more for Flash:
It takes the slices from Photoshop, allows you to change their properties and export it to a working Flash file. (Right click box, add text property, it becomes a text field...)
If you watch their video (which you should - its amazing), you will see that they are deluded into thinking that websites will soon be built this way.
Before Zimbra was bought by Yahoo, it looked like they were heading towards such a tool that outputted cross-platform HTML similar to what catalyst does for flash. No more. But with the shake-ups at Yahoo, such software may still rise from the Zimbra ashes.
In my opinion, a site should be mocked up in Photoshop if necessary, with parts being cut out for use in the actual site, but to design the site completely in Photoshop, then want to make it work on the web is just going about it backwards. Really the two should be done in parallel.
In short, graphic designers design the look of a website, but you need a programmer to program it.
What you probably should go for is train the designers to work within a well established grid system for their site designs. If they can understand the layout as a grid/block system a lot of interesting design can be accomplished within those constraints. But it isn't going to be straight conversion from PSD to HTML because they are two completely different ways of representing visual data.
There are lots of frameworks that make the css work easier. One is Blueprint CSS
http://www.blueprintcss.org/
There are lots of templates out there for representing the grid system within photoshop.
http://konigi.com/tools/photoshop-template-blueprint-css-comps
Think of the grid as a visual constraints layer, then the design can be mapped between a photoshop comp and specific HTML/CSS implementation. Visual elements have to be bounded within clean grid boxes. SOme elements or units within the grid can be mapped to background images. Others solid colors or white space with div containers holding content.
With a well understood and grid framework you can get pretty close to pixel perfect layouts.
Also, good designers will understand how to use white space effectively in a design mockup. If there is lots weird intersecting lines and crossover elements in the visual design then that presents a real challenge for implementation. Just because you can visually imagine it doesn't mean it is easy to implement in a browser without making certain kinds of trade offs for the way HTML and CSS work. Think of the grid system as the constraints and an effective way to judge layout requirements.
Personally, I design it in html/css first using borders and background colors. I then take the PSD and insert the images as background images or html images. It's pretty fast, the code is yours so you know what each css rule mean which speed up the dev process (as opposed to to PS's awkward sliced image names and css selectors names)
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Does it make sense to use the <table> tag on a “modern” website?
Everywhere I go I see don't use table layout, it's evil, even Google says that, so why one of the most visited websites, Google and Twitter, use it for their homepage?
I don't think it is any kind of mistake, or any other stupid problem.
The only reason I can think of is, that they want the page to look similar even if client doesn't support CSS, like with Lynx.
So why everyone say it is so bad, if the biggest websites on the internet use it.
In my opinion, there are some cases, like those mentioned above, where it is vitaly important to have the same look everywhere, than it is OK to use tables.
edit: The same question goes about html elements like <center>, or formatting text with attribute align and other "html attributes and elements used to substitute CSS functionality"
Page load time is king for these guys, and bandwidth usage is extreme.
I'd have to say they use tables for raw data speed, since they are serving up so much bandwidth every day.
Also, notice that they use inline styles in the page header to reduce the number of HTTP requests to help speed up page load time.
Table layout gets more grief than it deserves. It's easy for developers to use, it's consistent across nearly every web browser, and it allows you to easily add rows/columns with little to no effort.
The only downside is that it goes against the mantra that your document should only contain content, and your design should be contained separately (in a CSS file).
Google doesn't have to care about ranking high in search engines... ;)
Yep, agreed. Sometimes, just sometimes tables are just fine. Not everyone is writing websites that are targeted at every possible browser, that needs to support text to speech etc. In general, try to learn and grow your skills and use CSS positioning etc, but nothing bad will happen if someone uses a table to position things on a webpage.
Maybe this question should be community wiki, though?
It's evil, it's a pain, but rendering is pretty much guaranteed to be consistent across different browsers.
Table layout is working on most browsers. Google and others want to reach all user, not some or only modern users. Having different layouts or layout technologies is hard to maintain and costly in delivering content.
Table layout is not tricky. Its straight forward. You dont have to look for css hacks, browser incompatibilities or others.
Table layouts are bad. Because thy mix layout and content.
Twitter works pretty well from phones in web mode. Some web browsers are truly gruesome, so I assume Twitter does what it has to.
Given how poorly so many web sites work on phones, I'm more concerned about mobile compatibility than with the concerns of CSS evangelicals.
Three main reasons:
Tables are mainly bad for search engine reasons (there's also the issue of them messing up the DOM a bit, but that's not too bad). People don't search for Google on search engines, and people don't search for Twitter posts on generally either.
Tables render consistently on nearly every browser, including smartphones (which is a big concern for Twitter especially).
Tables consume less bandwidth. Both sites have immense data loads and need every bit of speed they can get.
Browser Support - These guys need to have their websites render perfectly on ALL web browsers (New, Old and Obscure). No matter who's using their websites and what OS/Browser their using, these websites need to work.
Each web browser supports it's own implementation of CSS and this causes a similar issue to that of the JavaScript DOM support in various browsers.
Page Load Time - Also their pages are optimized for Page load times. If it takes a user too long to load the page they'll just go somewhere else. There are still plenty of users without broadband, even a lot of mobile devices don't have very fast connections depending on where you are.