Monthly Archives: May 2011

28 Stylish Article Headings, Date & Meta Data Designs

May
31

13 Comments - LEAVE A COMMENT

There is nothing that will grab the attention of visitor’s to your blog like a creative and thoughtful eye catching title/date/meta data design.

The most important aspect of a blog is the content within it. It doesn’t matter how great (or poor) your design is overall if the attention of your visitors isn’t being directed to your content. And the best way to get people reading your content is with a snappy title that grabs their attention by both how it looks and what it says.

That being said, good design for a blog post’s title (date and/or meta data) does notnecessarilymean that it needs to be blinged out to the nth degree with graphics, icons and backgrounds/textures. Good choice of fonts, color, and arrangement of the information is the basic architecture you need to start with. Once you have your frame developed, choosing to add in accents such as background images and extra design elements that will pull the eye to the titles may be beneficial.

I did a some research and handpicked 28 different blog title designs that I believe are awesome examples of effective and well designed titles, date and meta-data designs. Some have extra design elements that pop and help draw the eye to the title. Some have no graphical elements at all – relying merely on awesome typography and the arrangement of the data. All draw the focus to the article title, where users will be able to make a decision if this is the right content for them.

CONTINUE READING...

How to: Anchor the Footer to Bottom of Page (or Header to Top)!

May
29

46 Comments - LEAVE A COMMENT

Update 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Yesterday I discussed another method of creating a full width header and footer while still keeping your interior content centered. I’m going to expand on this method, and show you how to take the full width footer you’ve created and anchor it to the bottom of the browser window so the page’s content scrolls underneath it.

At some point I’m sure you’ve encountered this technique along your web travels. Some call it a static footer, others fixed position, others a “sticky footer“. Whatever you call it, it remains anchored to the very bottom of the page, no matter how much you scroll.

CONTINUE READING...

How to: Create Full (100%) Width Header/Footer with Centered Content (Updated)

May
28

59 Comments - LEAVE A COMMENT

Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Update 1/15/2012Please see the latest release of 100% Full Width Header/Footer with Centered Content.

I originally wrote a tutorial on how to “Create Full Width Header & Footer With Centered Content Using CSS” almost three years ago (yipe!) when I was working on one of the many redesigns of my site. Looking back on it now (since it’s one of my most popular articles), I see it’s slightly different as to how I have been doing it recently. Both methods work, both can be used, but I find my current method a little bit “cleaner”.

CONTINUE READING...

51 Fresh and Brilliant Websites in Orange

May
26

4 Comments - LEAVE A COMMENT

I don’t know about the rest of the world, but here in New York we’ve been waiting (un)patiently for Spring to finally arrive admist chilly temperatures and non-stop cloudy and rainy days. Well it looks like this week Spring is finally showing itself with nice and toasty temperatures and lots of sunshine.

Whenever I think of Spring I think of bright, happy colors – yellow, green, pink, purple, blue and most of all orange. The past few days I’ve been increasingly drawn to orange designs. I even bought a nice shade of orange paint to redo my bedroom in.

I love orange, and according to color theorists “orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.” Orange is a bright, happy vibrant color that stimulates your appetite – hence why you see it on a lot of food packaging. For more information on color theory or where to find color inspiration check out the article 17 Great Resources Color Inspiration For Web Design.

After adding a bunch of orange based designs to my “ColorLove” bucket on dribbble I realized my lust for orange wasn’t shared by just me! A lot of designers seem to shy away from orange, but I love to see it used – either as the prominent color in the design or as a beautiful highlight or accent color. So, I went on a massive search and compiled a collection of 51 brilliant website designs that use some shade of orange in the design.

CONTINUE READING...