Advertise here with BSA

There was a time when the common practice was to try and place all content above the fold. But now, instead of fearing the scroll, web designers and developers are embracing the need to scroll, and using it as opportunity to engage the user with background reveals, element animations, and other clever effects based on the pages scroll position. So in an effort to inspire you, we’ve gathered a collection of websites that take scrolling to the next level.

Playground Inc.

Shadow

Artem & Julia are getting married

Shaun Dona

Koa Water

Loft City Church

I Shot Him

ISL

Scroll for your Health

Puma Actv

Designed to Move

The Story of the Pound

BTP Design

DSPG

Hot Dot

5 Reasons to Celebrate SoLoMo

Smart Phood

numero10

Advertise here with BSA

Beautiful typography works are always inspiring. And this is why today we gathered a few examples of beautiful typography use in packages to keep you inspired for the weekend. It is nice to observe package details and see how designers use type, colors, textures and shapes to deliver beautiful and eye catching designs. Make sure to click on the images to learn more about each project.

Wiener Honig

Mezcal Buen Viaje

Student Work – Allison Chambers

Melgarejo

Chocolate Naive

NOBLE petite

Stretch Island Fruit Company

FoodWealth

My Olive Tree

Hendrick’s Quinetum

Student Work – Charlie Bailey

Student Work – Jongwon Lee

Two Hands

Advertise here with BSA

After our post showcasing 23 Examples of Flat Web Design a lot of readers got in touch to see more flat design related inspiration. We decided to gather some examples of UI kits, icons and much more, so give it a look.

Freebie: Flat Design Icons Set Vol1

UI/UX Flat design – Free PSD – 3 colors

Freebie PSD: Flat UI Kit

Advertise here with BSA

Have you ever thought about how many customers you lose by having a slow site? And I’m not talking about file size only, as we rely on browser capacities to understand our code, we need to consider the processing time also.

That’s why sometimes adding a few bites in your code is much better because it save you precious seconds when real browsers or IE try to process your code.

Let’s see a few nice tips on how to improve this:

1. Don’t repeat yourself

You should use the cascade and avoid repeating code. It’s more than just using common classes, you could make good use of the heritance, for instance, so properties that can be set in the parent should be left there. Also you could use the same set of properties for multiple elements (separating multiple selectors using commas, you know).

Also, in your JS make good use of objects, functions and plugins so you don’t need to repeat code.

2. Write from right to left

Unlike us, browsers will process jQuery and CSS selectors from right to left. You may think that this won’t affect your code, but the truth is that it changes everything. A selector like this one is really, really bad:

