Premium WordPress Themes

Design Tips

← Go back to StudioPress Blog

Design Tips

Top 5 Recommended Google Font Combinations

It’s no secret that the days of custom web fonts have already begun. What started out by Typekit and Cufon is now being finished by Google.

There is a lot of buzz going on these days with web design and custom fonts – and more than likely you’ve seen some typography that you would die to use. Some of these are paid fonts, however, which you might want not want to spend money on.

Fortunately, there is Google Web Fonts … which has stepped in to make all of your miseries (like mine) go away.

Continue Reading →about Top 5 Recommended Google Font Combinations

Design Tips

Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons

A few months ago I published separate tutorials on how to add content boxes and how to add color buttons to your website. Apparently that struck a cord because there was a number of people who left comments those posts.

With that said, I thought it’d make sense to make this process available here at StudioPress, considering we get a lot more traffic here than I do on my site.

Colored Content Boxes

Continue Reading →about Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons

Design Tips

How to Make Your Genesis Website’s Logo Fade (on Hover) Using CSS Transitions

Today we’re going to have a little fun.

I’m going to show you how you can use CSS transitions and sprites to make the logo in your Genesis theme fade in and out when you hover over it. If you’re using a modern browser, go ahead and preview the final product below.

This is one of those cool little details that works really well with progressive enhancement. It isn’t an essential feature — since it won’t work with IE9 and below — but it can add some some nice flair to your site when used properly …

Continue Reading →about How to Make Your Genesis Website’s Logo Fade (on Hover) Using CSS Transitions

Design Tips

Optimizing Graphics for Apple’s Retina Display Using the CSS Background Size

I’ve written previously about how to optimize graphics for the Retina Display.

In one of the examples I said that you could use a media query to target high resolution devices and then provide a high resolution graphic for just those devices.

While it ends up being extra work to produce multiple graphics I believe it is the best option for the end user, as it provides a sharp graphic at an optimal file size.

Continue Reading →about Optimizing Graphics for Apple’s Retina Display Using the CSS Background Size

Design Tips

A Short Primer on the Optimization and Design Benefits of Using CSS Sprites

I love golf.

There aren’t many better feelings in the world than that of stepping up to an elevated tee looking over spectacular scenery and unleashing a perfectly arching shot that lands softly on the green just a few feet away from the pin.

I don’t get to experience that feeling very often, but I love golf nonetheless.

Continue Reading →about A Short Primer on the Optimization and Design Benefits of Using CSS Sprites

Design Tips

A Beginner’s Guide to Mobile Responsive Design

In his first season as an NFL quarterback, Peyton Manning won three games and threw more interceptions than touchdowns.

Manning would prove resilient however, adapting to the pro-style game very quickly. In eleven of the next twelve years the Colts would go on to win at least ten games per season, and make the playoffs each of those seasons.

What’s Manning’s secret? Most football experts would say it’s his ability to “audible” or adapt, no matter what circumstance he finds his team in.

Continue Reading →about A Beginner’s Guide to Mobile Responsive Design

Design Tips

How to Use Stylish and Semantically Correct Quote Elements on the Web

In setting out to write this article I was going to present you with a few examples of how you could use the blockquote element in a stylish way, but I discovered something much more sinister going on.

Okay not necessarily sinister, but I found out that in many cases the blockquote element is being used incorrectly according to web standards.

It seems that many people (myself included) confuse blockquotes and pull quotes.

Continue Reading →about How to Use Stylish and Semantically Correct Quote Elements on the Web

Design Tips

CSS3 Is For Today

I love movies. There’s nothing better than experiencing a movie that drops your jaw or makes you go quiet for a minute, contemplating what you just witnessed. This can happen when the story takes a turn you never saw coming. The end of the Sixth Sense or when Brad Pitt finds out what’s in the box at the end of Seven are particular favorites of mine.

Sometimes the director brings a moment to the screen that just isn’t possible in real life. One of these moments happened for me when I first watched The Matrix and encountered “bullet time.” I didn’t get to see it in the theater but I remember rewinding that initial rooftop scene at least ten times while watching at a friend’s apartment. Another awe-inspiring experience was flying with the camera as it panned over and revealed the massive structure of Minas Tirith in Lord of the Rings: Return of the King.

Continue Reading →about CSS3 Is For Today

Design Tips

How to Make Your Website Respond to Different Mobile Devices

string-dIn the television show The Wire, one of the major problems the Barksdale organization faced was identifying and punishing thieves.

Early in season one, the character Stringer Bell approached one of his lieutenants (D’Angelo Barksdale), telling him that they had a snitch tipping off their stick-up crew.

Bell’s solution for identifying the thief was to withhold payment to the crew. The crew member that didn’t come asking for his money would be identified as the thief.

Continue Reading →about How to Make Your Website Respond to Different Mobile Devices