I’ve just released a couple of new skins for ClickBump theme, “Honeypot” and “Stones”. The skins both take advantage of some of the new features and functions in ClickBump 6.5
You can see live demos of each of the new skins at their respective “test drive” sites:
“Honeypot” – the perfect skin for local business sites
The addition of the new ClickBump version 6.5 “Above Header” widget container allows these widgets to be highlighted at the top of every page on desktop and mobile.
This skin utilizes the new “FlexSlider2” slider that has been integrated into ClickBump 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 as PNG files with transparent background knockouts. This enables some really interesting image/background integration possibilities.
The images have been created with transparent backgrounds and saved as 24bit png files (slide1.png, slide2.png, etc) at a size of 980×299. 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
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
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).
Honeypot also takes advantage of the new “Above Header” widget container. This allows easier display of the text message and social icons above the header. 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.
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.
“Stones” – A new news/review skin for ClickBump owners
The Stones skin is inspired by RollingStone.com and comes in fixed width as well as fluid width layouts. The default skin is a fluid width layout that expands to fill up the available screen width. The “alt” version provides a traditional 977px wide fixed width layout that is centered within the screen area.
Stones would be the perfect skin for a news or review site. Its layout lends itself to text heavy content and editorial reviews. As with all clickbump skins, the built in ad integration makes monetization a snap when you are ready to turn ads on.
Both of these skins are mobile responsive out of the box. You can preview them on iPod, iPad and Android at their respective live demo sites.