zomigi.com » Inspiration http://zomigi.com The professional blog of Zoe Mickley Gillenwater Wed, 23 Nov 2011 13:48:18 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Media queries presentation at indieconf http://zomigi.com/blog/media-queries-presentation/ http://zomigi.com/blog/media-queries-presentation/#comments Sat, 19 Nov 2011 16:30:40 +0000 Zoe Gillenwater http://zomigi.com/?p=621 Today I had the pleasure of speaking at indieconf, a conference for independent web developers and designers, right here in my backyard of Raleigh, NC. I talked about the basics of CSS3 media query syntax but focused on the challenges and considerations that go into building a site from scratch with media queries to power the layout. I used the fictional Little Pea Bakery site from my book Stunning CSS3 as a demo for how to adapt the CSS to make better use of the space at different viewport widths. I covered some tips for making your design work on mobile devices and even old versions of IE.

You can view the slides on SlideShare, or download the slides here:

CSS3: Using media queries to improve the web site experience (PDF, 2.4 mb)

Here are several links to related resources, some of which are in the slides plus many that were not but which I recommend and think you’ll find useful.

Media query articles, tutorials, and tools

Dealing with IE 6-8 support

Fluid/liquid layout

Media query inspiration

Related Posts:

]]> http://zomigi.com/blog/media-queries-presentation/feed/ 2 The liquid web site motherload http://zomigi.com/blog/the-liquid-web-site-motherload/ http://zomigi.com/blog/the-liquid-web-site-motherload/#comments Thu, 16 Jul 2009 20:03:13 +0000 Zoe Gillenwater http://zomigi.com/?p=192 I feel like a kid in a candy store. A nerdy kid. Because I’ve hit the liquid web site motherload: Nomensa’s portfolio.

Nomensa is a web agency specializing in accessibility and usability. Their own site is a nice example of a liquid design, and I’ve had it bookmarked for a while, but I finally got a chance to check out the sites in their portfolio. There are dozens and dozens of them, and almost all of them are liquid. (They also have a few elastic ones, and a few fixed-width.) Unfortunately, Nomensa doesn’t provide links to all of their work, but only a select few as case studies. But, you can google the names of the non-case-study clients, and you’ll find that most of these sites are liquid as well.

Now, I grant you, many of the sites are not terribly stylish. But they still are really useful to look at to get ideas for how to handle content and layout in liquid layouts. You could easily use the same techniques they’re using with a bit more spit and polish added.

Here are a few of the most well done liquid sites from Nomensa’s portfolio:

Barcham Online
The header using seven images of tree foliage that expand and contract to fill the available space is very clever and attractive. Also check out the feature boxes on the home page and the thumbnail gallery under Our Trees. It’s notable that this is an e-commerce site, which you don’t often see liquid.
Broads Authority
I’m not in love with the overall look and feel of this site, but I appreciate the unique layout of the home page. The main image on the home page that has a text box below, which moves down as the text in the adjacent columns grows, revealing more of the image above, is very well done.
Preston City Council
Another unique home page layout and neat use of “variable cropping” on the main photo. Be sure to check out the Gallery under Get Involved, as well as all the little feature boxes and things on the inner pages.
Macmillan Cancer Support
This site is notable for the large amount of information that it organizes into liquid rounded corner boxes throughout the site, without everything becoming chaotic and unbalanced at different viewport widths.
Business Startup Community
Again, not a very attractive site, but I’m bookmarking it simply for the treatment of the three tabs on the inner sections of the site.

I’ll be sure to stop by Nomensa’s portfolio periodically to see what new work they are featuring and gather ideas for solving problems in my own work. I should have mentioned in my flexible web design inspiration post that a great place to find liquid and elastic sites is within the portfolios of agencies or designers who themselves have liquid or elastic sites. Nomensa is now on this list for me.

Related Posts:

]]> http://zomigi.com/blog/the-liquid-web-site-motherload/feed/ 3 Updated flexible design inspiration http://zomigi.com/blog/updated-flexible-design-inspiration/ http://zomigi.com/blog/updated-flexible-design-inspiration/#comments Thu, 23 Apr 2009 02:48:54 +0000 Zoe Gillenwater http://zomigi.com/?p=80 I just updated my post on sites to explore for liquid and elastic web design inspiration. Web sites are constantly being redesigned and added to, of course, so I intend to keep updating the original post periodically. Please check it out, and post in the comments there if you have other resources you think we should all know about.

Related Posts:

]]> http://zomigi.com/blog/updated-flexible-design-inspiration/feed/ 0 Inspiration for flexible web design http://zomigi.com/blog/inspiration-for-flexible-web-design/ http://zomigi.com/blog/inspiration-for-flexible-web-design/#comments Wed, 11 Jun 2008 13:48:35 +0000 Zoe Gillenwater http://zomigi.com/?p=13 This post was last updated April 2009

Flexible web sites—sites that are liquid or elastic—have the unfair reputation of being ugly and plain. There are certainly lots of flexible sites that fit this stereotype, just as there are tons of ugly fixed-width sites. But flexible design doesn’t have to be unattractive. There are lots of really beautiful, graphically rich liquid and elastic web sites, which are all the more impressive to me because of the extra skill it often takes to pull off these graphic techniques in a flexible environment.

Here are some web design galleries that showcase flexible design:

No Resolution
This is an entire site devoted to showcasing liquid and elastic designs. Unfortunately, you have to register to submit entries, so things have been slow lately. Still, lots of great stuff in the archives, and new additions from time to time.
CSSGlance, liquid layout category
CSSGlance categorizes all entries as fixed-width, liquid, or elastic, which is really nice. They have a pretty good collection of liquid layouts.
CSSGlance, elastic layout category
Only a few things here, but elastic layouts are pretty rare in general, as well as hard to recognize with only a glance.
CSS Drive, liquid layout category
This category seems to have been mostly forgotten about recently, but it does have a good collection of liquid layouts from 2007 and earlier, and new entries do show up occasionally.
Unmatched Style, entries tagged as liquid layout
A very small collection of liquid layouts that is very rarely updated, but I include it here in case it takes off one day. Let’s hope so!

I keep my own collection of designs I find attractive and inspiring in del.icio.us. I have a number of liquid layouts saved as inspiration, as well as a few inspiring elastic ones. I’ll point out a few of my favorites:

Related Posts:

]]> http://zomigi.com/blog/inspiration-for-flexible-web-design/feed/ 13