I’ve had the eBook for a little while now but have only recently had the time to start reading it and thought it would be a good time to get started as you can now get hold of the eBook version yourself. The first chapter by Paul Boag is great as it really encourages you to try and understand the ‘why’ of a redesign by focusing on the business reasons and whether you actually do need to redesign or simply realign for now. I can’t wait to read the rest.

So Samsung, was it worth it? Your product won’t sell as well, but you won’t piss off one of your biggest component customers either. I understand the motivation, but I still feel like you’ve sold your soul.

You mean the same soul they basically stole from Apple?

Fantastic carved wood effect created using Photoshop layer style by Diego Monzon. Check out the rebounds on Dribbble of other people using this effect.

Get it here: http://dmonzon.com/freebies/carved-wood-panel-free-psd/

Look, it’s hard to build a great mobile experience with complete content and features. It takes careful thought and planning. But the obligation of design leaders is not to say, “don’t bother.” It’s to provide guidance on how to do it well. Responsive design, adaptive design, progressive enhancement, and progressive disclosure give us the technical tools we need to create a single website that works well on all sites. We’re still learning to use those tools the right way. Just because it’s a design challenge to use them correctly doesn’t mean we shouldn’t strive to do it right.

Spot on. Something I basically tweet a few days ago:

If we all listened to Jakob Nielsen, we would never move the web forward.

— Tom Kenny (@tkenny) April 10, 2012

See the demo

You may have noticed I released my latest theme here on Inspect Element. It’s called Expressive and I thought it would be a good idea to show you around.

The aim of Expressive is for creative people to express their work effectively. It’s great for web designers, photographers, graphic designers and any other creative work. The demo shows off photography work but it can easily work just as well for other styles of work.

Homepage

The homepage is setup as a WordPress page template which you can easily set up as your home page by going to Settings > Reading and selecting the static page you’ve created.

The homepage is then created entirely by widgets in a simple to use format I’ve laid out for you to see below:

That’s it, very simple and easy to use.

Widgets

Here are the widgets as seen in the demo with a little bit of info about them each:

You can see more screenshots on the theme page.

Theme Options

The theme options included with Expressive include:

• Easy Logo Upload (with optional text alternative)
• Colour Scheme — choose between light or dark themes
• Main Colour Choice — choose the main colour in the theme (default of light blue)
• Contact Form Email Address — where the contact form data gets sent to
• Footer Text — insert information you would like to include in the footer here

Portfolio Custom Post Type

The portfolio section is setup as a custom post to make it easy to manage for you and ties in with it’s own widget which you can see in the diagram above.

Two Extra Themes Included for Free

The ultimate version of Expressive includes Origin Ultimate which includes Origin Classic completely free and for a limited introduction time is only $15, which is only 50% of the full price.

Support Inspect Element

Buying a WordPress theme, such as Expressive, is the absolute best way to support Inspect Element. You’ll also get support for the themes you buy incase you encounter a problem.

If you have any questions at all, please let me know and I’ll answer as soon as I can.

Demo

Step 1

The HTML

<div class="stack">
	<img src="image1.jpg" />
</div>

Unfortunately WebKit generated content isn’t supported on the img element currently so we have to wrap a div around it to get it to work. It may work in the future as noted in the spec:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Step 2

The CSS

.stack { position: relative; z-index: 10; }

/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

This is how to create the first example you see in the demo. The simple illusion that there are a couple of images hidden underneath the one you can see. Very simple. Creating the other examples is merely a case of rotating the :before and :after elements a little.

/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	transform: rotate(2deg);
}
.stack.rotated:after {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}
.stack.twisted:after {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}

/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.stack.rotated-left:after {
	-webkit-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	transform: rotate(-6deg);
}

We can even then reset them on hover so it goes back to the original style.

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}

It’s important to note that currently only Firefox supports transitions on :before and :after (the transitions are defined earlier in the page on the pseudo elements themselves) as far as I know. WebKit doesn’t seem to support it in any incarnation at this point but hopefully will add it sometime soon.

Expressive is a responsive portfolio and blog theme that works well for all types of creative work including photography, web design and graphic design combined with a great looking blog style. You can choose your main colour and dark or light styles in the very easy to use theme options.

See the demo

See the demo

• Fully Responsive

  Expressive is fully responsive and works great at all resolutions especially the iPhone and iPad. To see this in action, simply resize your browser while viewing the demo.

• Design Focused

  Inspect Element themes are highly focused on great design which shines though in the minimalistic style of Expressive allowing the content to take centre stage.

• Support

  You get support with any theme you buy from Inspect Element. You will receive instructions on how to get support for Origin when you receive your download.