Posts Tagged ‘graphic design’

JQuery: Hiding And Showing Part Of A List

I’ve encountered many situations where I don’t have quite enough space to show all the items in a list, but I still want them to be available. The best example I can give of that is actually in my sidebar to the right! You’ll notice my popular posts and blog categories show less than half of the full list. I definitely wanted it to be easy to access all the categories and my most popular posts, so I didn’t want to have to limit the list. I also didn’t want to make my sidebar overwhelmingly long, causing my skyscraper ad to get pushed to the bottom of the page and below the main content entirely. The best solution was to use JQuery to automatically hide some of the list items, and then toggle them on hover.

This tutorial is a little bit different, but not by much. Instead of using the hover, we’ll actually use a link that needs to be clicked. The hover introduces an extra layer because you have to handle the hover on the list and the hover on the "view more" text added underneath. With a link, you can avoid that extra layer. Here’s an example of what we are making:

  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7
  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7

And more importantly, here’s how it works. First you’ve got to start with some HTML, a list in particular, either ordered or unordered. It is important to have the full list show by default without javascript. We’ll make sure that only if a user has javascript enabled on their browser will we hide any list items (because they wouldn’t be able to show them without javascript).

The HTML:

<ul class="collapse">
     <li>item number 1</li>
     <li>item number 2</li>
     <li>item number 3</li>
     <li>item number 4</li>
     <li>item number 5</li>
     <li>item number 6</li>
     <li>item number 7</li>
     <li>item number 8</li>
     <li>item number 9</li>
     <li>item number 10</li>
</ul>

Next, we move on to the javascript. Just to clarify for anyone that missed the post title, this requires the JQuery library, so make sure to include that! After that, this code is really quite simple actually. The first thing we’ll do is add a wrapper div which we’ll be using to manipulate the visible height of the list. Then, when the document has finished loading, we’ll immediately collapse the list to the desired height (in this case 45px), and add a link to show the hidden items. By using this method, we’ve made sure that the list is still accessible to those without javascript.

After that, we’ll write a function to get run on the click event of that link we inserted. It’ll check, if the link has the class “expanded”, then collapse the list to the given height, change the link text, and remove the “expanded” class. Otherwise, the list will get expanded to its full height, the link text will be changed, and the “expanded” class will be added.

The Javascript:

$(document).ready(function () {
	$('ul.collapse').wrap('<div class="collapseWrapper" />');
	$('div.collapseWrapper').css({ 'height' : '45px' }).after('<a href="#" class="collapseMore">view details . . .</a>');
	
	$('a.collapseMore').click(function () {
		if ($(this).hasClass('expanded')) {
			$(this).prev().animate({ height: '45px' }, 500);
			$(this).text('view details . . .').removeClass('expanded');
		}
		else {
			$(this).prev().animate({ height: $(this).prev().find( 'ul.collapse' ).outerHeight(true) }, 500);
			$(this).text('hide details . . .').addClass('expanded');
		}
		return false;
	});
});

And finally, you’ll need some CSS to define the wrapper div, and basic styling of the list and link.

The CSS:

ul.collapse{  }
ul.collapse li {  }
div.collapseWrapper { overflow: hidden; }
a.collapseMore {  }
a.collapseMore:hover {  }

It really isn’t that bad is it? Now if you want to expand on this, you can. I actually wrote a JQuery plugin to collapse lists to a given number of list items because I felt the hard-coded height was a little bit hacky. It is free, and very easy to implement with just a single line of code! Questions and comments are welcome.

Mobile Friendly Design

To make a successful website, user experience is vital, otherwise users feel alienated. By offering what users need, without getting in their way, they’ll be much more likely to return – a key metric in determining website usability. As technology advances at an ever increasing rate, the internet must adapt to that technology (and visa versa). Depending on what type of website you are working on, you should expect anywhere between 5 and 25 percent of your traffic to access it on a mobile platform. It is important to keep in mind what “mobile” is typically used to describe. Tablets are lumped into the mobile category, which I personally think is a mistake. Tablets have one thing in common with phones – they use touch. However, the more important factor in my opinion is screen size. The difficulty that arises in using a fully functional, non-mobile website on a small screen is accuracy. It is difficult to accurately enter fields (like email addresses or passwords) and just as hard to click on incredibly small links. For this reason, it is vital to put effort into a mobile friendly website (mostly for phones, but a little for tablets).

There are some easy steps you can use to do this, and here are a few to put you on track:

1. Add in the appropriate meta tag. It is helpful to tell devices how to render your website. Start with a viewport tag to tell a mobile device how to orient a page when it’s loaded. It also determines if a page can be scaled larger or smaller and if it should rotate as the user rotates their mobile device.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

