Taking your website backgrounds to the next level

With the varying shapes and sizes of screens these days. Websites either need to flex to the size or make use of a background colour or image to fill in the spaces around the edge. These spaces are somewhat neglected and sometimes lack the connection to the branding of the site and or company.

Transcript

1. BETTER BACKGROUNDS USING CSS AND IMAGES Thursday, 6 June, 13
2. BIO Who is Robert Dall? Former Pro Photographer Coffee Aficionado Avid Cyclist Started using WordPress in 2008 Owner 32spokes Web Design est. 2011 First WordCamp speaking - Right now! Thursday, 6 June, 13
3. WHY BACKGROUNDS? Are Important… With the shear variety of screen resolutions both static and responsive website, there seems to be a lot of screen real estate that isn’t being used. This is a lost opportunity - Backgrounds can be part of the companies branding. How? Thursday, 6 June, 13
4. A COUPLE OF CASE STUDIES… Uprising Breads Bakery *Circa 2009 Brand built around a doodle. But old website didn’t use it very well. Thursday, 6 June, 13
5. UPRISING DOODLE The Doodle was on everything. It is the basis for their brand. I was given the vector graphic and nothing more. And left with questions on how to transfer this to their new website. Thursday, 6 June, 13
6. AS EASY AS SLICED… Thursday, 6 June, 13
7. AS EASY AS SLICED… Can’t just repeat the graphic using: background-repeat: repeat; Thursday, 6 June, 13
8. AS EASY AS SLICED… Can’t just repeat the graphic using: background-repeat: repeat; Doodle can’t be small as it has a lot of detail inside of it. Thursday, 6 June, 13
9. AS EASY AS SLICED… Can’t just repeat the graphic using: background-repeat: repeat; Doodle can’t be small as it has a lot of detail inside of it. Can’t just enlarge the doodle as it wouldn’t float off page like on their other products. Thursday, 6 June, 13
10. Thursday, 6 June, 13
11. Thursday, 6 June, 13
12. Thursday, 6 June, 13
13. Thursday, 6 June, 13
14. Thursday, 6 June, 13
15. Thursday, 6 June, 13
16. SLICED BREAD BACKGROUNDS *Shown here on a black background. Thursday, 6 June, 13
17. SLICED BREAD BACKGROUNDS Now I can use background-repeat: repeat; *Shown here on a black background. Thursday, 6 June, 13
18. SLICED BREAD BACKGROUNDS Now I can use background-repeat: repeat; And I can increase the size of the doodle to show the details that you can see on all other branding. *Shown here on a black background. Thursday, 6 June, 13
19. SCREENSHOT FROM 27” SCREEN Thursday, 6 June, 13
20. IS IT REALLY THAT HARD? No… and CSS3 can help. Uprising Breads Bakery is a special case as they had a unique doodle they used on everything. Ridge Meadows Recycling Society wanted a background that matched their current branding. But they also were plagued by a slow server and 3G mobile broadband speeds. Thursday, 6 June, 13
21. INTEGRATED BRANDING With Awesome Backgrounds. 40th Anniversary Logo / Banner New Website Background Thursday, 6 June, 13
22. BACKGROUND TO THE RESCUE! Really? Kinda, hear me out… Thursday, 6 June, 13
23. We know that the background gets loaded before the content. BACKGROUND TO THE RESCUE! Really? Kinda, hear me out… Thursday, 6 June, 13
24. We know that the background gets loaded before the content. So it will load our branded background. Will also add a hex colour to the background in case the image doesn’t load at all. BACKGROUND TO THE RESCUE! Really? Kinda, hear me out… Thursday, 6 June, 13
25. We know that the background gets loaded before the content. So it will load our branded background. Will also add a hex colour to the background in case the image doesn’t load at all. But will the background scroll or be stretched on longer pages of content? BACKGROUND TO THE RESCUE! Really? Kinda, hear me out… Thursday, 6 June, 13
26. We know that the background gets loaded before the content. So it will load our branded background. Will also add a hex colour to the background in case the image doesn’t load at all. But will the background scroll or be stretched on longer pages of content? Nope thanks to… BACKGROUND TO THE RESCUE! Really? Kinda, hear me out… Thursday, 6 June, 13
27. CSS BACKGROUND-SIZE: COVER; html { background: url("images/rmrs-background.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color:#539CC9; } Should be applied to the HTML tag; applying to the body tag won’t work out well. Add a colour as a backup 1678 x 1005px in size of my background image Set it to no-repeat and centre centre. Since the CSS is applied to the HTML element, you can apply other CSS on top of it without any issues. http://rmrecycling.org Thursday, 6 June, 13
28. CSS3 ONLY BACKGROUNDS Dalhousie University Orthopaedics Mockup had Radiant Gradient Easily accomplished in print Not as easily on the web Until CSS3 came along. Thursday, 6 June, 13
29. BACKGROUNDS USING ONLY CSS3 Can’t use an image as the gradient has to stretch with the height change. Change of browser size will also change the length of the gradient transition. Use background-color as a fall back on the HTML element as the gradient CSS will override anything html { background-color:#9f9f9f; } body { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fff), to(#9f9f9f)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fff, #9f9f9f); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fff, #9f9f9f); /* IE 10 */ background: -ms-radial-gradient(circle, #fff, #9f9f9f); } dev.dalortho.ca Thursday, 6 June, 13
30. BACKGROUNDS in a responsive age If you have a responsive website, you will still have to think about what the background will show. Even a website that seems completely responsive has a background or has thought about it. 6S Marketing proves this point. 6SMarketing.com Thursday, 6 June, 13
31. HOW TO USE IMAGES PROPERLY Opacity is your friend! Pedals and Paddles wanted to use an image of a rocky beach as their main background. Thursday, 6 June, 13
32. Thursday, 6 June, 13
33. Opacity 100 percent Thursday, 6 June, 13
34. Opacity 100 percent Opacity 75 percent Thursday, 6 June, 13
35. Opacity 100 percent Opacity 75 percent Opacity 50 percent Thursday, 6 June, 13
36. Opacity 100 percent Opacity 75 percent Opacity 50 percent Opacity 25 percent Thursday, 6 June, 13
37. AT THE END OF THE DAY It’s the clients site. Eventually the client made the decision to go to a clean blue background. There was technically nothing wrong with the 60% opacity of the background image, but the client just didn’t like it. They had trouble reading the content and at the end of the day it is their site… Thursday, 6 June, 13
38. ONCE YOU’VE GONE FLAT… You’ve lost that textured feeling If you want still want a textured look to your site, use CSS style opacity - You can apply the texture to the previous look. Taking an iframe from Google Maps, you can apply opacity to the iframe and give it that paper chart feeling. http://isthatontheisland.ca/ Thursday, 6 June, 13
39. WHEN BACKGROUNDS GO BAD Thursday, 6 June, 13
40. WHEN BACKGROUNDS GO BAD A recent Air Canada landing page on a 17” monitor. Thursday, 6 June, 13
41. WHEN BACKGROUNDS GO BAD Thursday, 6 June, 13
42. WHEN BACKGROUNDS GO BAD I went back a couples weeks later. Things had changed. Thursday, 6 June, 13
43. THANKS! For Coming Slides: 32spokes.com/backgrounds Robert Dall / Developer 32spokes Web Design Twitter: @robertdall @32spokes 32spokes.com Websites Featured: deviousbehaviour.ca uprisingbreads.com rmrecycling.org pedalspaddles.com 6smarketing.com isthatontheisland.ca Thursday, 6 June, 13