    
|
|
|
Treehouse recently received a massive redesign and part of that included a new homepage. Our design team hired a photographer to shoot beautiful background photographs that span from edge-to-edge.
Treehouse uses large photographs in the latest update to the homepage.
The use of photo backgrounds on webpages has been gaining popularity and there are plenty of reasons why. From a technical perspective, higher resolution screens and increased bandwidth have removed a few technical hurdles. In the past, this type of thing wouldn’t have been very practical. However, we shouldn’t do things just because we can, so then why use them in our designs?
Photos of your product and people using it play on the customer’s empathy in ways that colorful layouts and illustrations cannot. It helps them identify with the product and visualize themselves in the same context. On the Treehouse homepage, the woman at the coffee shop on her computer and the man using his iPad outdoors are small vignettes that demonstrate how Treehouse fits into everyday life. For example, if the pictures instead featured children playing with their pets, it would paint a very different and confusing mental model of what Treehouse is all about. These types of photos are a form of storytelling, which helps to personify the product and make it relatable. Making them span the entire width of the browser window adds to the immersion and transforms the page into a place, if you will.
When designing with photographs, it’s common to overlay text and other UI elements. The composition of elements is important, but it’s even more important to watch the contrast between the photos and the overlays. If it’s a very bright image with a background that’s closer to white, you should go with dark text. For example, the Apple homepage frequently uses images with pure white backgrounds, so black text makes sense. If your photograph has mostly dark areas, then do the opposite and use white text.
Apple uses white backgrounds in their homepage design, so dark text work best in this case.
Most photos don’t have large pure blocks of color, so the areas of lightness and darkness in a photo could even determine where you put your overlays. In the case of the Treehouse homepage, the white text is on top of a darker area of the picture. The other side of the photo is brighter, which makes the layout feel well balanced. While you can adjust these bright and dark areas in an image editing program like Photoshop, it’s better to have a properly lit and composed scene at the time when the photograph is taken.
If you’re unsure about whether or not your overlays stand out enough from the background, check the page by viewing it in grayscale. One way to do this is to take a screenshot, then open it up in an image editing tool and apply a black and white filter. If there are areas that only contrast with color and not value (areas of light and dark) you’ll notice pretty quickly. If that’s the case, you’ll need to adjust the composition and contrast until everything is clearly legible.
There are a few ways to create fullscreen backgrounds. If you’re using a framework like Bootstrap, you can apply your background to an element that spans the full width of the page. The large Jumbotron example is perfect for this sort of thing.
If you want your photograph to take up the entire background of a responsive page and hit all 4 edges without warping the aspect ratio, then I suggest using Chris Coyier’s perfect full page background image method. Here’s what the code looks like:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}This will work in most browsers, but if you need it to work in IE8 or below, you should click through to his article and read about the workarounds. I’ve used this code on a few personal projects and it works well.
Photo backgrounds need to be fairly high resolution in order to deliver sharp detail on displays with high pixel densities. The Treehouse homepage uses an image at 5192 × 2817 resolution, and you’ll find a similarly high resolution picture on Apple’s website. There are a few tricks to making them performant.
First, make sure you crop the images in any way that you can. Apple does this with imagery on their homepage because the backgrounds are pure white, so it doesn’t make sense to load in a white background when the same thing can be done with a normal CSS colored background.
While you want the images to be large, don’t make them too large. At 5192px by 2817px the Treehouse image is definitely on the top end of resolutions and, theoretically, if Apple were to release a 27″ retina screen or a 4K display, those photos should be in the clear. You really shouldn’t have any need to go larger than that for the foreseeable future.
You actually can get away with a ton of JPEG compression on double resolution images. Sometimes in Photoshop I’m able to knock these images down to the 20% or 30% range. That’s because when the images are scaled down, the compression artifacts aren’t nearly as perceptible as you would expect. In fact, 2x resolution images with lots of compression sometimes have smaller file sizes than their 1x counterparts with far less compression.
If your images are on the heavier end of the spectrum (1MB or more) it’s a good idea to consider swapping image sources on mobile devices or not loading the images at all. The upcoming <picture> element will eventually make this a lot easier, but for the time being, there are still some great options such as Responsive Images, Zurb’s Interchange, and Adaptive Images just to name a few. Also, if your project has the budget, you should definitely use a CDN (Content Delivery Network) to serve up your images with some overly enthusiastic bandwidth.
This trend has been rocking the Internet radio waves, so there are plenty of great examples and sources of inspiration if you’re feeling stuck. Unsplash is a wonderful tumblr blog that features totally 100% copyright free images that you can use for whatever you want. Even if you can afford to snap your own customized photos, these make nice placeholders while you’re still prototyping your ideas in code. If you have the budget, you could also reach out and hire a photographer to shoot your image, like Treehouse did with Christy Cassano-Meyer.
Another good place to look is Pattern Tap and filtering by home page. There are loads of beautifully designed home pages that use photography to the fullest.
If you have any awesome tips or favorite full screen photo sites, be sure to share them in the comments!
The post Create Stunning Homepages using Photo Backgrounds appeared first on Treehouse Blog.
]]>|
|
|
|
]]>NBA Internship Program offers college students an exciting opportunity to use their skills and classroom learning within a national sports environment. Imagine having a real job experience and being able to learn all about the NBA at the same time.
Students must be juniors or seniors already attending a U.S. accredited college or university, first and second-year graduate students, and law students. Internship positions are located either in New York City (Manhattan) or Secaucus, New Jersey. Each office will have different positions available, and students will be matched to a position based on their skills and experience.
Interns will not be fetching coffee for other office employees. They will get hands-on experience in their field and learn how the NBA League Office operates. The internship is 10 weeks long and is offered every summer; interns work 40 hours a week. Students will work and learn, but also be able to attend NBA events and other activities.
Students may apply online for internships in marketing, communications, human resources, information technology, business, media, events and much more.
For more details, visit
I agree with these general guidelines from Dudley Storey. Funny how these general-purpose length measurements have fallen into to some pretty specific niches.
Direct Link to Article — Permalink
Which CSS Measurements To Use When is a post from CSS-Tricks
]]>