2. Make bookmark branding work to your advantage. If you want users to be able to add bookmarks to your website on their iOS device homescreens, you need to make yet another favicon. Remember the favicon? The favicon handles what browsers show in their address bar and bookmarks folder. Then, there is the alternative webclip icon, which Apple uses when someone bookmarks a website on their homescreen. The default if you don’t define the image is a screenshot, which is never a good idea. The solution? Make a 129×129 pixel image that you want to represent your website. Think of it as a larger favicon. You can tell iOS devices to use your webclip icon in two ways. One, name your image apple-touch-icon.png (exactly) and put it in your root folder. Or two, tell the devices where to find the image if you aren’t going to put it in your root with the following two link tags:

<link rel="apple-touch-icon" href="FILE LOCATION" />
<link rel="apple-touch-icon-precomposed" href="FILE LOCATION" />

3. Think about file sizes. When using mobile devices, often times people are mobile, making their internet connections slower and potentially spotty. Don’t make it hard for them to load your site with excessive HTML, Javascript, and CSS. But even more importantly, do whatever you can to shrink any images you want to load, and use them sparingly when you can. Code your site intelligently with multiple classes to keep your CSS and HTML clean. Compress your images before you upload them using one of many online or downloadable tools. Don’t include Javascript just for the hell of it, only include it if it will significantly improve your user experience.

4. Consider the difference between hover and click. This is an important one. A lot of usability principles hinge on the feedback you provide to users for their actions. One of the most common feedback techniques used is the hover effect. However, the hover effect doesn’t exist on touch devices (almost all mobile devices nowadays). So, you need to compensate in your design. Where previously, a link may have been fine without an underline because it had a hover effect indicating it was a link, you may want to employ underlines in an effort to be a little clearer for mobile devices.

5. Most importantly, decide between a completely separate mobile website and different style rules. This is the biggest decision you’ll have to make. You have two choices, make a totally separate website (m.example.com versus example.com), or apply a different set of style rules when accessing the website on a mobile device. For large websites that have a lot of functionality, I’d suggest the separate website because most likely they’ll have to cut out certain functionality that is more difficult to use on a small screen. However, for smaller and more simple websites, you should strongly consider just applying simpler styling rules. This option is the one I’ll talk a little bit more about for now.

Start by coding your website intelligently (as I mentioned in point 3). Think about how your want your page layout to be for both desktop viewing and small screen viewing. Using that knowledge, write your HTML so that your CSS can switch the design easily between each version. I assure you, this is a much easier task than it might sound if you know your HTML and CSS well. Take the CSS Zen Garden as proof of that concept. If you write your HTML well, then CSS can make completely different websites come to life. Then, apply the appropriate rules to your mobile version versus your standard version using one of two tactics. You can set the media parameter in your link tag in the head of your document like so:

<link rel="stylesheet" href="FILE LOCATION" type="text/css" media="only screen and (max-width: 480px)" />

Or, if you prefer only one CSS document, you can include all of your mobile only rules inside of the following HTML:

@media only screen and (max-width: 480px) { ALL CSS RULES GO IN HERE }


Either of these two options will trigger the CSS you add when the screen width gets below 480 pixels. If you are curious about how the iPhone 4 handles screen resolution in comparison to the older models, check out this interesting article which points out some more detailed icon information. This 480 pixel requirement could easily change when the iPhone 5 is released, and it certainly isn’t a catch all for all Android phones (such as the Galaxy Note), but it does a pretty good job. If you are curious, you can trigger the mobile version of my website by shrinking the width of your browser screen down to 480 pixels.

Hopefully, this information should set you up to make a relatively friendly mobile website. Of course, it isn’t full proof, so you should always test on as many devices as possible… but it is a start! Good luck.

Photoshop, Illustrator, And InDesign: What’s The Diff?

The Adobe Creative Suite is an amazing (albeit expensive) tool. In reality though, it is comprised of over a dozen different pieces of software that all have unique functionality, purposes, strengths, and even faults. For my web and graphic design needs, I think that three specific pieces of software are particularly relevant. I use Photoshop, Illustrator, and InDesign on a daily basis, but for different reasons. Need to know the difference between these three pieces of Adobe software? Want to know what to use each one for? Read on!

Adobe Photoshop
Photoshop is a great tool, but people often use it for the wrong reasons. Photoshop is a raster based software, meaning it works on a pixel based level. Images built using rastor based software can easily become pixelated, but that can be avoided. Photoshop is ideal for editing pictures/photos but not ideal for images with text, or for designing layouts for web or print.

Adobe Illustrator
Illustrator is hands-down my favorite of all the Adobe products out there. You can produce pretty much any type of image or file from it, so I use it to produce all of my web graphics, web designs, and even documents. Illustrator is different from Photoshop in that it is a vector based software, meaning instead of working on a pixel level, it works using lines. You can zoom in and out as much as you want from whatever you make in Illustrator, and it will never lose it’s detail. Now when you output that into a rastor based image such as a jpg, you may end up with some pixelation, but when resizing within Illustrator, you’ll never lose that detail. If you continuously resize your image in Photoshop, you will certainly distort it. So all of this makes Illustrator great for producing web graphics, documents, and full page designs, but not so great for working with photographs.

