media queries

Media Queries and the Thoughts Behind It

May 5, 2011 By Hyde

Smartphones and tablets have over taken the market. With high speed internet available, fast processors and sharp screens, everyone is using their portable device to browse the web. While about seven years ago we’d be discussing for which monitor resolution to design, now we have to design for everything, no ifs or buts.

From personal experience I know I want and use my iPhone for all my web browsing needs when away from my desktop. I expect that websites are coded for mobile devices. To achieve that you have to use media queries to serve your website in each resolution flavor, e.g. iPhone, iPad, Galaxy Tab, landscape and portrait.

[Read more…]

Friday Focus 02/18/11: On the Map

February 18, 2011 By Sophia Lucero

This week on Friday Focus: websites featuring maps in their designs.

Designs of the Week

I just love everything on this page, but one little detail that caught my eye was how in the navigation, the highlight for the current section matches the design of the current screen. All the content is playful and freeform yet nicely laid out.

This one’s kind of an “almost there” design. The overall look is fun and and warm but don’t translate completely to some of the interface elements.

Simple, clean, straightforward; I think it’s just the justified text that throws me off and makes the site look less…romantic?

I like the almost hazy pastel feel to this design. Clickable areas are designated by the red circles so that helps quite a bit. Using a sans-serif font in the content area, though, kind of breaks the spell of the old world feel.

So many interesting design choices on this black and white site: how the navigation items differ in design from one another, how the introductory section is center aligned, how the four link boxes are styled, etc.

The aviation theme looks great, but there’s no hint whatsoever that the site is about a web company (except for a description in the title).

One thing I noticed on this page: you can have a short description of your company (or product) at the top, and place a more detailed one in the footer, like the fineprint of a contract.

Lots of nice details here too. Aside from the Work Streams section, the yellow pull-outs on the left and top areas are quite nifty.

Stand-out illustrations on this site—you’ll love the contact form at the bottom. The only issue I see is that the layout is built for a wide screen.

Social Media Weekly

Design – Better grids: Lessons learned from Design for Developers
“The next Design for Developers workshop is just a few weeks away, and I thought it would be interesting to highlight some common problems our first group of students had while working on their projects, specifically around grids.”

Programming – Broken Links
“It dawns on me that a word of explanation might be in order for those who normally don’t worry about all the bits and pieces lurking inside a Web address.”

CSS – The Bright (Near) Future of CSS

CSS – CSS3 Tests

CSS – The practicalities of CSS Media Queries, lessons learned.

Friday Focus 10/08/10: Event Websites

October 8, 2010 By Sophia Lucero

Possibly one of the most exciting website genres out there, we’re focusing on event sites this week on Friday Focus.

Designs of the Week

The photo slideshow effect here works really well. The background bamboo pattern is also a nice idea.

The highlight of this design are the interactive shapes that are not only built with CSS3 effects, but tell stories about the different principles of design.

Another site that has subtle animations, but also time-sensitive design. When implementing a one-page site it’s important to remember that scrolling from one section to another is important, so a back to top button that appears only when you’ve left the top section gives a more striking notice than a button that’s constantly there. The large headings and and photos are great as well.

This one’s a little modest compared to the others we’ve seen, but still nicely organized and even cheerful (read: not boring). Always a good idea to format dates calendar-style and have an “important dates” to remember section.

Love the irregularly shaped menu items and other buttons. I wish the large banner switched to show different attractions at the state fair though, and not just have them appear in the footer.

I love how the introductory text is styled, not to mention the colors. Relatively simple design but no detail was missed here.

A little bit of the split and centered approach here. The date stamps are a nice touch, and the details of the project/event are nicely mapped out in one table.

Great idea to hide the tall header and keep the menu as you scroll down (it doesn’t have to be all or nothing). Some sections are a little too text heavy, but it’s the toasts section that could have been styled to be more meaningful looking.

Very nicely designed website. Every button and heading has its own little icon too. Good idea to include sample tracks of the artists playing at the festival.

The intro blurb below the header isn’t quite perfect, but everything’s easy to find and read.

This year’s FOWD conference website keeps the bold look with a little realignment. The information link is a simple graphic right alongside a summary by the numbers. Not sure what the list of years in the footer is doing in the timeline, but using images from NASA is a great move.

Social Media Weekly

SEO – SEO for the Average Joe
“From about 10 lists I found, I gathered only the points that we would need and would make sense to the average person looking to ensure their SEO is up to snuff.”

