Tag Archives: Design

The 1140px Fluid CSS Grid System

Dec 24, 2010 by Matt | Posted in Design No Comments

A new CSS grid framework has been gaining attention in the blogosphere lately. A 12-column fluid framework with a preferred width of 1140px. The developer picked that width because it fits nicely on a 1280 pixel wide monitor. The framework’s most notable strength, though, is that it’s “fluid all the way down to a mobile version.” Resizing the viewport causes the grid to adapt to the new size, finally collapsing everything into a single column for mobile devices.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

It looks like a good framework for sites where a fluid layout is acceptable. Its usage is fairly simple, and a PSD of the grid is available for laying out your design.

The 1140px Fluid CSS Grid System [CSSGrid.net]

Envato Expands AppStorm Blog Network

Dec 13, 2010 by Matt | Posted in Internet 2 Comments

Envato has just opened up two new blogs in their AppStorm network. Adding to the existing Mac, iPhone and Web app blogs, the new Windows and Android sites deviate the most from the network’s current audience. Some readers have voiced concerns that the new sites betray the audience and make the network too generic. (Personally, I just say they should subscribe to the individual AppStorm blogs that interest them and leave the Windows one to the unenlightened.)

Also, the AppStorm main page has received a redesign. It’s simple, matches the rest of the site, and I like the icons along the top.

CoffeeAddict: A Great Web Design Tutorial

Dec 1, 2010 by Matt | Posted in Design No Comments

Webdesign Tuts has published a great tutorial on how to make “an illustrative wood design.” It walks you through the process of setting up a document in Photoshop, marking out regions for navigational elements and content and styling them with tasteful gradients and textures.

I think it’s exceptionally well done, and definitely a good introduction to building a web design in Photoshop. It covers the basic method, as well as plenty of tricks that would be useful in plenty of projects.

In general, though, I have been enjoying this new Envato blog’s articles. The design theory posts have been informative, and the walkthroughs teach more than the average “make this cool header in Photoshop” tutorials you find elsewhere on the internet.

The Making of CoffeeAddict: An Illustrative Wood Design [Webdesign Tuts]

Designing for iPhone 4 Retina Display

Nov 24, 2010 by Matt | Posted in Design 2 Comments

With the iPhone 4, and later the fourth-generation iPod Touch, Apple introduced a much higher density of screen for their mobile devices. The Retina Display, has the same dimensions as its predecessors, but there are twice as many pixels per inch. This makes for sharp text, crisp images, and an overall better user experience. Looking at two iPhones, the new and the old, side-by-side, you can really see the difference.

But this change presents a new challenge for designers of iOS apps. Now you need to have two versions of each image. You need to have a higher-resolution version for the newer devices, and a lower-resolution one for older models.

Smashing Magazine has a great new article on designing for the Retina Display. It covers the basics, such as how you need two images, one at 163 ppi and one at 326 ppi. (The higher resolution one is saved as MyImage@2x.png instead of MyImage.png and iOS chooses which one to used based on device compatibility.) You can find out about that anywhere online, though. The best part of the article is that it gives you some design advice for retina graphics. It suggests drawing with vectors and layer styles instead of plain bitmaps when you can, and the like.

I usually draw simple elements directly in Photoshop using the Rectangle or Rounded Rectangle Tool. Draw circles using the Rounded Rectangle Tool with a large corner radius, because the ellipse tool can’t snap to pixel. Layer groups can have vector masks too, which is handy for complex compositing (option-drag a mask from another layer to create a group mask).

More complex objects get drawn in Adobe Illustrator to the exact pixel size, and then pasted into Photoshop as a shape layer.

I have an additional tip while we’re on the topic. When I create graphics for iOS, I design for the Retina Display first. Then I scale the image down for the older devices. It’s quick, it’s easy, and I can use all the bitmaps I want.

Designing for iPhone 4 Retina Display: Techniques and Workflow [Smashing Magazine]

Optimize a Website for iPhone Using Only CSS

Nov 19, 2010 by Matt | Posted in Design 4 Comments

Lots of websites now have mobile versions that optimize their designs for speed and ease-of-use on the iPhone, reducing scripts and designing for the device’s smaller screen. They usually use some sort of browser detection script that loads a different template on the mobile device.

Sahil Lavingia, creator of the Dayta app, has a quick tutorial on how to optimize your website for iPhone in 10 minutes…using only CSS.

I haven’t had a chance to try it out for myself, but it looks fairly simple.

Readability: Remove Web Annoyances

Sep 27, 2010 by Matt | Posted in Software & Scripts No Comments

Despite the efforts of web designers everywhere, the internet is still full of badly-designed websites that frustrate readers. Over-crowded content areas filled with widgets, overloaded moving banner ads and the dreaded 5-page article that could easily fit on one; you probably run into at least one site that is genuinely unpleasant to use in a day.

For those situations, which thankfully don’t come up as often as they used to, there is a nifty bookmarklet called Readability (incorporated into Safari 5 as Reader). Activate the bookmarklet on an annoying page and watch it be instantly reformatted into an elegant content-only view with no distractions. It should even crawl multi-page articles and put the whole article on one page.

Readability [lab.arc90.com]

Smashing Magazine Publishes a New WordPress Theme Roundup for 2010

Aug 25, 2010 by Matt | Posted in WordPress No Comments

Some of Smashing Magazine’s most popular posts have been their roundups of free WordPress themes. It has been about a year since the last one, and most of the themes featured are looking kind of dated. I was surprised to see a new roundup appear in my feed reader recently, full of modern themes that are more up to today’s standards.

It’s hard to believe that a year has passed since our last WordPress theme collection, but there you have it — the time has come again. Once a year we feature the most useful and interesting WordPress-themes that we are collecting over months and present them in a nice quick overview. The collections from 2007, 2008 and last year are still useful, but some of the themes are outdated or updated now.

100 Free High Quality WordPress Themes: 2010 Edition [Smashing Magazine]

Design Spotlight: Rule.fm

Aug 9, 2010 by Matt | Posted in Design No Comments

It’s been awhile since I spotlighted a cool design, and now is as good a time as any, so…

Rule.fm is a web application with a spiffy design that a few noteworthy designers have commented on. It’s simple, it makes good use of whitespace, and the texturing looks great. I particularly like the large blue buttons and the footer. (Lean in and give your screen a close look!)

Remove Default Textarea Scrollbars in Internet Explorer

Jul 26, 2010 by Matt | Posted in Design One Comment

Have you ever noticed that Internet Explorer, with its great wisdom and intelligence, likes to add a useless scrollbar to the side of every HTML textarea? Most browsers add one when it is needed, but IE adds it in right away.

There’s an easy CSS fix though:

textarea {
   overflow: auto;
}

Tag Archives: Design

TweetRoll