Adobe InDesign
InDesign is most commonly used for complex book layouts. What I personally tend to use it for is actually to produce pdf presentations. As a designer, I much prefer pdfs over any other document type such as a Word document or Powerpoint presentation as I think they appear more professional. InDesign is a vector based program just like Illustrator, and has much of the same capabilities, but focuses it’s strengths on multiple pages and master pages. This allows you to make a master view for your presentation or book (i.e. logo in the bottom right corner, page numbers, et cetera) while also allowing you to customize each page. I wouldn’t advise InDesign over Illustrator for anything but books and presentations simply because you do lose some functionality from Illustrator.

To help you decide between software options, try out this table:

Project Description Photoshop Illustrator InDesign
Editing Vacation Photos
Editing Photos To Print
Editing Photos To Post Online
Creating An Icon For The Web
Creating An Image For The Web
Creating An Image With Text
Creating A Document For Print
Creating A Document For The Web
Creating A Website Design
Creating A Multiple Page Document
Creating A PDF Presentation
Creating A Book Layout

If you have any specific questions or examples you’d like to ask about, don’t hesitate to ask!

GIF, JPEG, and PNG: What’s The Difference?

Not a graphic designer? No problem! You can still easily master when to use different types of images for different purposes just by understanding some of their individual benefits! So find out below what each image type is good for:

GIF: Graphics Interchange Format
Images with a .gif extension are commonly used for the web because they compress quite well. They function by allowing you to restrict the number of colors that make up the image, with a maximum of 256 allowed. GIF images also allow for layering, which is commonly used to create moving images that you may often see in the form of internet ads or moving smiley faces. GIF images also allow for transparency so that items can be seen that appear beneath them.

JPEG: Joint Photographic Experts Group
Images ending in a .jpg or .jpeg extension are the most versatile images around. They have different levels of compression and are compatible with both RBG and CMYK color formats, making them suitable for both web and print. They have no color limitations, which can make their file sizes much larger than GIFs.

PNG: Portable Network Graphics
Images ending in .png only allow the RGB color format, meaning they are not suitable for print. Their biggest benefit is fantastic transparency capabilities that GIF images can’t match. They also tend to have a large file sizes because their compression isn’t always as successful as that of GIFs or JPEGs.

To help you decide what format to use for your images, try out this table:

Image Description GIF JPEG PNG
Black & White Photo
Full Color Photo
Black & White image for print
Color image for print
Small Icon
Image w/ just text
Moving image
Image w/ complex transparency
i.e. curved lines or drop shadows
Image w/ simple transparency
i.e. straight lines

If you have any specific questions or examples you’d like to ask about, don’t hesitate to ask!

Branding A Website

When making a website, it is very important to consider branding. If you want the website to be memorable and recognizable to it’s visitors, there needs to be a level of consistency and impact across the whole site. To do this, I have a few suggestions to follow below:

1. Logo and Favicon: Designing a logo can be very difficult, but it is incredibly important. The logo will serve as a reminder to your user, wherever in your site they may be, that they are on YOUR site. Any print materials that reference the website should also have that logo to help your users with that association. If you are designing a logo yourself, try doing it in black and white first, then add color, because it should be able to stand on it’s own without color. Keep it simple too. Some of the most recognizable logos (like IBM or Apple) couldn’t get any simpler. Once you’ve done that, don’t forget to create a favicon! The favicon is that tiny 16×16 pixel icon that shows up in your favorites/bookmarks list, browser tabs, and sometimes the URL textbox too. To turn any square icon into a favicon, use this favicon generator. Then, include the following in your head:

<link rel="shortcut icon" href="images/favicon.ico" />

2. Color Scheme: Picking a color scheme is really important for your branding. You want to select a small set of colors that remain consistent across your website, logo, and any print materials that are related to the website. I’d suggest first selecting a single color and then if it is easier for you, you can use color scheme generators that are available for free online. There are tons out there, but I’ve found a few for you here: Color Scheme Designer, Color Schemer, or Color Toy.

3. WWW Redirect: This phrase refers to how your website appears whenever you market it off the website, as well as the actual URL you actively use to point to your website. Any website can be written as both http://www.yourdomain.com OR http://yourdomain.com. Any user can type either one, and you’ll end up at the same place. However, it is important to select one and stick with it for two reasons. One, as I’ve mentioned in a previous post about SEO, I explained that search engines can actually see those two different URLs as two different websites, which reduces your traffic, which reduces your search results. Two, selecting one of these will help your users remember the site, and reduce any confusion with the less computer literate. FYI, here’s how you force your website to use the www version or the non-www version:

Insert the following into your .htaccess file:
The WWW Version (http://www.yourdomain.com):

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]

The Non-WWW Version (http://yourdomain.com):

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [R=301,L]

In both cases, remember to replace "yourdomain" with your actual domain name.

Well, that’s all for now. Good luck!