Creating a Modern Lightbox with CSS3 and JavaScript 59

Creating a Modern Lightbox with CSS3 and JavaScript

Today we have a guest post by Andy Walpole sharing his experience from creating the Lightbox Ultra on Mozilla Demo Studio. Several years ago developer Lokesh Dhakar created the familiar Lightbox script with Prototype and script.aculo.us. It's smooth animation and sleek aesthetics were an instant hit in the web design community and it was used on a multitude of different projects.

View Demos

5 Useful CSS Tricks for Responsive Design 124

5 Useful CSS Tricks for Responsive Design

Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design.

View Demos

Giveaway from PSD2HTML 246

Giveaway from PSD2HTML

If you follow Web Designer Wall, then you have noticed the PSD2HTML banner ad on the sidebar. PSD2HTML is not only my long time supporter, but they are also one of the most recognized vendors in PSD slicing services. Today I'm happy to partner with PSD2HTML to give away PSD to HTML slicing services to you. We are giving away 5 prizes (worth $200 each). To win one of the prizes, leave a comment to this post. The giveaway ends on May 31, 2012.

Update: the contest is closed and the winners are: David, André, Andrew, Donna, and John.

Free Base WordPress Theme 136

Free Base WordPress Theme

Although WordPress has made it very easy to create a custom WordPress theme, but it still takes time to learn and build it. So I've created a Base theme based on the free Basic theme from Themify. I've stripped out the framework and the extra functions that you might not need. It includes only the basic styling, responsive design, custom menus, and widgetized sidebar. This Base theme is intended to let you build your custom themes using it as a foundation. The main goal is to save your time and simplify the work flow. It is great for non-coders and quick client works.

Download Base Theme

Mobile Navigation Design & Tutorial 118

Mobile Navigation Design & Tutorial

One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I'm going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery.

View Demo Mobile Nav

Design Process of ShopDock 60

Design Process of ShopDock

Today I would like to share the design process of an ecommerce theme that I recently designed. Shopdock is an Ajax ecommerce theme where the user can quickly add/remove items to the cart with a single click. It is actually inspired by one of my sites, IconDock. The design process was quite challenging to make an Ajax shopping cart with a responsive design. I will explain why certain design directions are taken to handle the design challanges for both desktop and mobile.

Montreal Meets Ticket Giveaways 46

Montreal Meets Ticket Giveaways

A friend of mine, Francois Hoang, is organizing a design conference called Montreal Meets in Montreal, Canada Apr 7, 8, 2012. The speakers included Fabio Sasso, Shelby White, Radim Malinic, James White, and Scott Hansen. I have two tickets to giveaway. Comment in this post before March 23rd, 2012 for your chance to win one. If you are interested in purchasing tickets, I also have a 20% discount code for you: webdesignerwall.

4 Fantastic Years of Themify! Enter FANTASTIC4 coupon code to save 40% everything at Themify