I’ve have two FITC Toronto 2014 conference tickets to giveaway and all you need to do is send a tweet for your chance to win. For those who don’t know about FITC Toronto, it is an annual technology and creativity event over three days with 80 plus speakers and 1200 attendees from around the world. Everything from UX design to 3D printing to Illustration to OpenFrameworks to JavaScript to pitching your business and more will be covered. And don’t forget about the evening parties! Top names this year include design phenom Stefan Sagmeister, a 98 year old graphic designer Hal Lasko, Robert Wong the Co-founder and Executive Creative Director of Google Creative Lab, and so many more.

Themify has come a long way since its launch 3 years ago, and I thought it was finally time to redesign the Themify website. The goal of Themify is to make it easy for anyone to build a beautiful, responsive website using WordPress and Themify themes. This means that we need to stay ahead of web design trends, and I thought that the redesign should reflect our desire to incorporate the latest and greatest practices found in the design world right into our website. This post will take you behind the scenes around our planning and decision making process, as well as some of the work that didn’t make the final cut for the Themify website.

WordPress is one of the most ubiquitous content management systems in the world. Even better, it’s open source! However, as an open source piece of software, it can be vulnerable to malicious individuals digging through code and finding vulnerabilities in the code, which they attempt to exploit. As such, WordPress sites have been prone to security breaches and being hacked, and having your WordPress site hacked can be damaging to your reputation and your business. At Themify, we often hear about WordPress security issues from members, thus it inspired us to share this article.

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!

This tutorial will show you how to create an interactive map of the world you can use to display travel photos. In the process, you’ll be introduced to Raphael.js. It is a small JavaScript library that makes it easy to work with vector graphics. Instead of using HTML5 Canvas for interactive animations, it uses SVG (for modern browsers) and VML (for IE8 and earlier). This means that Raphael.js looks great on modern browsers and mobile devices, but degrades gracefully and is functional on legacy browsers. Because it is written in JavaScript, it’s very easy to integrate with other elements in the DOM. This makes it a great choice for all sorts of interactive animations and a useful tool to add to your skill set.

Note: this is a guest post by Chris Youderian.

I’ve got two FITC Toronto 2013 tickets to give away and all you need to do is send one tweet for your chance to win! For those of you who don’t know what FITC Toronto is, it is a design and technology conference that brings together some of the world’s best digital creators for three days of learning, networking and partying, and it will all be taking place from April 21-23. This year’s event will feature over 70+ renowned digital creators from around the globe, covering everything from user experience to the awe-inspiring world of Film Holographic VFX. To enter for your chance to win a festival ticket, all you need to do is tweet the name of one of the speakers by Apr 5, 2013 with hashtag #designtechcon to enter.

Winners will be announced on Twitter, so be sure to follow @fitc and @nickla.

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!

Mobile design is rapidly changing, and so the techniques also evolve. Checkout my newer tutorial on Responsive menus for 2017 and onward here.

The Purpose

The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display.

the purpose of responsive menu

This trick is more useful on navigation with a lot of links like the screenshot below. You can condense all the buttons into an elegant dropdown.

the purpose of responsive menu

Nav HTML Markup

Here is the markup for the navigation. The <nav> tag is required to create the dropdown with the css property absolute position. I will explain this later in the tutorial. The .current class indicates the active/current menu link.


<nav class="nav">
	<ul>
		<li class="current"><a href="#">Portfolio</a></li>
		<li><a href="#">Illustration</a></li>
		<li><a href="#">Web Design</a></li>
		<li><a href="#">Print Media</a></li>
		<li><a href="#">Graphic Design</a></li>
	</ul>
</nav>

CSS

The CSS for the navigation (desktop view) is pretty straight forward, so I’m not going to get into the details. Note that I specified display:inline-block instead of float:left for the nav <li> element. This allows the menu buttons to be able to align left, center or right by specifying text-align on the <ul> element.


/* nav */
.nav {
	position: relative;
	margin: 20px 0;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #999;
	line-height: 100%;
}
.nav a:hover {
	color: #000;
}
.nav .current a {
	background: #999;
	color: #fff;
	border-radius: 5px;
}

Center and Right Alignment

As mentioned above, you can change the alignment of the buttons by using text-align property.


/* right nav */
.nav.right ul {
	text-align: right;
}

/* center nav */
.nav.center ul {
	text-align: center;
}

Internet Explorer Support

HTML5 <nav> tag and media query is not supported by Internet Explorer 8 or older. Include css3-mediaqueries.js (or respond.js) and html5shim.js to provide fallback support. If you don’t want to add html5shim.js, replace the <nav> tag with a <div> tag.


<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Responsive

Now here comes the fun part – making the menu responsive with media query! Read my previous articles on responsive design and media query if you are not familar with responsive design.

On 600px breakpoint, I set the nav element to relative position so I can place the <ul> menu list on top with absolute position. I hide all <li> elements by specifying display:none, but keep the .current <li> displaying as block. Then on the nav hover, I set all <li> back to display:block (this will produce the dropdown list result). I added a check icon graphic on the .current element to indicate it is the active item. For the center and right alignment menu, use left and right property to position the <ul> list. View the demo to see the final result.


@media screen and (max-width: 600px) {
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none; /* hide all <li> items */
		margin: 0;
	}
	.nav .current {
		display: block; /* show only current <li> item */
	}
	.nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	.nav .current a {
		background: none;
		color: #666;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background: url(images/icon-check.png) no-repeat 10px 7px;
	}

	/* right nav */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}
	
}

View Demo Responsive Menu

«< 4 5 6 7 8 >»