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 not necessarily mean 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.
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.
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/2012 – Please 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”.
When I rebooted my site I decided to install the jQuery Lazy Load plugin in conjunction with Lightbox 2 – the lightbox plugin I had been using for years. I noticed shortly after activating the Lazy Load plugin though that Lightbox 2 had stopped working.
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.