accessibility

Friday Focus 11/11/11: Happening Today

November 11, 2011 By Sophia Lucero

We’re curating a short list of sites celebrating this lovely date. Happy 11-11-11 Friday Focus!

Designs of the Week

It’s interesting how the most important information on this page form this triangle: the hashtag, the ticket price, and the date/venue. What’s really great in this design is how the illustrated portraits have transparent areas so the pixelated background shows through as you scroll. The logo, of course, is also brilliant.

Abita Beer Presents Boudin & Beer website — Abita Beer Presents Boudin & Beer

Beautiful typography and layout per section on this one-page site, although it sometimes gets to the point where the centered logo (which rotates when you hover on it) seems a little too large for the page. The fixed background effect is no parallax, but it’s quite attractive just the same.

One Day on Earth website — One Day on Earth

I wish we could see more of the textures in the graphic elements elsewhere on the page. Using that particular shade of green as hyperlinks should only be done in moderation, and not everywhere.

Very clean and seemingly website that just puts everywhere in the right place. What will grab your attention are the “video avatars” of the conference speakers, which play on repeat. I’m a little surprised these weren’t displayed in the Workshops page.

Social Media Weekly

CSS – Centering in the Unknown
“When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don’t know anything? It’s still kinda doable.”

Accessibility – A common accessibility platform
“There needs to be more of a balance in favor of resources directed towards accessibility, and it is up to us in the community of web professionals to champion web accessibility to browser vendors.”

Friday Focus 07/08/11: This or That?

July 8, 2011 By Sophia Lucero

You might remember a feature on split designs over a year ago. The look is alive and kicking in 2011, and this week we’re taking another look. Happy Friday Focus!

Designs of the Week

This is actually a completely fluid site, and that’s one feature you can take advantage of when dividing your layout 50-50. Using a custom scrollbar is quite useful in this case as well although I wish it weren’t the only one that got such a treatment—the form elements could be tweaked a little bit more. The Facebook/Twitter/validator links are tucked away on the small arrow at the leftmost side of the site, which randomly turns into a plug icon.

Bold look, big logo, but at the cost of what could have been a better experience. The split layout forces the products to be listed only on one half and after a screenful of scrolling because of the narrow space for the intro text. Not to mention, the photoshopping of the kid and puppy to the lower left isn’t so realistic.

Who said split designs had to keep their division in one place? On this site, clicking on one of the portfolio images pushes and squeezes the other half of the layout to make way for a large tooltip description of the project, written in a playful tone. I also like the idea of putting keywords relevant to his work.

Love both the artistic and comedic headshots. The color palette used in the painted side also echoes in the circular links found in the footer as well as the skills/tasks required in each item of his portfolio and the bar chart in the about page. Other than that, this is a very black and white design, and you could say the look is split in that regard as well.

I like all the fun illustrations in this design, but the only thing that throws me off here is whitespace at the top right due to the tall logo; makes me with the menu were vertically aligned instead.

Like the previous site, only the homepage is split in two, but the execution here is striking: elegant and fun (I could even say cute) at the same time. The fixed, icon-based top navigation is also a nice touch.

Great retro look on the logo and the rest of the design. The best part has to be the negative space ampersand right in the middle!

I find it interesting that the bullet points and the left-hand text are right-aligned. Another thing I like is the use of red as accent on exactly three areas: the logo, the price, and the hands on the app. Not too sure about the reflections and shadows on the iPhone illustration though, is it standing up or lying down?

Quero Meu Cloud website — Quero Meu Cloud

This one looks less obvious but it still is a split design, with a third column halving the design. Almost predictably, there are animated clouds in the background.

Social Media Weekly

Typography – Free HTML / CSS for type & palette proposals

Mobile, iOS – The iOS Design Cheat Sheet

Usability – Top 7 split testing blunders you must avoid

HTML5, Accessibility – HTML5 Accessibility Chops: form control labeling

CSS – Pseudo Spriting

Friday Focus 06/17/11: Owly

June 17, 2011 By Sophia Lucero

This week’s Friday Focus features not just any kind of bird, but owls. They’ve been used everywhere from personal portfolios to mainstream portals and we’re going to check them out.

Designs of the Week

I remember this site having a different owl a year or so ago, but this guy’s whole brand revolves around them. I like the detail of the RSS ribbon at the top right—it actually looks like felt to me. I also like how the fine borders cross and run from top to bottom.

Lovely illustrations, and it’s nice that they’re on a textured paper background. Not too fond of the Times New Roman font choice but it seems a bit popular on author sites. Just one little quibble: it appears that body text and link colors are used interchangeably throughout the site, and that makes for a very confusing experience!

