Tag Archives: Design

WooThemes Redesigns, Adopts Their Own WooCommerce Plugin

Oct 3, 2012 by Matt | Posted in WordPress One Comment

WooThemes launched a new redesign of their site this month, bringing some interesting changes along with the more modern style. The navigation has been restructured to highlight their non-theme offerings, making it clear that WooThemes is very serious about their plugin offerings (especially WooCommerce). Their “notorious” user management system has also been replaced with their own free WooCommerce plugin.

I like the new look, with its flat colors and additional negative space. It seems more current, as excessive gradients seem to be falling out of style in web design lately—just as browser support for them is starting to catch up. It’s definitely easier to find what you’re looking for on the new site, so the new navigational structure is a success.

The design looks great, but I find the switch to WooCommerce to be the most interesting. Not only is WooThemes “eating their own dog food,” but the fact that the largest and most known supplier of commercial WordPress themes is using it is good to know for anyone looking into e-commerce solutions.

We’ve re-designed. Everything. [WooThemes]

10 Web Apps for Web Design

May 28, 2012 by Matt | Posted in Featured, Services and Tools 6 Comments

If someone asked you what tools you commonly use for constructing web designs, you would probably mention the obvious: your favorite text editor and graphics program, the web inspector in your preferred browser, things like that. But what about those nifty web apps that, though not necessarily an essential, are majorly helpful for small parts of your workflow?

Here are a few useful web apps that help you do things like choose a color palette or add vendor prefixes to your CSS.

Sprite Cow

Sprite Cow makes it easy to get the background-position offset and element dimensions for an item in your CSS sprite. It’s so much easier than trying to figure it out in Photoshop. All you have to do in most cases is click the part of the sprite you want to use and copy the coordinates into your CSS. Most of the time, it does an excellent job at selecting the relevant pixels.

Continue reading →

Meet Webmaster-Source 6.0

May 20, 2012 by Matt | Posted in Design, Featured 7 Comments

It’s been about four years since this site last had a design refresh, and it’s high time it did! Version five really hasn’t changed much over the four years since its launch, and it’s looking a little stale. So today I bring you, the sixth major revision of Webmaster-Source.

The new design makes use of fun new CSS3 features, like linear gradients, box shadows, and variable opacities. I also worked a bit to improve the legibility of the main content, which really stands out when you compare the two revisions. I think I achieved a greater level of polish overall, though there’s still room for improvement.

Let’s take a look at some of the new features added in the redesign.

Continue reading →

Pure CSS Blockquote Styling

Apr 24, 2012 by Matt | Posted in Design, Featured 51 Comments

Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.

It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s do it with the power of CSS!

Let’s start with some simple HTML. Before we can style anything, we need to create our blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the quote to its originator.

Continue reading →

Bootstrap Doesn’t Have to Look Like Bootstrap

Apr 18, 2012 by Matt | Posted in Design No Comments

Since Twitter released their Bootstrap CSS framework, there has been some backlash among web designers. It tends to be used fresh out of the proverbial box, without any modification, an awful lot. The snide remarks about Bootstrap are largely unfounded, though. While some people may simply keep all of the defaults and use it to throw something together quickly, it is still a framework like any other. It offers an excellent array of features you might want in a CSS framework, and you can customize the look as much as you want.

I was recently looking at the new design of A Small Orange, a hosting company. Would you guess, just looking at it, that it uses Bootstrap?

I didn’t realize at first, until I moused over an image and noticed the popover that appeared. I recognized it as a re-colored Bootstrap feature, and checked the page source to confirm it. Handy, easy to implement, and yet you could even restyle it beyond recognition if you wanted to.

Continue reading →

CSS1K: What Can You Do With 1KB of CSS?

Feb 16, 2012 by Matt | Posted in Design No Comments

Back in 2003, a website called CSS Zen Garden was launched by Vancouver web designer Dave Shea to showcase what could be done with pure CSS. Back then, the internet was full of table-based layouts and large, text-filled images. The Garden was a pretty novel idea back then.

In a similar vein, a new challenge has arrived in the form of CSS1K.

You have to style the same HTML as everyone else using no images or embedded fonts, while keeping your stylesheet under 1 kibibyte minified. To participate, you just fork the site on GitHub and submit a pull request when you’re done. Accepted styles are added to the gallery.

