30 Great Interactive Sites 35

30 Great Interactive Sites

I apologize for not posting on the Wall for the longest time, but yes, I'm still alive (just been busy with Themify). Today I have an awesome post to share — 30 great interactive sites. HTML5, CSS3, and Javascript have opened up many design possibilities. Web design nowadays is very interactive, it is no longer limited by static layouts. The 30 sites listed below demonstrate great examples of interactive web design. It ranges from simple transition effect to cool parallax scrolling to rich media presentation such as music audio and videos. Enjoy!

CSS: Responsive Navigation Menu 43

CSS: Responsive Navigation Menu

Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked to toggle, this menu toggles on hover which is more user friendly. It also has an indicator to show the active/current menu item. It works on all mobile and desktop browsers including Internet Explorer!

View Demo Responsive Menu

Responsive Column Layouts 33

Responsive Column Layouts

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn't require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

View Demo Responsive Column/Grid

Setting Breakpoints in Responsive Design 96

Setting Breakpoints in Responsive Design

Lately, I've been blogging a lot about Responsive Design. I've covered the technical side of media queries, basic implementation, full design tutorial, some CSS tricks, and a list of awesome responsive sites. Today, I want to talk about setting breakpoints in responsive design. How should you set the breakpoints? What is the general guideline? I'm going to share my view on setting breakpoints.

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