I like the uneven gradient of the navigation, looks randomly generated. Nice copy and tooltips as well. I wish there were more orange in the rest of the site though.

In sites like these, there will hardly be integration with a a graphic and the layout and design concept, so colors are the bare minimum way of coordinating. Clean solid lines all around.

Probably the poster child of this week’s bunch and one we’ve actually featured before, but’s been redesigned since. Not drastically though. There’s a new owl illustration, but the color palette, soft shadows, scallops, and clouds remain.

Social Media Weekly

CSS – A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
“For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup.”

Accessibility – Accessibility and HTML5 Block Links
“HTML5 has many new elements and features. One of these is block links—we have the ability to wrap a link around block level elements. Here we take a look at the impact that this can have on accessibility.”

Javascript, Optimization – One script, seven ways
“Refactoring is also an effective way to share knowledge, particularly if you pair with someone more experienced while you do it. The goals are already defined and understood – you can see how it works, so you’ll know when the new version does the right thing.”

Friday Focus 06/03/11: North East South West

June 3, 2011 By Sophia Lucero

Here’s an interesting technique to try out in this week’s Friday Focus: designs that have four main navigational items arranged at right angles to each other, much like the four main directions on a compass.

Designs of the Week

I like how each section content is perfectly contained in the boxes. It makes me wish the whole site fit into the height of the browser window so I can see the wide view of the whole site.

There’s a running pixelated theme in the design, as well as blocks of black for the headers. There’s also an interesting peekaboo effect with fixed backgrounds that’s also growing popular these days. I like the idea of placing the navigation at the four corners of the site, but it makes moving back and forth between each screenful of content a hassle—better if there were keyboard navigation too. And for the millionth time, I wish we had a way for Twitter tweet and Facebook like buttons to blend in better with the design.

I never really enjoy the look of Courier or any other fixed-width font on a site, but I do like the hand-drawn touches here, and splashes of red there.

What’s a little surprising with these sites is that they don’t really use the 4 cardinal directions to their advantage and, say, animate the page to scroll to that particular direction. Instead they all still scroll vertically. Here’s another graphing paper pattern meets hand-drawn graphic elements design, with the wildly popular yellow and black combo.

Social Media Weekly

Design – Design Professionalism
“The designer’s guide to taking back your profession.”

Programming – Lost Type
“The Lost Type Co-Op is a Pay-What-You-Want Type foundry, the first of its kind.”

Optimization – zbugs
“Merge, Minify, and GZip Compress JS & CSS”

Accessibility – HTML5 and Accessibility
“HTML5 is not the accessibility disaster that some would have you believe. It tries to build accessibility in by design rather than bolt it on afterwards, and this is A Good Thing; if something is left to authors to add, they won’t. Just look at how many images have no alternate text, or useless alternate text.”

JavaScript – Byte-saving Techniques
“This is a collection of JavaScript wizardry that can shave bytes off of your code. It’s mainly intended as a reference for those creating entries for 140byt.es.”

User Interface Design – The Gap Theory of UI Design

Friday Focus 05/13/11: Isometric Buildings

May 13, 2011 By Sophia Lucero

This week’s designs feature illustrations with the isometric perspective in them, giving the sites an interesting birds-eye view.

Designs of the Week

I like the idea of centering a conference website around a week, instead of the regular schedule-speakers-venue-register variety. Of course it’s a trade-off, but in this instance the brand was centered around the “week” so it follows.

Using moving clouds in the background is pretty predictable, but combined with the perspective of the buildings, and mountain illustrations on several pages, it makes sense to feel that you’re high enough in the air to actually be going through them.

Even more clouds in this design, but what’s great is that they’re used everywhere, as backgrounds for event icons and other content boxes. This is topped off with a nice fly-in animation when you load each page.

Social Media Weekly

HTML The hgroup hokey cokey
“To offer a quick recap, hgroup was removed from the W3C specification only (not the WHATWG spec) by Hixie at the request of Steve Faulkner. The co-chairs requested the issue be reverted following multiple requests from the likes of Tab and Tantek. The current status at the time of writing is that hgroup is in the spec.”

Accessibility, HTML, CSS, JavaScript – Front End Development Guidelines

CSS – Holmes: The CSS Markup Detective
“Holmes is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.”

Friday Focus 11/11/11: Happening Today

Designs of the Week

Social Media Weekly

Friday Focus 07/08/11: This or That?

Designs of the Week

Social Media Weekly

Friday Focus 06/17/11: Owly

Designs of the Week

Social Media Weekly

Friday Focus 06/03/11: North East South West

Designs of the Week

Social Media Weekly

Friday Focus 05/13/11: Isometric Buildings

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Facebook Page Design and Tutorials

Search