Archive for the ‘Visual Design’ Category

File Under: UI/UX, Visual Design
May
21
2012

The Eephus League Magazine: Pitch-Perfect Web Design

By

The Eephus League Magazine: showing publishing pros how it's done.

Baseball season is already well under way, but it’s never too late for another site about America’s favorite pastime — especially when it’s as awesome as the beautiful Eephus League Magazine.

Even if you have no idea what the name means — and fear not, even some baseball fans aren’t familiar with the Eephus pitch since it isn’t throw much (though current Red Sox reliever Vicente Padilla has something like an Eephus pitch) — the site is well worth a visit for its gorgeous layout and design.

The Eephus League Magazine is written and produced by web designer Bethany Heck, but if the interface and navigation looks slightly familiar it’s probably because the underlying code is the work of Ian Coyle, creator of Nike’s Better World site, which we featured last year.

Since then Coyle has also released Edits Quarterly, an online magazine of photography and short films. Edits is what inspired Heck to put together The Eephus League Magazine. And it’s not hard to see why, with Edits Coyle managed to create something even the so-called pros of the magazine publishing world can’t seem to make — a digital magazine that doesn’t suck.

What makes Edits — and its offspring like Eephus — remarkable is that it manages to feel like reading a print magazine even though you’re really just scrolling down a webpage. For example, there are what you might call “pages” in Coyle’s design, but they aren’t simple skeuomorphs like you’ll find in e-readers. Instead the “pages” just serve to move you through the content and keep articles separate even as they are all together on one page. Scrolling remains vertical; there’s no awkward “page flipping” actions. The Eephus League Magazine uses Coyle’s JavaScript, so moving through it feels just like browsing Edits, but Heck has made a few adjustments to fit Eephus‘s own layout and images.

In the end the experience of both magazines is different enough to catch your eye, but not so much so that it overwhelms the content. But don’t take our word for it, head over to Eephus and be sure to check out Edits Quarterly as well.

Tags:
File Under: Visual Design, Web Apps
May
4
2012

Flickr: When It Comes to Photos, Bigger Is Better

By

Size matters: Flickr's lightbox view now offers much larger images.

Yahoo is once again lavishing some attention on Flickr. Flickr has already launched a new photo uploader and a new photo editor in recent weeks, and now the site is making your images look even better with new, higher-resolution photo displays.

It’s been nearly two years since Flickr last redesigned its photo pages to display larger images. Since then screen resolutions have only improved, and when it comes to viewing photos you don’t have to be a pro photographer to know that bigger is better.

To make your uploaded images look better — especially when you’re browsing in fullscreen mode — Flickr is introducing two new photo sizes, 2048 and 1600 pixels.

Right now you’ll only see the new larger images when you enter Flickr’s “lightbox” view with its darker, photo-friendly interface (just click an image to enter lightbox view). At the moment the regular photo pages remain unchanged. However, the Flickr blog reports that the larger images will soon be available through Flickr’s API and “a few other places over the next couple of weeks.” While the new image sizes are probably too large for the default photo pages, we wouldn’t be surprised to see Flickr refresh the photo page layout with larger images in the near future.

The larger of the two new photo sizes also seems like a future-friendly choice since it works well with very high-res screens like what you’ll find on Apple’s latest iPad. Although Flickr does not appear to be doing so just yet, serving the larger images to the iPad would make for sharper photos on the iPad’s high-resolution screen. [Update: The Flickr team tells Webmonkey that it "just enabled hi-res photo sharing to the new iPad this morning."]

Naturally, to take advantage of the new larger image sizes Flickr is now creating, you’ll need to be uploading photos at least that large. But given that most phone cameras produce images in that pixel range these days, there’s a good chance you already are.

Flickr Pro members can control how large their images are displayed; just head to the new image size settings page. By default Flickr sets this to “best display size,” though if you want to stop people from downloading high-res copies of your images you can limit the display size to 1024 pixels. The new image size setting doesn’t affect who can download your original files, just those created by Flickr. But since the sizes Flickr creates are larger than what most original images would have been back when Flickr first launched, the new setting makes sense.

One thing to note with the new image sizes: they only apply to photos uploaded since Mar. 1, 2012; older images won’t be resized. The other thing to know is that if you upload something with a long edge of less than 2048 pixels, Flickr won’t upsize it so there’s no need to worry about small images being pixelated.

The new image sizes may not win over fans of filter-happy, low-res image sharing websites, but for Flickr aficionados it offers a compelling reason to stick around.

Tags:
File Under: Visual Design, Web Basics
May
1
2012

Google Embraces Responsive Design, Recommends You Do the Same

By

Responsive Book: Google's Chromebook site as seen by a phone (left) and a tablet.

If you’ve been waiting for responsive design to go mainstream, wait no more. While The Boston Globe‘s responsive redesign made a big splash in the developer community, The Globe has nothing on the latest web giant to throw its weight behind responsive design — Google.

That’s right, Google is now suggesting developers use responsive design tools like media queries to handle the variety of screens now accessing the web.

The Google Webmaster blog has posted a new article, Responsive Design – Harnessing the Power of Media Queries, that walks beginners through the basics of creating a responsive website.

It’s not the most thorough tutorial we’ve seen, nor is it the best — Google conflates breakpoints with device width, something we’d recommend against — but nitpicking aside, Google’s official blessing will no doubt help move responsive design to the front burner in many people’s minds.

