Tips for Crafting Simple and Usable Website Navigation Menus

Most designers would agree that it’s crucial to understand the purpose of navigation. Understanding what a typical visitor is looking for can influence the design itself. But you also need to construct layouts in an easy-to-use fashion that serves a greater purpose.

website wireframe sketch user interface vimeo video page

26 Web Design Tutorials for Learning New CSS3 Properties

Over the past few years a number of prominent CSS3 tutorials have been published online. These are perfect for beginners who don’t have a lot of experience coding webpages. But developers who do have that experience may also find the more detailed articles quite insightful.

Take a look over this collection of posts related to newer CSS3 properties. There may be some you’re already familiar with, and others that you’ve never even heard about before. CSS3 provides developers with many different solutions used to solve individual problems. Also if you know any other great posts I’ve forgotten you can share with us in the post discussion area.

CSS3 Box Shadow Effects

various css3 box shadow effects tutorial

How To Code a Hidden Author Bio Display using jQuery

I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.

So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:

hidden author bio display hover tutorial screenshot

How To Design Custom Pricing Plan Tables with HTML5 and CSS3

Any company selling a service with payment plans usually breaks up the structure into different packages. Smaller packages will cost less but also provide fewer features. Pricing tables are the perfect UI component to display these packages in an easy-to-compare design.

For this tutorial I want to demonstrate how we can create pricing tables with just a bit of HTML5 and CSS3. Despite the name, I haven’t actually used any <table> elements within the design. You might feel these are easier but they also depend on a rigid formulaic structure. Pricing tables can have many facets including service terms, plan details, pricing details, and of course the purchase/signup button.

custom designed html5 css3 pricing tables tutorial open source

Live DemoDownload Source Code

How To Code an Image Zoom Hover Display with jQuery

For typical e-commerce websites you will often notice a detailed photo display when hovering an image. The zoom effect helps prospective buyers to see more of the product when deciding if it’s worth purchasing. This familiar image zoom effect can be applied to many other websites just to provide a better user experience.

In this tutorial I want to introduce a very simple jQuery plugin called EasyZoom. It’s all free and open source to download right from Github. The tool makes it super easy to create your own image zoom panel, which can appear on mouseover or be tied onto another event handler. Check out my live sample demo to get an idea of the final product.

Essential Features for Building a New WordPress 3.7 Theme

When you sit down to develop a modern-day WordPress theme you’ll typically be following some design mockup, or at least an idea in your head. This can be a challenge at times when you don’t want to think much about the customizations. But any good WordPress theme should be comprised of a number of key points.

usb wordpress logo theming featured image

In October 2013 the newest WordPress 3.7 release was announced with plenty of new features. Not many updates will directly impact themes, yet it is a marvel seeing how far this platform has advanced since version 3.0. In this article I want to go over some of the core fundamentals you should think about including with every new WordPress theme. Especially for premium or free themes designated for commercial use by hundreds of different webmasters.

Building a Single-Page Dynamic Website using AnimateScroll.js

Sliding parallax websites incorporate animation with page sections to build a very unique experience. Over the past few years I have found a large number of parallax designs wrapped into a single webpage. Notably this parallax interface may be hard-coded from scratch, but there are lots of free open source plugins to do the job quicker.

In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations. Keep in mind this definitely isn’t a tough concept to implement. But you should have an understanding of page hierarchy and CSS positioning or it gets confusing fast. Check out my live demo example to see exactly what we are making.

jquery animate scroll library single page tutorial preview screenshot

Introduction to A/B & Multivariate Testing in Web Design

Anyone who is familiar with increasing website conversions has probably heard about A/B testing. It is a way for webmasters to display 2 variants of the same page out to their audience at random, and then gauge results based on user performance. A/B testing(or split testing) is very popular on sites where users are more interactive on the page. Think about projects like social networks, SaaS products, e-commerce shops, business portfolios, etc.

split testing ab dribbble shot philip clark

There is also a higher stage of this process called multivariate testing. Here you can include more than just 2 options which may range out to A/B/C/D+ testing. The concepts are all similar but you’ll need to run tests for longer in order to acquire accurate results. In this guide I want to introduce the idea of split testing and how webmasters or project directors can get started.