From Two 2 Twelve
09
HOW TO: CSS Sprites (Background Image Arrays) - Part 1
A CSS Background Image Array (also known as a CSS Sprite) is a single image file that contains multiple graphics within it. Using this image file and the CSS background position property you can update all of your website graphics and page titles by editing one file and without changing any code. This technique can also significantly speed up your website’s loading time and help you automatically organize your website’s graphics.
In the first of this 3-part series we’ll cover the steps required to construct a CSS Sprite including the designing, preparing, and XHTML/CSS programming of a sprite, along with the multiple uses that CSS Sprites can be utilized for.
This Series
CSS Sprites have a countless number of possible implementations, I’ve chosen to cover three of what I’ve seen to be the most common uses.
These uses include:
- An SEO-friendly page-title replacement sprite
- A menu / navigation sprite
- An icon / button sprite
Each of these sprite implementations have their own unique advantages and challenges that result in an ultimate benefit for your website.
In every part of this tutorial series we will cover the following process for each of the three sprite uses:
- The slicing and preparing of graphics for use in a sprite
- Programming the XHTML/CSS for a sprite
- Extending and updating a sprite
Step 1: Slicing and Preparing Graphics
First, we’ll design and prepare the graphic for our page headers.
Next, we want to create additional page title graphics for our other website pages. Now, instead of creating a new file with the graphic for each page title, we’re going to implement the sprite technique into this single image by positioning our first graphic to touch the top and left edges of the canvas. Then, for each subsequent graphic (or page title) you require, duplicate that initial graphic and place it around 10px directly under the previous graphic (you can use the ruler tool and guides to measure the spaces). Here are some notes:
Next, we’ll crop the extraneous whitespace off the canvas using the crop tool. Finally, we should end up with a completed graphic that looks similar to this:
Step 2: Integrating A Sprite via XHTML/CSS
Now that we’ve constructed a sprite, we can move on to integrating it into our website.
Here is the XHTML code we’ll be using on each page to display it’s corresponding graphic from the sprite:
<div id="page_title">
<h1 id="home_title">Home</h1>
</div>As you may notice, this greatly resembles a normal looking page header without the use of a sprite, keeping our titles valid and SEO-friendly. Repeat this code on each page of your website that you have a title for and edit the h1’s id and text to correspond with the name of the page (Ex:
<h1 id="about_us_title">About Us</h1>for your about us page).
The CSS for this sprite consists of three element styles:
div#page_title {
display:block;
height:40px; <-- The height of each sprite + the whitespace below it
margin:0 0 0px;
}
div#page_title h1 {
width: 215px; <-- The width of your sprite image
height: 30px; <-- The exact height of each sprite
text-indent: -7777px;
background-image: url('../images/sprite.jpg'); <-- The image file
background-repeat: no-repeat;
}
h1#home_title { background-position: left top; }
h1#about_us_title { background-position: left -30px; }The first element: div#page_title, defines the container that encompasses the page title. Here is where you can add padding and margins that will affect the overall style and positioning of the sprite.
The next element: div#page_title h1, defines the properties of each sprite, such as the height, width and the location of the sprite image. The “text-indent” property is used in this element to hide the text within the h1 tag, but still keeping it visible to search engines by not removing it completely.
The last elements h1#home_title and h1#about_us_title, define the position of the background image in relation to the sprite image. For the sprite used in this example, each page title graphic is 30px in height with 10px of whitespace below it. The first title graphic in our sprite is for our home page, this means, for our h1#home_title element we can simply set the background-position to left and top. Next, our about page graphic is placed under our homepage graphic making things a bit tricky. To position this title and subsequent titles, we’ll note the height of each graphic from our CSS (30px) then set the background position to left and -30px to move the background image up by 30px, as a result, displaying the portion of the graphic with our about title instead of the homepage title.
Now, if you have another graphic in the sprite under about us, for example, named contact us, simply duplicate the HTML above, fill in the h1’s details and create a new element with the name h1#contact_us_title and set it’s background position to left and -60px in your CSS file and repeat as necessary.
Tip: To get the exact dimensions for the sprites used in the CSS, use the ruler tool in Photoshop (command + i (mac) / ctrl + i (windows)).
Here’s an example of an implemented page title sprite.
View This Theme on ThemeForest
Step 3: Extending and Updating A Sprite
When it comes time to update your website’s look, sprites make is extremely painless. Simply, open your sprite image file, update each graphic title with your new styles and save this over your old sprite file. Congratulations! You’ve just updated all your websites page titles by editing one file and without changing any code.
Now that we’ve covered the basic concept of creating and implementing a sprite for our page titles, in the next tutorial, we’ll create a multiple-state menu / navigation system using the CSS Sprite technique.
<
15
Implementing Standards Into Your User-Driven Website
While preforming some intense, in-depth changes for the upcoming release of 72photos I had a small, yet significant epiphany about the standards (or lack of standards) on social network websites and basically any user-content driven website. My epiphany being: These websites are generally ugly and lack a consistent, quality experience.
I became increasingly aware of this when the XMG team and I we’re brainstorming new ways to aggregate users data to create unique avenues for users to explore and browse through content on 72photos. Though, we came up with a myriad of great concepts, unforeseen problems arose late in development. We found the more user-uploaded content we featured, whether it be photos, galleries, or profiles; the more it began to affect the overall quality of the website, and not for the better. This was due mainly to the unpredictability of user content.
Then, I’ve begun to notice this trend throughout the larger, more prominent social websites…The more user content they displayed on their website, the more it affects the overall website quality. After some further research, I’ve reduced this down to 3 factors:
- User-content is unpredictable, thus unforeseeable pitfalls and issues occur.
- There is too large of a standards gap between the actual website’s content and user-generated content.
- These websites just “give up” design-wise and end up aggregating user-content into tables or lists and seem to exclude these areas in the design process entirely.
I’ll forgo the listing of any of the websites who are guilty of the points above and instead, list a few that have risen above these factors.
3 examples of consistent standards in social websites:
- 72photos – Though I may be a little biased on this one (having designed and programmed it myself) I still believe there is a level of quality kept throughout the website, given it’s large amount of user-content.
- PureVolume – With an unhealthy amount of user-based content displayed throughout the entire site, PureVolume has managed to keep the standards up by implementing a level of control and fine-tuning their user’s content.
- Open Source Food – Not a large social network by any means, but good use of CSS and Javascript elements to style their user’s content makes for a smooth, flowing experience when browsing through their site.
So, how does one strive towards displaying all their aggregated user-data while keeping the high quality and standards of one’s website? Not easily…However, here are a few methods that 72photos employed and you can implement to overcome some of these drawbacks:
- Don’t design “around” your user-content areas, instead, put forth more emphasis on laying out these content areas in interesting ways while designing your website’s pages before you begin implementing anything.
- Implement CSS techniques / hacks on any featured user-content. For example, when displaying a featured photo from a users profile on your homepage use a PNG overlay or drop shadow on the photo. Perahps even dynamically size images so they don’t bleed over other areas of your page.
- Truncate and format all user-generated text; removing all illegal characters, links, and anything else that may throw your content flow off.
With a little foresight and some CSS / Javascript trickery you can easily re-gain control of your social website’s design standards. The suggestions above are just a few of many ideas you can implement to keep the design of your site flowing with consistent quality by the end of the week—Win-win.
27
Anyone In The Market For A MacBook Pro?
It’s been a good run with my ol’ MacBook Pro, however, I couldn’t resist the temptation of the new mercury-free, multi-touch, MacBook Pro goodness.
Anyone in the market for a gently used MacBook Pro? Oh, you are? Excellent! Check out the auction!
24
New Rails Plugin: OnLooker
OnLooker is a simple rails plugin that lets a user check the status of his or her website or server. OnLooker uses Ping’s to check via TCP or HTTP whether the site, sites or servers that you specify are online and accessible. OnLooker also supports custom images to distinguish status.
Check out the demo or grab the source.
Have an issue / suggestion for the plugin? drop me a comment below.
<
05
HOW TO: Ruby on Rails + Passenger on (mt) MediaTemple's (dv)
After spending 7 painstaking hours attempting to get Rails + Passenger (mod_rails) going on a (dv) VPS I have, I decided to post up my procedure for getting this going (sans the hours spent researching).
This setup wont change much of your current setup, whether it’s a new (dv) or one you’ve been using for a while. I personally preformed the following on my 1 month old, fairly untouched, v3.5 (dv).
Prerequisites
Developer Tools – Install Guide.
Steps
Step 1: Remove all current installations of ruby and ensure sure ruby -v reports nothing.
yum remove rubyStep 2: Install Ruby v1.8.6 and RubyGems 1.3.1
cd /opt
wget ftp://ftp.ruby-lang.org:21/pub/ruby/1.8/ruby-1.8.6.tar.gz
tar -zxvf ruby-1.8.6.tar.gz
ln -s ruby-1.8.6 ruby
cd ruby
./configure && make && make install
cd ../
wget http://rubyforge.org/frs/download.php/45905/rubygems-1.3.1.tgz
tar -zxvf rubygems-1.3.1.tgz
cd rubygems-1.3.1
ruby setup.rbStep 2: Install Rails & Passenger Gems and Install Passenger
gem install rails (unless already installed)
gem install passenger
passenger-install-apache2-moduleStep 4: Follow the passenger install’s onscreen instructions.
Step 5: chown -R {your_domains_username} {your_rails_app}
service httpd restartYour Done!
Tips: Ensure your app’s directory is owned by it’s domain’s respective owner, since passenger runs as the apps owner.
23
A Place For My Plugins
In regards to my last blog post, I’m continuing my quest to release open-source snippets and tid-bits of code I’ve used in my various projects.
To better facilitate my newly founded altruistic views, I’ve put together little space to display my current list of plugins and perhaps even a demo or two.
Without further adieu…
plugins.two2twelve.com Is online!
There, you’ll notice my most recent (and currently only) plugin CleverValidation; Do away with the default (and unattractive) Rails validation methods and sexify your validations with CleverValidation. Try out the demo here or go straight to the source.
Any issues with the plugin? Think it could be sexier? Let me know in the comments section.