It’s a neat idea, now that we have so many fancy new CSS3 properties and selectors available, and it’s especially relevant as today’s page sizes are on the rise.

Twitter Launches “New New Twitter” and Ruins iOS App

Dec 9, 2011 by Matt | Posted in Social Media 2 Comments

Starting Thursday, Twitter began rolling out their latest redesign, dubbed “New New Twitter” by users. The new design looks okay, albeit a bit heavy on the boxes, but some of the changes it brings aren’t so welcome. It seems to me as if Twitter is slowly strangling the brilliant simplicity that made it unique and successful, and making the service more and more like Facebook.

The first change that irks me is the new Connect screen, which replaces the Mentions tab. Instead of getting a listing of replies or tweets mentioning your username, you get something closer to a Facebook feed. The stream is cluttered with messages along the lines of “Mr. Follower and 6 others are now following you. Isn’t that great?” Oh, and anytime someone retweets one of your updates, it goes in there too. You can still get to the Mentions timeline, but it requires a second click. I imagine it’s even more “useful” if you have a half million followers.

Continue reading →

Domain Hijackers Hit Design and Development Blogs

Dec 5, 2011 by Matt | Posted in Domains 2 Comments

There has been a sudden outbreak of design and development blogs having their domain names hijacked and held for ransom. It seems to have started with David Walsh’s site, when his domain name was mysteriously transferred from GoDaddy to Name.com and from there to 1and1. The DNS records have been pointed back to Walsh’s host by 1and1 while things are sorted out, but for now the domain is still not under his control.

About one day later, the same thing happened to Chris Coyier’s CSS-Tricks.com. Someone gained access to his GMail and GoDaddy accounts and moved the domain to PlanetDomain. From his detailed chronicle of the events, it’s a possibility that he may have a keylogger on his computer, as the miscreant has been able to get around password resets of the GMail account, and may have even accessed the Media Temple server CSS-Tricks is hosted on. Coyier also received the impeccably-penned threat “pay 2k to get ur domain back.”

This has recently happened to a few other big-name sites in the same field, including Abduzeedo, Kirupa, Design Shack and InstantShift. Abduzeedo was able to catch the transfer and stop it, though. (Interestingly, it has been almost exactly four years since the same thing happened to logo designer David Airey.)

Just to be on the safe side, you might want to do a quick WHOIS search on your own domain and make sure it’s still on your registrar.

Update, Dec 5: Planetdomain is reversing the transfer, and moving the CSS-Tricks.com domain back to Chris Coyier’s GoDaddy account.

CSS3 Gradients Are Simply Amazing

Nov 24, 2011 by Matt | Posted in Design No Comments

I’ve been working with CSS3 gradients a bit lately, and they’re the best thing in CSS since border-radius. It’s just so much easier to add a line of CSS and fiddle with a couple of color hex codes than to mess around in Photoshop until you get the perfect gradient, and then go through the Save for Web dialog before setting it as a background image. They also work well with my preference to design things by playing around in a text editor, rather than mocking things up in Photoshop. (i.e. the 37signals philosophy.)

CSS Gradients also add some additional versatility, in that they can stretch to fill dynamically-sized page elements, unlike tiling background images, which can of course only scale along one axis. (And it just seems to much less hacky than loading up a tiling image for a fairly simple effect. Pixel shims, anyone?)

I had held off using CSS gradients, since they were “a fancy new CSS feature unsupported by a lot of browsers,” until I recently realized that not only did all of the modern browsers support them, but many of the browsers were already supporting them without the vendor prefix. IE support is still iffy, only working properly in IE10, but what does Internet Exploder do right?

If you’re not already using CSS gradients, you should definitely read up on them. There’s a good article over at the venerable CSS-Tricks.

Awesome Firebug Tricks You May Have Missed

Nov 14, 2011 by Matt | Posted in Design No Comments

Firebug is probably the most invaluable tool in my web development arsenal. (Well, aside from Photoshop. But that has a value: freaking expensive.) I’m not terribly picky about my text editor—after all, I used Notepad for years—though BBEdit is my tool of choice. I still haven’t found anything that works nearly as well as Firebug, and that’s probably the biggest reason why I couldn’t give up Firefox for Chrome.

Everyone who uses Firebug regularly knows the basics. They know how to inspect and edit HTML and CSS, analyze page loading times and the like. There are a few neat tricks, though, that aren’t quite immediately apparent, but are very handy.

Continue reading →