2012 Hudl Up Tour Marketing Materials

Peeps at Hudl contacted me to help them concept and create some marketing materials for their 2012 Hudl Up Tour. It’s been a fun project to work on, and here are the results:

Landing Page

[flickr id=”6920443758″ thumbnail=”medium_640″ overlay=”false” size=”medium_640″ group=”” align=”none”]

http://hudluptour.com/

T-Shirt

[flickr id=”6920451732″ thumbnail=”medium_640″ overlay=”false” size=”small” group=”” align=”none”]

read more

Related Posts:

  • No Related Posts

New Nelnet.com: Sporting an Awesome Responsive Layout

Can a big, publicly traded (NNI) finance company take the lead in adopting latest web practices and technologies? Heck YEAH! On March 21st 2012, our team published the public facing website for nelnet.com sporting an awesome responsive layout, HTML5 and CSS3.

read more

Related Posts:

  • No Related Posts

Horizontal Navigation in a Responsive Layout

If you’re working on a responsive layout website with navigation that contains too many links to display either horizontally or vertically on smaller screens, you may need to implement  a technique where only few links are visible by default and a drop-down is added for the rest of the links.

Once you go through the toughest exercise of deciding which links should be visible at all times, here is a way to execute the design.

HTML

Here is a pretty simple navigation using an unordered list and some anchor tags. Nothing special except an extra <li class=”show-more”> element that will be hidden on wide screens and class “hide” added to the  list items you will be hidden on smaller screens.

The <ul> element also has a helper class “clearfix” added to it, so our nav bar can take care of all the floats.

<ul class="nav clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li class="show-more"><a href="#">…</a></li>
    <li class="hide"><a href="#">Team</a></li>
    <li class="hide"><a href="#">About</a></li>
    <li class="hide"><a href="#">Contacts</a></li>
 </ul>

read more

Related Posts:

  • No Related Posts

Three Everyday Photography Tips and a Book That Will Change the Way You Use Your Camera

Khara Plicanic, my wife, a professional photographer and an amazing educator wrote a photography book, and even though I may be biased, I have to say—it’s pretty
awesome.

In her book Your Camera Loves You; Learn to Love it Back, she not only explains the basics of photography in a simple, concise, and even—entertaining—way, she also brings to light the often overlooked idea that you don’t need a fancy or expensive camera to get great photos. In fact, she says that any camera can be a great camera, if you know what you’re doing.

read more

Related Posts:

Change the jQuery UI button icon based on the buttons state (i.e. checked/unchecked)

I really enjoy working with jQuery UI, however in some case the UI is not as intuitive.

Here is an example:

Let’s say you have a radio input set where you’re asking your users to select one of the options. If you style radio inputs as buttons with a “check” icon, your buttonset will look something like this by default:

[flickr id=”6081175653″ thumbnail=”small” overlay=”false” size=”small” group=”” align=”none”]

If the user selects one of the options this is what happens.

[flickr id=”6081712474″ thumbnail=”small” overlay=”false” size=”small” group=”” align=”none”]

There is a clear difference between checked and unchecked state, however the users don’t know that until they select one of the options. They may simply ignore the selection thinking all options are pre-selected, or they may try to check the one that doesn’t apply.

Better Solution

In some cases it would help to change the icon based on the state of the button. For example, you could use the “close” icon for un-checked state and switch it to “check” icon for the checked state. Click around the example below:

Here is a little code snippet that makes this happen. Please refer to comments for details.

HTML

<div id="better-radio">
		<input type="radio" id="better-radio1" name="better-radio">
        <label for="better-radio1"><span class="ui-icon ui-icon-closethick"></span></label>
		<input type="radio" id="better-radio2" name="better-radio">
        <label for="better-radio2"><span class="ui-icon ui-icon-closethick"></span></label>
		<input type="radio" id="better-radio3" name="better-radio">
        <label for="better-radio3"><span class="ui-icon ui-icon-closethick"></span></label>
	</div>

read more

Related Posts:

Installing Windows 7 Upgrade on a MacBook Air using Parallels

[flickr id=”6007631494″ thumbnail=”medium_640″ overlay=”false” size=”medium_640″ group=”” align=”none”]

After reading the rumors of a new MacBook Air being released together with Lion OSX, I patiently waited to get a much needed laptop upgrade. Now that it’s here, I find myself ignoring my Mac Pro! Everything I need from Dreamweaver to Photoshop runs pretty smoothly on the MBA. I even tried Adobe Premiere for a bit and didn’t have any problems. Although, I wouldn’t recommend buying MBA for video editing purposes.

