Chat Oct. 29 — Backgrounds
What are 5 rules-of-thumb or a-ha moments that you found in the first article? No real surprises in the article. The 5 things mentioned are known design do’s and don’ts
- The content should have purpose. As with any element of design, looking “cool” or “pretty” is not enough
- The background should fall in line with your brand. This is a given. This goes hand-in-hand with having a purpose. If it doesn’t align or make sense for the brand, don’t include it
- It should allow for placement of text that is easy to read. (This applies to color, contrast and size.) This is a given. Readability is key. If the background interferes with the text content, change it.
- The background theme should be fairly consistent throughout the site. (You don’t want visitors to think they have stumbled on to another page when clicking through.) This makes a lot of sense. It doesn’t have to be exactly the same but should have consistency.
- Backgrounds should download quickly and not cause the site to slow down or lag. I do know you should optimize files so that they load quickly but I never thought about downloading
Why is the second article important?
The second article, “Creating Responsive Websites with Photo Backgrounds,” talks about the current trend in web design of using photographs as full backgrounds and goes into some techniques to make those image backgrounds responsive including a video background which is pretty nifty.
Why not just throw a large background image in the code and be done with it? Throwing a large background image in the code without adding the appropriate code/media queries will not make the image responsive. The success or failure, I believe websites today depend a lot of how that site adapts to different media. With so much of the population on smartphones, a site that is hard to navigate at the smallest screen stands to lose users. The fact is, people are navigating the web more from their phones more than they are in front of a computer screen.
Here’s a helpful link:
Backgrounds In Web Design: Examples And Best Practices
http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/
This article shows some best practices and goes into detail about backgrounds, in particular textures.
Best thing I learned during the chat was regarding some tools available to create textured backgrounds using CSS.
It shows you how powerful CSS can be if you know how to use. I found this article that I thought would be helpful. These are 10 resources for creating background patterns and textures.