$(“body #container div a”)

What we think we are writing is “Hey Browser, find the ‘body’ tag, and then inside of it find the #container. There you’ll find a ‘div’ and a couple of ‘a’ elements, let’s select those”. But the browser will actually read the entire page searching for ‘a’ tags, then for each tag it finds it’ll check if it has a div as parent, then check if the div has an element with the #container id, then
check if there’s a body tag beneath them.

Image from Alex Anistratov

This is just too messy. In the JS we have some elegant solutions, like the find function so your code will actually be read as you wanted. Something like this would be good:

$(“#container”).find(“div”).find(“a”)

When you’re writing CSS you don’t have much options but leaving it as specific as possible, so try finding the closest class or ID you can find.

3. ID’s are really fast

Whenever possible use ID’s, they are faster either in CSS or JS. When using JS you have the possibility of using alternatives rather than jQuery to select tags, like document.body or even passing the entire DOM tree as an array (if you already know the exact location of the element).

4. Keep the selectors short

Keep in mind that sometimes an extra item in your selector will just mess up your code. For instance if you have a “ul li a” selector, you could simply use the “ul a” and you’ll be fine.

var e1= document.getElementById('ID1'),
e2= document.getElementById('ID2');

var doc= document,
e1= doc.getElementById('ID1'),
e2= doc.getElementById('ID2');

Advertise here with BSA

White is certainly an elegant color, and when properly used in web design, it can deliver really beautiful results, as the ones we will see here today. Using the right amount of white in a website creates a clean and elegant design, and it makes things easy and pleasant on our eyes, helping the viewer like what they see. From white space to white type against dark backgrounds, images and several other “white uses”, we’ve gathered here some inspiring examples of how to incorporate white in your designs for an elegant result.

Tivix

StyleUp

Swapbox

Sociates

productOps

Hangar

Koa Water

More Air

Ada Blackjack Shop

Frappuccino

numomma

Dots

C-Roots

Amanda Cole

Justin Aguilar

Ashley Farrand

Nicolas Eberienos

Celery

Hiptype

Another Pony

Work

Advertise here with BSA

Since WP 3.1, we’ve had post formats. Most people don’t know what that is and most developers don’t make use of this great tool.

You should know about it since we’ll probably have a great increase on post formats usage with the upcoming WP 3.6 version. There we’ll find a better post formats UI, and certainly a big incentive for users to understand and use it accordingly.

Post Formats vs. Custom Post Types

Post formats allows you to select how the content should behave and display, without modifying the content type itself. So in spite of the different presentation they are all in the same big group: posts. They’ll show in the same feed and are supposed to be read as the same kind of content.

Custom post types on the other hand are more suitable, for the cases where you need different sections, you don’t want to mix those with your regular posts. The real difference here is the use, Custom Post Types are completely separated and should be used whenever you want to store any kind of content that isn’t supposed to be read by the user as posts (like portfolios, e-commerce orders, products and so on).

You can see the Post Formats as a standardized way to categorize content. So as a theme developer you’ll know for sure that items created using the “video” post format will display in a certain way, which is much better than styling a “video” category differently.

Here they are:

• Aside – The kind of short content, that don’t need to have a title
• Gallery – A lot of grouped images
• Link – A link and a description
• Image – Worth a thousand words
• Quote – A quotation (not necessarily inspirational, a testimonial, for example would fit well here)
• Status – Twitter-like messages
• Video – Embedding a video
• Audio – Embedding audio
• Chat – Chat transcript (an interview, IM chat…)

Since they are born to be a standard you just can’t add new post formats. It wouldn’t make a lot of sense to create a standard that can be changed, right?

Setting it up

To activate it you’ll need to add a piece of code in your functions.php, like this:

add_theme_support('post-formats',
array( 'aside', 'gallery','link','image','quote','status','video
','audio','chat' ) );

And once you’ve done that you’re ready to rock.

It’s important to mention that you could only accept a few of them. If you theme don’t have a special format for aside, for example, you don’t need to activate it.

Using post formats

Once you’ve declared support to it, you’ll need to actually use it in your loop. There’s a simple conditional function to test the post format, the has_post_format() this is a simple example using it:

if( has_post_format(‘image’)){
   the_post_thumbnail(‘large’);
   the_title();
}

Here you’ll show a bigger thumbnail when you have an image post format. That is cool because when you use the image post format that’s what you’re looking for: to show your images.

WordPress also gives us the ability to modify it in the CSS. As many other classes, WordPress creates new conditional classes for post formats, so you can style them (if the PHP part isn’t enough, or if you are using a theme and don’t want to mess up the code).

This code is an example:

.format-status .post-title{
   display: none;
}

If you have a “status” post format you’ll mostly don’t need your title, so this will hide the entire (probably styled) post-title container.

Taking it to the next level: get_template_part

If you have completely different ways to style your post formats, you could use the get_template_part function to call new files so you can reuse it afterwards and you can also define a default file that will be called if the named file doesn’t exist. This loop will do so:

while(have_posts()) : the_post(){
   get_template_part(‘content’,get_post_format());
}

So for each post format it’ll call the content-POSTFORMATNAME.php file in your theme’s root. The good thing is that if you don’t have all the files, it’ll load the content.php file by default so you can avoid breaking your theme using a lot of different conditional includes.

Summing up

What do you think about post formats? Have you seen a good theme using it? Are you planning to use it? Let us know using the comments section!

Advertise here with BSA

Here at WDL, we love to keep our readers posted on fresh resources, especially when it comes to fonts. Today we gathered a new round of free fonts to spice up your libraries. So feel free to check out all of them and download the ones you like most.

Idealist Sans

Aleo

Palacio

Graham Hand

Agilis

Versa

Stela UT Regular

Canter Typeface

Marta

Autour One

Advertise here with BSA

Flat design is a concept that was pretty popular a couple years ago and it’s back with full strength this year, causing some interesting buzz around the so called “flat design” trend. Flat design is not something new, something we created now as a response to other design movements. It is a concept that was around before, and now it is appearing everywhere. Flat design is pretty straightforward. It is flat. It’s a way of designing without adding three-dimensional attributes – no shadows, no gradients, no bevels, etc. It doesn’t mean flat design has no effects at all, it just means that it doesn’t use effects to create depth and dimension. Flat design focuses a lot on color (solid colors), typography and simpler use of UI elements.

The flat design trend causes a lot of debate and certainly deserves a more in depth article, which we are working on. While we finish our research to show you a complete look at “flat design”, we want to show you some examples of websites adopting the flat concept. Let us know your feelings about them and stay tuned for the next flat design chapter.

Friends of the Web

Etch

Crafting Type

vtcreative

Flaticons

Build 2012

Profound Grid

Wistia

Mark Simonson

William Leeks

The Ecology Center

SpellTower

OnSite

LayerVault

It’s a Shape Christmas

oak.is

Werkpress

Happy Studio

Coloured Lines

Bob Galmarini

Foundation

Lorenzo Verzini

Sumall

You can also find a lot of flat design inspiration on Dribbble, Pinterest and Behance.

Advertise here with BSA

Every day we have new and better browser versions. Real browsers (like Firefox and Chrome) have reached their 20th version a while ago, and the awesome features list is just increasing. On the other hand, we as developers must ensure that our products work fine in older browsers (but not IE6 kind of older), since many paying customers can be using IE8 (or 7?) or even slower machines that don’t allow you massive JS or HTML5 work.

So, how do we avoid breaking our sites? Many people would simply strip out latest technologies, but I’m a true believer that we should benefit the most updated users, by giving them an awesome experience. If you want to do something like this, you’ll make good use of libraries like Modernizr and YepNope.

Image from Fabio Basile

Modernizr, who?

It’s an awesome JS library that allows you to detect browser features, so you can conditionally load improvements. You can do that either via CSS or JS. The first step is downloading (http://www.modernizr.com/download/) the library and installing it in your site as usual JS scripts

<!DOCTYPE HTML>
<HTML lang=”en”>
<HEAD>
   <SCRIPT src=”modernizr.js”></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

How to Modernizr your site

So, using it is quite simple. You could either test via JS if there’s a certain feature available, like HTML audio, then if there is you load your desired content, if there isn’t you load the seconds (and usually worse) option.

Here is a simple JS example

if(Modernizr.audio){
   alert(“HTML5 Audio enabled”);
}else{
   alert(“HTML5 Audio NOT enabled”);
}

You could also test for CSS properties so you avoid breaking your site. For example, if a certain part of your site depends on a border image, you could conditionally load it, and if you don’t have it you could load an alternative CSS or JS effect:

if(Modernizr.borderimage){
   alert(“Border-image support”);
}else{
   alert(“Border-image not supported”);
}

You could also use the CSS detection for CSS properties. That will save you from ugly hacks and unreliable code that will most certainly break in the future (as soon as IE launches a new version, at least). This version relies on the fact that Modernizr creates a lot of classes in the HTML, generating something like this:

<!DOCTYPE HTML>
<HTML lang=”en” class="boxshadow opacity borderimage">
<HEAD>
   <SCRIPT src=”modernizr.js”></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

So you could use those pretty classes in your CSS file, like this:

.no-borderimage{
   border: 0px;
}

So you could use those pretty classes in your CSS file, like this:

.no-borderimage{
   border: 0px;
}

You can check here the full list of features detected by Modernizr (http://modernizr.com/docs/#s2).

But you may be asking yourself “Ok, it detects the lack of a feature, but shouldn’t it provide an alternative?”. Well, I can feel your pain little grasshopper. That’s why we can use other libraries, the Polyfills. They allow you to “create” HTML5 (and other) functionality in browsers that don’t support it. But if you load everything in you need your page would be far too slow, that’s why we can make use of another tool: YepNope

YepNope the modernized version of Modernizr

YepNope is a conditional loader, it allows you to load only the scripts that are needed for a certain browser. It’s customizable and you can download it at the project’s page (http://yepnopejs.com/).

It has a simple syntax and it’s important to say that it’s integrated with the Modernizr. The following code shows the basic syntax:

Yepnope({
   test: /* condition to be tested, with a boolean result (true / false) */,
   yep: /* what will be loaded if condition is true */,
   nope: /*what will be loaded if condition is false */,
   both: /* what Will be loaded either way */,
   load: /* what will be loaded*/,
   callback:/* what happens after loading */,
   complete: /*what will be loaded when everything else is OK*/,
});

Here is an example in action for HTML5 feature detection

yepnope({
   test: Modernizr.audio,
   yep: ‘audio.js’
   nope: ‘audio-polyfill.js’
});

So it’ll automatically test the feature in that browser and load the alternative version, saving you a lot of if/else tests. Let’s see another cool example:

yepnope({
   test: Modernizr.video,
   yep: ‘video.css’,
   nope: [‘video-html5.css’,’video-polyfill.js’],
   callback: function(url, result, key){
     if(url == ‘video- html5.css’){
       alert(“HTML5 Video Ready”);
     }
)};

Here it tests for the HTML video functionality, if the browser supports it it’ll load the video.css file, if it doesn’t the vídeo-html5.css and vídeo-polyfill.js files will be loaded, and after it’s done it’ll alert a message telling that the video functionality is ready now.

Summing up

All I can say about those libraries is that I wish it was that simple in the ol’ IE5 & IE6 times. Feature detection is a clean way to provide the best user experience possible, making use of native methods when available and allowing you to make things work almost every time.

Advertise here with BSA

Flat design is a graphic style that aims to avoid any graphic element providing no significant value to the structure of a template. This type of visual design purely avoid any form of abstract “decorative” elements. Gradients, reliefs, volumes, realistic forms are erased to make room for simple solids.

This is a minimalist visual approach where the design is smooth.

Some examples of flat designs

What about Skeuomorphism?

Skeuowhat? What a horrible word!

Skeuomorphism is basically the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Its a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.

People are slowly moving away from the skeuomorphism design, which has been very popular over the past few years. Apple introduced it in iOS and since then many designers have adopted it. Apple iBook app is a very good example, once opened you are in front of a real bookshelf.

Some examples of skeuomorphic designs

Flat design vs Skeuomorphism

There has been precious little research conducted on the differential effectiveness of flat design versus skeuomorphic design. As a divide grows between the two schools of thought, let me point something interesting …

Just think about this : When you design a button in flat web design what are you doing? Basically you design a “flat” button that looks like a real life button, isn’t it a copy of something real? Guess what?

You’ve just figured out the inconvenient truth : Flat design is skeuomorphic.

Final thoughts

Over the coming years we will surely unearth some new schemas and mindsets related to web design. Flat UI is just another aspect of the many ways to treat information. The community has grown into a global community with designers to be found all over the planet. This means we all have access to share and research off each other’s information, regardless of skill level. There has truly never been a better era to work in the field of web design.

And you? What do you think about flat design?
Are you a flat design or skeuomorphism advocate?
Let us know your views in the comments.