read more

Related Posts:

  • No Related Posts

CSS Step by Step Menu (Wizard Style)

Here is another way to create CSS based step by step or wizard style menu without any images, just using pure CSS. It works perfectly with themed web apps that need to be quickly and easily updated.

Related Posts:

Write Smarter HTML & CSS

Every time I start working on a new project, I make it my goal to write the leanest and meanest code possible.

Often, it’s enough to ask simple questions such as:

  • How can I execute this with less markup or fewer CSS selectors?
  • Can I use sprites for all images?
  • Is there a better way to do something than what I’ve done before?
  • Would CSS3 work better in this case?
  • How will any back-end code or CMS implementation affect my code?

But what’s better then a list of questions? A list of tips or solutions.

So here it is. Feel free to comment and add to it as you see fit.

HTML/CSS Tips

1. Limit the use of  ID’s for layout sections such as #wrapper, #header and #footer and use them more for JavaScript hooks. Overusing ID’s for layout can create specificity issues and unnecessary duplication of styles.

2. Use Object Oriented CSS. For example, avoid declaring a UL tag based on a location:

ul {...}
.sidebar ul {...}

Instead, assign a class to the UL that is different.

ul {...}
.nav-list{...}

Using this approach, you are acomplishing two things:

  • You are creating completely re-usable styles that can be applied to any UL tag (object) no matter where its located on the page.
  • You improve the site performance. Descended selectors such as .sidebar ul are (marginally) slower. Browsers read right-to-left, meaning that they first find the UL element and then traverse up the DOM until they find a specified parent, in this case the class “.sidebar”.

3. Use sprites whenever possible to reduce number of HTTP requests. Here is an example of a sprite image:

[flickr id=”5886212311″ thumbnail=”medium” overlay=”false” size=”full” group=”” align=”none”]

Sprites can be tricky to create and implement, so here are some techniques that served me well in past:

a. Create one compound selector for each sprite image. This makes your CSS file smaller and easier to maintain.

body,
.button,
.icon,
.box,
.column,
#footer{
background:url(images/sprite.png) no-repeat;
}

b. Create separate sprites for repeat-x, repeat-y and static backgrounds.

For repeating sprite backgrounds, the individual images should have same height (repeat-x) or width (repeat-y). Here is an example of a vertically repeated sprite background:

[flickr id=”5886212231″ thumbnail=”medium” overlay=”false” size=”full” group=”” align=”none”]

Vertically Repeating Background CSS

/* defines background image */
.vertical-sprite{
background:url(repeat.jpg) repeat-x;
}
/* repeats top section of the sprite "green gradient" */
.obj-one{
background-position: 0px 0px;
height:77px;
}
/* repeats middle section of the sprite "orange gradient" */
.obj-two{
background-position: 0px -77px;
height:48px;
}
/* repeats bottom section of the sprite "blue gradient" */
.obj-three{
background-position: 0px -125px;
height:76px;
}

read more

Related Posts:

Visiting Marrakech and Camel Trekking in Sahara

Our journey to Morocco started on the luton airport in the UK. We booked two round trip tickets from London to Marrakech for $170 on Ryan Air. While waiting for our flight we met a couple from Morocco who told us about Harera soup, the riad they operated, Marrakech market and the hassles that sometimes go with it. Ryan air prides itself on being on time and from detailed emails to boarding through planes front and back doors, they do everything they can, to make the boarding as fast as possible. The flight was comfortable and only about 3hrs long.

read more

Related Posts:

  • No Related Posts

Portfolio: SAT Words You Embed in Your Head iPhone App

SAT Words You Embed in Your Head just got approved by Apple and is available for purchase. It’s by far the best app I worked on so far. Award-winning Cartoonist & Digital Design Director Martha Gradisher created all cartoons,  5280 Solutions developer wrote the code  and I created the graphics and designed the UI for it.

For best cartoon presentation, readability and usability I decided to force landscape orientation of the device.

[flickr id=”5799036208″ thumbnail=”medium_640″ overlay=”false” size=”medium” group=”” align=”none”]

read more

Related Posts:

  • No Related Posts
Page 1 of 812345...Last »
© Copyright Emir Plicanic - Theme by Pexeto