Video: Look over my shoulder as I build this site

This post features a step by step video that walks you through the setup of the Modern skin to mimic this site's layout

Rating: 5 (out of 5)
youtube

Click here for Part 2 of the Video

I begin with a fresh WordPress install and use Clickbump JumpStart Pro to build out the initial site architecture. From there, I walk you through the setup and build the layout for you to follow along step by step.

Responsive Google Ads

screenshotThe Modern skin is ideally suited to local business, blog and authority websites that need to have cutting edge style, mobile support, quality search engine signals and world class speed.

Clean design that reigns in attention

The design of this skin is inspired by the “Flat UI” concept that has appeared most prominently in the new Windows Metro UI as well as Apple’s forthcoming iOS7 user interface.

The addition of the new ClickBump version 6.5 “Above Header” widget container allows these widgets to be placed neatly to the right side of the header area.

This skin utilizes the new “FlexSlider2” slider that has been integrated into ClickBump since version 6.5. FlexSlider2 provides for a full width, responsive enabled slider for your sites.

For the live demo site, I’ve created the three slide images in Photoshop. If I choose, I can use these same images regardless if I’m using FlexSlider2 or the ClickBump default slider.

The images have been created with transparent backgrounds and saved as 24bit png files (slide1.png, slide2.png, etc) at a size of 1024×300. Because FlexSlider2 automatically adjusts to fit the image’s height, I don’t have to specify a slider height in ClickBump’s slider options panel as I would with the ClickBump default slider.

Creating the slides in Photoshop

honeypot-ps

By knocking out the image background, it creates the effect that the graphics are floating above the page. This gives the appearance of a full width slider filling the entire width of the screen. Check the live demo site, its a pretty dramatic and neat effect that’s super simple to create.

Use TinyPNG to Compress PNG Images for Faster Downloads

tinypng

The tinypng.org PNG image compressor reduced a 376.3kb image down to 88kb, a 77% reduction in size!

Although their transparency effects are unmatched, transparent png images take up more space than compressed jpgs of the same size and content. To account for this, make sure to run your PNG images through the tinypng.org image compressor to reduce file sizes and maintain speedy pages. The tinypng algorithm is as close to magic as it gets. The compressed images can be as much as one third the size of the original with no apparent loss of quality. The resulting files are often smaller than comparable jpeg file sizes (and jpg does not support transparency).

“Modern” also takes advantage of the new “Above Header” widget container. This allows easier display of the text message and social icons within the header area. To accomplish this, I just drag/dropped a ClickBump Text(1) widget over into the widget container as well as a ClickBump Social icons widget and the default Search widget.

The skin already has custom css which correctly formats these widgets in place, including the responsive layout on mobile. Of course, I edited the social icons markup to point to my specific social landing pages.

Send to Kindle

About the Author…

This is the new Author Box widget. Your gravatar.com image will automatically be placed here if your blog/site email address is on file there. To enable the social sharing icons, just enter your twitter, facebook, google+ and linked-in page urls under "User > Profile".

Back to Top