In a previous post I wrote about the CSS3 we used in the new Pure Adapt site and now I want to post about new HTML5 elements we used.

The HTML5 elements that we used are relatively easy to understand since they were in a way already being used. For example instead of naming to containing div id=”footer” HTML5 now has a dedicated tag for the footer. Simple as that. Here are the new elements we used in the redesign.

<header> – For an introduction of a document or section, could include navigation

<nav> – For a section of navigation

<section> – For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<footer> – For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

Definitions via w3schools.com

The elements we used are pretty straight forward, but HTML5 has much more exciting new elements to offer like the <video> tag where a link to the source can add a video to your webpage without embedding video code. Now for more information on HTML5 please visit one of my go-to sites for development, w3schools.com.

I’ve talked about the CSS3 and HTML5 that we used in the redesign, but there’s one more post about the design of Pure Adapt site featuring responsive design techniques coming. New Pure Adapt Site Design – Responsive Design post is coming soon.

Comments (0)

Web design has reached the next level with the recent releases of CSS3 and HTML 5, so in the redesign of the Pure Adapt website we worked in some new design styles and techniques. In this post I’m going to specifically go over CSS3 styling that we used in the new design.

CSS3 Transitions are effects that allow you to change the style of an element gradually to another style. This is a great new property that adds animation without having to use Javascript or Flash. We used this in our top navigation so when you hover over one of the navigation icons it gradually drops the name of the link. see CSS3 transition property tutorial

CSS3 Border Radius property lets you create rounded corners without having to use photo editing software to create rounded corners and piecing it together in HTML. We used this property throughout the entire site. see CSS3 border-radius property

CSS3 Box Shadow property adds a shadow to elements like your div. We used this property right on homepage so when you hover over our featured sites there’s a light glow around the image. It’s not a shadow, but it’s done with the box-shadow property. see CSS3 box-shadow property

CSS3 Media Queries have been around, but with CSS3 you have much more control. Now you can assign different style sheets depending on the screen resolution, which is extremely helpful with the amount of devices that websites are viewed from. This feature was put into good use helping us create a responsive designed website, so as the resolution changes it’ll adjust to a better viewable layout. There’s more to responsive design than just media queries but that’s for another post. see CSS3 media queries tutorial

Those are examples on how we used CSS3 in the redesign of the Pure Adapt site and that’s only small sample of all the great stuff the CSS3 has to offer. Visit PureAdapt.com to see the complete redesign. Also note that CSS3 doesn’t work across all browsers. Working properties may vary across browsers, but most modern browsers have adopted CSS3. For more details on CSS3 visit w3schools.com for CSS3 tutorials and much more, it’s great web design resource.

Comments (2)

Twitter is currently experiencing some technical difficulties right now, at least for me (by the time I finished this post Twitter was back up). The graphic in the bottom right corner is a little bit interesting. It’s some sort of robot animal with one of it’s clamps or claws cut off. It almost looks like the animal cyborg is bleeding too. I guess that image is suppose to indicate that something is wrong. The some what creepy animal cyborg with it’s missing limb is what grabbed my attention and it’s just an interesting design that I wanted to post about. Beware, Twitter is run by animal cyborgs!

Comments (0)

In the spirit of Halloween, Detailed Image presents to you scary savings on Chemical Guys products. A Chemical Guys sale works right into the frightful nights October with it’s badass skull logo. Starting with a logo like that, the creativity is flowing right from the get go.

As a designer you go in with an idea and sometimes you get something unexpected and way cooler. That is what happened to me with the design of this Chemical Guys sale. While working on it I noticed I could make a glowing effect with it’s eyes and I rolled with that. I like how everything came out, especially the glowing eyes on the sale navigation tab. Save on great Chemical Guys products like Stripper Scent and much more. Happy Halloween!!

Comments (2)

24 Ways To Impress Your Friends inspiration stems from it’s unique calendar styled navigational layout. The hover effects throughout the layout gives it an interactive feeling while layers and transparency effects add a level complexity. When you put all that together you get cool functional user experience.

The navigation stands out to me the most and makes me rethink the possibilities of a site navigation.

Not only is the design inspirational, the site is all about web design and development. Since 2005 the site has been featuring 24 posts about design and development from different writers during the holidays.

24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

The navigation makes the design and only posting during Christmas makes for a very creative unique website. Check the site out now at http://24ways.org/.

Comments (0)

Update: SNIAGRAB has been around for 56 years. Oh that makes me feel stupid but it’s new to me and definitely got my attention. Thank you to Joe who commented for letting me know that it certainly isn’t anything new. Please be aware my post below was off the basis that I thought that SNIAGRAB was something new.

Credit to the Gart Sports Company for starting SNIAGRAB which did a merger of equals with The Sports Authority in 2003. There is also a great story behind Gart Sports Company and the beginnings of SNIAGRAB that you can view in the video below.

What is SNIAGRAB? It’s Sports Authority’s new sale spelling “bargains” backwards. When I received the newsletter I got fixated on trying to figure out how to say that  wacky word and not looking right below the word to see that it’s bargains backwards. This email definitely got my attention the same way as naming my post that way has grabbed some people’s attention I assume.

I’ve been on Sports Authority’s newsletter list for a while now and they have certainly made a big change with the new newsletter template. You can see the differences in The Retail Email Blog’s recent post comparing the differences.

Checking the site it looks like they’ve also updated their site. I like the changes that they have made.  I’ve always thought their site was a little plain and outdated. The changes they’ve made have definitely caught my attention especially with the SNIAGRAB promo with popping graphics and creative sale name.

With the recent changes that SportsAuthority.com has made along with the new creative promos, it’s probably made a positive impact on their newsletter results. I thought their promotions were pretty predictable with $25 off $100 and the change of pace should grab the attention of subscribers that have become accustomed to their promos.

With our email marketing at Detailed Image we always try to keep it fresh and change it up so it doesn’t get mundane with unique promotions like our Easter egg promo. There are limits to what we can do but we work with what we got.  You got to keep your subscribers engaged and see value in staying subscribed to your newsletter.

Thumbs up to the creativity and new look at SportsAuthority.com.

Comments (2)