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)

Pure Adapt has a newly redesigned website and it’s first official job offering. It’s an exciting time as we embark in our search for the next Pure Adapt employee.

Redesign
The Pure Adapt website has never really come into play for our business, but with a new job offering our site needed a revamp to present to our potential candidates. With the recent release of HTML5 and CSS3 we had to push these new standards and features into our redesign.  Another thing that is relatively new that we incorporated into our design was a responsive design that adjusts accordingly to your screen size.  Try it out yourself, go to PureAdapt.com and resize your browser screen and watch how the site changes. Coming soon I will have more detailed posts about HTML5, CSS3, and responsive design techniques used in the website redesign. Overall everything came out fantastic as the sum of the parts from each one of the owners came together to build a better and complete Pure Adapt website.

Job Offering
Now to the job that we’re offering. This will be one of Pure Adapt’s most important hires. He or she will be number five and I’ve always said this is our most important hire. The position that we are offering is the Sales, Marketing, and Customer Support Specialist for DetailedImage.com. This hire is going to be vital to our company as Detailed Image is growing beyond what our current staff can handle. We offer a great opportunity to work with an up and coming company with benefits and flexibility. If you’re in the Upstate New York area and interested check out career page at PureAdapt.com/careers/ for more details.

Again these are exciting times as we grow and continue to hit new levels every day. Stay tuned for more about the redesign of PureAdapt.com.

Comments (0)

Earth Week started this week and I want to share this creative Earth Day designed newsletter from stock image site Dreamstime. I love the creativity in this email showing the drop down menu with the save option with our lovely Mother Earth in the background.  Make sure you click “Save”, Earth Day is April 22nd.

Also check out Detailed Image’s Earth Week Sale featuring Eco-Friendly detailing products and here is our very own Earth Week design.

In the spirit of Earth Week, also see my previous green posts. Happy Earth Week!

Comments (0)

Exciting happenings at LockerPulse. The LockerPulse Chrome App recently launched with the Chrome Web Store opening. Credit to Adam for making the LockerPulse Chrome App happen and to be part of the Google Chrome Web Store launch. For more details on the LockerPulse App launch check out Adam’s post.This is just the beginning of LockerPulse and there’s lots more to come.

LockerPulse now also offers the ability to change your background or upload your own background for premium members. Give your LockerPulse aesthetic brilliance by customizing your background. Check out my Frank Gore background. Looks pretty dang sweet doesn’t it. This is a very simple way to customize your LockerPulse. Quick tip, you can easily find great backgrounds from your favorite teams official website.

For a free LockerPulse account follow my promo link. Don’t miss out it’s for a limited of time only.

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)