It’s worth noting that while a tutorial is nice, Google isn’t necessarily making the leap to responsive websites for its own properties. Indeed, sites like Gmail or Reader are excellent arguments for maintaining separate mobile designs. If your “site” is actually a web app as complex as Gmail then we suggest doing what Google does — hiring a fleet of developers to build an maintain separate websites for different size screens.

Chances are, though, that your site isn’t that complex and doesn’t have the developer teams that Google can afford. Even Google uses responsive design when it makes sense. To go along with the new tutorial, Google offers up that the new Chromebook website is responsive, which shows off the company’s responsive design chops.

Tags:
File Under: Mobile, Visual Design, Web Basics
Apr
30
2012

Responsive Web Design: What Not to Do

By

Testing a responsive site across devices (using Adobe Shadow). Photo: Adobe.

We’ve covered quite a few ideas on how to build more responsive websites — that is, websites that use flexible layouts, media queries, image scaling and other tricks to make sure that the site looks great and works well on any screen.

Sometimes, though, it’s helpful to see what not to do. Responsive design guru Brad Frost recently outlined five common mistakes responsive developers make over at .Net magazine. Frost covers responsive sins like relying on specific screen sizes to trigger layout changes (it’s far better to create design breakpoints based on a site’s actual design than to just use the screen sizes du jour) and avoiding a one-size-fits all experience.

Of the latter Frost writes:

Mobile is much more than just various small screens…. We shouldn’t sell ourselves short by only creating responsive layouts. For example, we sometimes forget that mobile phones can get user location, initiate phone calls, and much more. Hopefully soon browsers on all these gadgets will have access to even more device APIs, further pushing the boundaries of what’s possible on the web.

We should do all we can to make the entire experience respond to what the device is capable of. Addressing constraints first gives us a solid foundation to stand on, then we can utilize progressive enhancement and feature detection to take the experience to the next level.

The entire post is well worth reading, but we’d like to add a sixth rule to the list: Don’t assume that what you did yesterday will be the best thing to do tomorrow.

That’s not to imply that what you do today won’t work tomorrow, just that chances are there will be an easier way to do it.

Responsive web design is a very new challenge and the best ways of meeting it are still being worked out. That can be a pain, but it also means that some very smart people are solving some very hard problems and you can benefit from their work provided you know about it.

We see new things popping up all the time, whether it’s a new way to handle responsive images or a browser update that adds widespread support for a new CSS feature. We encourage developers to spend some time reading up on the latest tips and tricks before each new project. New responsive tools are being developed and refined so rapidly that the hack you used on your last project might turn into a stable, well-maintained JavaScript library by the time you start building a new responsive site.

Tags:
File Under: CSS, Visual Design, Web Standards
Mar
21
2012

CSS Regions: Coming Soon to a Webpage Near You

By

CSS Regions on a Galaxy Tab (image from Adobe)

It’s been just over a year since Adobe first announced its CSS Regions proposal for flowing text around and into irregular shapes. Since then, as the CSS Regions proposal has worked its way through the W3C standardization process it’s been simplified somewhat and brought into line with other, similar proposals.

Adobe’s web platform blog recently posted an overview of what’s changed in the last year and where the CSS Regions proposal stands today.

The short — and disappointing — answer is that CSS Regions is still not ready for prime time. Browser support is limited and even where it exists the spec is still a moving target and will likely change before it’s finalized. In other words, it’s still too soon to use CSS Regions in production.

That said, if you’d like to experiment with CSS Regions, Chrome 17+, the latest Safari nightly builds and Internet Explorer 10 all support the current draft version.

The best way to understand what CSS Regions are and how they will (hopefully) one day change the way we lay out content on the web is to see them in action. Google Chrome developer Paul Irish demonstrated CSS Regions during a SXSW lightning talk earlier this month (note that if you’re using the YouTube HTML5 video player you’ll need to manually skip to the 1:50:00 mark or follow the link to YouTube):

As part of the standardization process the CSS Regions proposal now specifically refers to a set of rules to control how text flows across defined regions. The canonical example being the sort of multi-column text layout — complete with column-spanning images — such as you might find in a print magazine.

In addition to Regions there are two other related proposals to handle different layout situations. The CSS Exclusions proposal describes how to flow content around shapes (as in the example at the top of this post) or into shapes, such as text inside a pie chart. The third piece in the Regions layout puzzle is the CSS Fragmentation proposal which defines how content breaks across columns and other regions.

It’s worth noting that Regions are just one of several proper layout tools coming soon. There’s also the CSS Multi-column Layout Module (which is surprisingly well supported in browsers), the Flexible Box Layout Module, the Grid Layout proposal and the Paged Media proposal, which we’ve covered in depth before.

With the exception of the Multi-column Layout Module which works in Firefox 2+, Opera 11.1+, Safari 3.1+, Chrome 4+ and IE 10+, none of the proposals are ready for production use. And even Multi-column isn’t going to work in current versions of IE, so it’s best limited to personal sites and experiments. But as with all things new and shiny, it’s in this experimental stage that we’ll start to see what sort of exciting new possibilities these layout tools will inspire. Webmonkey is starting to catalog these early efforts, so if you’ve built something that uses CSS Regions be sure to let me know in the comments below.

Tags: ,
« OLDER POSTS