CSS – Hardboiled CSS3 Media Queries
“Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.”

Friday Focus 07/23/10: Bento Boxes

July 23, 2010 By Sophia Lucero

This week on Friday Focus: websites whose content are arranged into boxes like those cute bento meals. This time, you must think inside the box!

Designs of the Week

Let’s start with the poster child of this week’s collection. A little too busy for me, perhaps the other columns that aren’t at the center of the page can be faded out? I do like the vertical approach here though, as the header becomes the leftmost sidebar.

For a design like this, you always need to pay attention to what you’re publishing. Here everything blends in nicely and looks like a happy quilt!

Love the horizontal and vertical scrolling, which makes total sense for a grid-based design like this. The experience feels great and makes you want to browse more stuff.

Disappointingly unusable site—it uses one big image map—but I like the concept.

Looking at this site quickly, it looks okay, but eventually you’ll have to wonder why the boxes aren’t lined up properly. I know that it’s a trend to let the floating behavior determine where they’ll land, but in some ways it feels lazy as well.

Better example. The stark black and white plus the bold titles make for a striking look, no doubt.

I like this fairly colorful look as well as the controls for filtering the content, although I’m not happy with the “myster meat” collection of boxes beside it. Of course the footer provides a more useful version of that.

Interface imitation is a growing trend, and here it’s still pretty subtle but memorable (click on the “slant” box, you get a marching ants effect, then of course the blinking cursor). Love the navigation effect.

One of the most peculiar implementations I’ve seen; the images appear only on hover, using pretty dated JavaScript techniques.

I like the use of primary (and secondary) colors for a “designy” feel. But this one doesn’t know how to use semantic HTML either.

I like the boxes and circles used all over, although I wish the sidebars were a little less distracting from the main content area.

I had a pleasant time browsing this site; it looks warmly welcoming and elegant.

Very nifty concept!

Boxy designs don’t just mean you have to put content in boxes, follow the grid rhythm, be done with it. See how this site played with its logo and the placement of its text and photos.

Love the use of the browser’s full width and height.

Really elegant looking, and I admire the fact that even the menus are typed out in HTML even when they could have just used a full image.

Social Media Weekly

JavaScript – JavaScript Minification Part II
“This article emphasizes what you should do to take advantage of YUI Compressor’s best feature for minification: local variable name replacement.”

JavaScript – Say No to noscript
“Despite early accessibility advice advocating use of the noscript element, best practice is to use unobtrusive JavaScript for progressive enhancement, rather than relying on fallback content.”

CSS – Bulletproof CSS3 media queries
“I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers.”

Friday Focus 07/16/10: The Many Faces of Paper

July 16, 2010 By Sophia Lucero

The many different textures, colors, and treatments for paper allow infinite possibilities for their use in websites. Not one of these designs look remotely alike, and that keeps things very interesting. Happy Friday Focus!

Designs of the Week

Great idea to do a slideshow that spans the whole background. Looks much less artificial that way.

Everything looks impressively blended in: the logo, Facebook icon, drop-down navigation menu, and tabbed navigation.

Needs refining, but looks pleasant.

Love the navigation background as a torn section of the paper, and you can see the brown wallpaper pattern peeking through.

Excellent hover effects and that overall “big” and “scrapbook” feel.

Love the glowing flame on the logo and the large navigation. I just have some issues with the text padding in the inner pages.

Delightful, delightful details. Love the custom borders most of all.

I like the way the borders and section headers blend into the paper, like faded newsprint.

There are tons of paper textures, but few bother to design with corrugated paper. Especially this way, with the cutouts, layers, and shadows.

A visual and literary feast!

I think it’s great that the video thumbnails have frames that echo the overall look, and the video player interface almost disappears from view.

The page title isn’t so prominent, and there are no visual cues for the navigation in the header, but all the collages look fascinating, if a little overpowering.

Some alignment problems here and there, plus the map background image is a little distracting (could be lighter or darker), but good call on the drop down menus.

I really like the styled translation/localization flags! And pretty much every detail on this site—everything falls into place nicely.

The detail on this design is great, although the font choices for the headers are a bit tired. Not pictured but the animated thing going on in the footer isn’t as refined as the graphics above, looks awkward.

The shadow is a little too heavy, but the tabbed slideshow looks amazing, perfectly blended! Using the red wax seal effect for the social media icons is a good idea too.