Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. This tutorial will show you how to create a cross-browser responsive design with HTML5 & CSS3 media queries.
Recently I've joined a group of artists to support Japan earthquake relief efforts. Each artist contributed a piece of art work dedicated to raise funds. The artworks will be displayed and available for purchase at the To Japan with Love (Facebook event) art show which is organized by Linda Nakanishi. All proceeds from the show will be donated to Canadian Red Cross.
I have two FITC conference tickets to give away. For those that don't know about @FITC, it is one of the biggest conferences and workshops dedicated to web designers and developers. The event will take place in Toronto between May 2nd to 4th. I will be attending the conference as usual. Here is your chance to win a free ticket. You just need to tweet a message to enter the contest (read this post for details). If you are interested in purchasing tickets to the event, I have a special coupon for you: enter "webdesignerwall" to save $100.
Due to a number of requests, I'm writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top. View the demo to see it in action.
I'm givingaway a brand new iPad 2 at Themify.me to promote the new buy 1 get 1 free WordPress theme special deal. To enter the iPad 2 Giveaway Contest, all you have to do is to help to spread the word by tweeting a message: "iPad Giveaway: @themify now offers buy 1 get 1 WordPress theme free. Tweet this message to enter the contest. Details: http://bit.ly/e5YVun".
One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is not focused (it clears the field on focus). This is a nifty feature, but it is not supported by all browsers yet. This tutorial will show you how to use Modernizr to detect if placeholder is supported, or else use jQuery to display the fallback placeholder text dynamically.
Today it is my pleasure to have a quick interview with Jamie Kosoy who is the associate technical director of Big Spaceship. He is also one of the speakers at FITC Toronto which is coming up soon. In this interview, Jamie is going to tell you a bit about Big Spaceship and their workflow. He is also going to shares his thought on Flash v.s. HTML5.