Wireframing for web design is the art (yes, art) of creating a visual template upon which you will build your site. Taking the time to wireframe the components of your website before actually leaping into action will not only save you a bucket load of time, but it can increase exposure, improve SEO and enhance user experience. This should be a bit of therapeutic exercise; a way to get your feet wet and try different things out.

Of course, I’m an obsessive designer, and I don’t like moving forward until I have everything meticulously planned out. But for the sane among you, here are a few tips to get you started.

Use a simple layout…

Your first step is to figure out what you want your basic layout to be. Your wireframe will contain the main idea of your page. You don’t have to go into specifics, keep it bare bones. In general, you will have content that you want to feature above-the-fold (meaning what you see on your screen immediately) and below-the-fold (what you have to scroll down for). Make sure you have your logo, social media accounts, newsletter sign-ups and some great content above-the-fold. If people are intrigued by what they see up top, then they are way more willing to keep looking.

…but be thorough

When you create your website wireframe include every item you want to have on your page. If you think that you may be putting some ads on your site, then leave room for them on your sidebar. You can also place boxes below-the-fold for recent posts, portfolio content or your mission statement. Before you even start your wireframe, you should sit down, take a deep breath and make a list of every bit of information that you want to convey to your visitor. As you organize your wireframe, check to make sure everything on your list has been included.

Featured Content

When thinking about what to put above-the-fold you should ask yourself the question: what is my website all about? You want your reader to get an immediate impression of the information you are trying to convey. Generally this will mean inserting featured posts or videos right up at the top, with a small about us blurb (see image). This post should be up to date and high quality. It’s goal is to draw the reader in and make them keep looking. If you increase the size of your featured content in your wireframe, you can engage your reader quickly and efficiently.

Screen Resolution

I’m actually surprised that this isn’t brought up more in discussions of wireframing as it is a major issue for web designers. The basic problem is that all computers look different. Some have wider resolutions, while some are relatively small. The best way to plan for this is to create at least 2 wireframes at variable widths. The first will be for a fairly large width, let’s say 1024px. There should be borders that line each side to accommodate this extra width. Then take a smaller resolution, something under 800px. I chose 728px, as it is a relatively common screen size. Some boxes in your design will have to be pushed down, and the menu will be collapsed.

Note: Many designers plan for mobile application as well. The standard width for this is 328px. However, your mobile site will most likely require a revised design with some change, such as horizontal menus and condensed boxes.

SEO (Search Engine Optimization)

Believe it or not, wireframing can significantly improve the SEO of your site, even before you start building it. For instance, it is in your wireframe that you will begin to layout your navigation. Make sure to include keywords that are integral to your website in the top-level navigation. I’ll say that again because it bears repeating. Major keywords for your site should be heavily featured right away, and above-the-fold. Can people order chocolates and flowers from your site? There should be a link on your nav bar to “Order Gifts.” If you are a filmmaker don’t simply put “About,” write out “About Film Title.” This is an important part of on-page SEO, an underutilized resource. Make notes in your wireframe about where to feature keywords, where to place your mission statement, and what kind of content you want to feature and significantly improve your search results.

Tools

You can use a simple pen and paper to start your wireframing but for the more technical savvy (which I suppose you are) there are plenty of tools out there to help you. HotGloo and MockFlow are two tools you can use straight from your browser. They allow you to drag and drop items, draw different shapes and add text. There are also a couple of desktop apps that you can get which install right on your computer like Balsamiq, but I wouldn’t recommend these because they usually cost quite a bit. Personally I use a program called Pencil Project, which works right in your Firefox browser, or download it straight to your computer (Win/Mac). Pencil has preset page sizes, multiple web pages, and a drag and drop interface.

The best way to figure out which one is best is simply to try them out!

Similar Posts:

None Found

Here’s a few tips on how to start building your audience from scratch.

• Set a Schedule – Your first step is to build up material on your site. Set a regular schedule that you know you can make every week. You don’t want people to come and find that you only have a few sketchy and sporadic entries. But you also don’t want to write too much all at once, that’s a sure way to burn you out. Want a safe number? Start out at about 2–4 a week, and then see if you can build from there.

• Put Your Best Piece Out There – Once you’ve built up a backlog of material, you want to sift through what you have and try and identify your strongest piece. You’re looking for a piece that is 100% original content and maybe on the longer side. The idea of this article is to bring readers in, so they will be inclined to check out other parts of your site. Once you have your article, try submitting it to article aggregators like Digg or Reddit. And if you think you have something especially strong, try submitting to Technorati or Suite101 which have fairly large audiences already. If you can get your article on one of these sites, you will see a major traffic spike that you can take advantage of.

• Start a Newsletter – If you want to make sure that people keep coming back, you better plan on starting and sticking with a newsletter. Send out a newsletter once every week or two with a list of the best articles they might have missed and an exclusive tidbit of information. And if you send it out, make sure that you are keeping consistent. People like regularity, and if you are reliable, you can build trust, and readers will get used to opening your e-mails. If you look to the right of this article, you will see a sign-up for our own newsletter. We offer up blog advice for our regular readers which can’t be found on the site. Services like MailChimp can help you get started for free.

• Give Away Something – You may also notice our 7 day course on “Planning the Perfect Blog.” If you sign up for our newsletter, you get access. You’ll get some great advice and a video series all for the price of nothing. Offering a free incentive is a great way to collect newsletter sign-ups or social media likes. There are plenty of plugins to get you started, and services like Topspin that can help facilitate the process. Filmmaker Cory Mccabe uses Topspin to give away a part of his film on his website if you sign-up for his newsletter. It’s a win-win situation.

• Use Social Media Wisely – Read any marketing article and the writer will inevitably rave about the power of social media. And they’re right. But it’s easy to see how oversaturated the most popular social media platforms have become. Twitter and Facebook users have become bombarded with an onslaught of invites and requests that they must constantly fend off (not to mention 25% of your Twitter followers will be spam bots). You should absolutely create an account on both of these services and push out content when you can, but also explore some niche social media tools. Are you in the business of crafts or recipes? Check out Pintrest. Pop-culture-centric? Try GetGlue. There are tons of new sites popping up every day, and even though their communities are smaller, you can often connect on a much deeper level.

• Network, Network, Network – Extend your network outside of your website’s metaphorical bubble. That doesn’t just mean social media, which is more or less a one way street. You want to branch out as much as possible so people start recognizing your name. Reach out to authors of blogs that you follow and see if they would be interested in a guest post. Visit community forums and take part in some conversation. It might be one of the most tired pieces of advice on the Internet (and with media in general) but it’s not always what you know, it’s who you know. And the more you put yourself out there, then somebody higher up may just get to know you. Next thing you know, they’ll be endorsing your services to their immense audience.

• Create A Loop – We live in a Web 2.0 world and if you’ve been following my advice thus far, you are putting out a lot of different content in a lot of different places. The trick is to make sure that no matter where your content lands, there’s always a simple way to be redirected to your site (and in most cases, vise versa). Putting a hyperlink to your website on your social media profiles, adding a byline at the end of guest posts and using a signature with your website link on forums all helps to increase visibility. You should also be adding share buttons to your posts, which allow people to post your article to social media networks. You may also want to include a direct link to your most popular outlet on your sidebar. If you are using a CMS, there are tons of plugins to help you with this.

• Solicit Feedback – Whenever you write an article, or push content out on Facebook or Twitter, try and get your audience involved. Remember, without them you’re just throwing things out into an abyss. You can put mini-polls up on your website or Facebook to generate some audience participation. Or ask for help on a new project. You should be trying to make your readers feel like they are part of the process. Make sure to respond to any comments that people post, and ask about your progress. Incidentally, what do you think of my advice. Did I leave something super important out?

• Don’t Get Bogged Down By Numbers – Analytics describe the ability to track the progress of your site, and hone in on your audience demographic. You can see where people are coming from, how long they are staying and if they are coming back. The most popular tool for this is Google Analytics, which can be easily interfaced with any site. But don’t let numbers run your life. You might post a trendy article and see a traffic spike for a few days, but it may not last long. That’s okay. It’s more important to track how many comments you are getting, newsletter sign-ups you have and how well you are communicating with your social media fans.

• Be Completely Transparent – Recently, Louis CK wrote, directed and produced his own stand-up special. He then made it available to his fans for $5 with no strings attached. In 12 days, he made over a million dollars. Even more recently, Tim Schafer asked fans for donations to make an adventure game that publishers wouldn’t give him money to make. He used Kickstarter to get the funds, and has made close to 2.5 million dollars. The main similarity between the two, apart from being insanely good at what they do, was an honest and open conversation with fans. Louie detailed the exact amount that he made to his fans, and listed out exactly how he was going to divide it up. Schafer has been updating his blog and Kickstarter page constantly with new developments and enthusiastic appeals to his fans. People like being part of a process, and they like it even more when you are completely honest with them. The best advice I can give to an up and coming blogger is your audience reflects your content. If you cultivate an online ecosystem that is friendly and open,  you’ll be surprised how many people will latch on.

Similar Posts:

None Found

Using Video Sharing Sites with WordPress

You’ve probably heard of a site called YouTube. The site has hundreds of millions of users and billions of videos. It also gives you a great way to share your video with a large audience, while satisfying your desire to host this video on your own site. And there are tons of other video sharing sites, like Vimeo or Blip, which have their own built-in communities. The advantage of using a video hosting site, rather than hosting them yourself, is not only the large amount of space on your server you will save, but the built in SEO that comes along with it. Keep in mind, YouTube is one of the most trafficked (and sometimes the most) sites on the web, and that’s the kind of exposure that any young blog can use.

Uploading to YouTube is a pretty painless process. Just click “Upload” at the top of the page when you are signed in to your account.

From here you can upload your videos. Just follow the steps on the screen. Make sure to fill in all the information, such as title, tags and description. You can use the description box to link back to your site. Other video hosting sites have a very similar process.

For those with a little bit of HTML knowledge, the quickest way to embed this clip on your site is to copy the share code from your clip and then post it into the HTML section of a post or page.

In your Edit Page window, select the “HTML” tab to edit the source code and copy in your video embed code.

Of course, this method can get a little lofty if you have a lot of videos that you would like to put up. You will probably want to install one of the many plugins that are available.

Using Plugins To Embed Videos

There are lots and lots of different plugins that you can use to embed videos from the sparse to the robust. I will go over a couple of my favorites here, and show you how to get started. Keep in mind, the most expandable and flexible plugins may give you the most options, but you also run the risk of slowing your blog down.

WP YouTube Player

As its name may suggest, the WP YouTube Player plugin is very simple and easy to use. It supports resizing of your videos, color customization and autoplay functionality. And all you need is your YouTube video’s ID (that random set of numbers and letters at the end of its URL).

To install the plugin, click “Add New” from the Plugins menu in your admin panel. Search for “WP YouTube Player” and install the first result. Make sure to activate the plugin after you have installed it.

Once you have installed the plugin page, select the new “WP YouTube Player” option from Settings on the left side of your admin panel.

This will bring you to an admin page for the plugin. If you are not an advanced user, most of these settings should be left at their default, but you will see a list of “Embed Options” which allow you to turn on and off autoplay, allow for fullscreen and HD or show related videos. These settings will stay the same for every video you embed using this plugin.

To insert your video into a post or page on your actual WordPress blog, you can use the shortcode [tube]. A shortcode is a bracketed word that can be used in the WordPress’ Visual post editor which calls a plugin. In this case, we will be inserting our YouTube ID within the brackets, so our video will look like [tube]wO4HJOf_DGU[/tube] . Make sure to close the brackets with [/tube] after you have entered your ID.

Viper Video Quicktags

Viper Quicktags is a little bit more adaptable than WP YouTube Player and supports Vimeo, Google Video, Dailymotion and about a dozen other video hosting websites. It also has more customization options and an easy to use user interface. But it is a very big plugin, and may interfere with other video themed plugins you have installed. Installing this plugin is the same as before, except search for “Viper Video Quicktags.” In your Settings panel, you will see a new option for “Video Quicktags.”

In this admin window, you can change the default settings for the plugin. Video Quicktags works by adding a button to your WYSIWYG editor that can be used to add videos (you can also use shortcodes). When you first open the admin you will see a list of video sharing sites, a “Show Editor Button?” check box, and a few attributes for each. Whichever video hosting service(s) you are using, you should select the show editor button, otherwise you can uncheck them so that you do not overload your WYSIWIG editor. I, for instance, only use YouTube and Vimeo.

You can use the panel at the top to customize players for YouTube, Google Video, DailyMotion and Vimeo. For each player you can change the players theme, turn on HD (if the video host supports this) and autoplay, and define basically every embed parameter. As I said, the plugin is very customizable.

To insert a video click on “Add New” from the Post or Page setting on the left side of your admin panel. Once you are on the edit page, you will notice that there are several new icons added to your WYSIWYG editor (depending on which you selected to show editor button).

Click on the button corresponding to the video host you are using. Enter in the URL of the video you wish to embed, and set the dimensions. If you are unsure about your videos dimensions, you can either check the Embed option on YouTube (see above) or leave them at their default. Click “Okay” to insert the video into your post or page.

Hosting Your Own Videos

You also have the option of circumventing video sharing sites altogether and hosting them yourself. There’s a variety of reasons why you may want to do this.

1. Your videos are for a private,  discerning audience
2. You don’t want other people stealing your videos
3. You have the technical know-how to pull it off

If you fall into the last category, then go forth and conquer, but if you don’t there are a couple of ways to get started.

HTML5 vs. Flash Video

For years and years, video on the web was almost completely Flash based (flv files). They allow for the highest quality compression and smallest file sizes. Recently, however HTML5 players have become more and more popular. These use .mp4 files, which offer similar compression rates with the added bonus of being mobile friendly and easier for video editors.

So now there are some browsers that support HTML5, like Firefox and Safari, some that support Flash, like Internet Explorer, and some that support both, like Google Chrome. Until this transition is complete, you will need an HTML5 player with a Flash fallback. What this means is that the player will detect what the compatibility of the browser being used is, and use either a HTML5 or Flash player accordingly. If the browser supports both, it will use a HTML5 player by default. So these days, in order to embed your own video, you need to have both an .mp4 and a .flv version of your movie. For a good all around converter click here.

JW Player for WordPress

The JW Player for WordPress will provide you with a way to set up a fallback player. First install the plugin like you would any other. Search for “JW Player for WordPress” and install.

Once the plugin is activated you can visit the “Settings” page which is now under the JW Player header on the left side of your admin panel. You will see options that are very familiar, but most of them should be left at their default setting.

Before you can add a video to your post or page, you have to upload the proper files to your WordPress blog. You will need three files.

1. An .mp4 version of the movie
2. A .flv version of the movie
3. A thumbnail image for the mp4 file.

Once you have these, click on Media from the left side of your Dashboard and select “Add New.” Click “Select” Files and upload these four files, then click “Save All Changes.”

Now click “Add New” from the Post or Page option in the Dashboard. Select the “Add Media” Button from the WYSIWYG Editor. From the top tabs select “Media Library.”

Navigate to your mp4 file and click it. You will see a list of options pertaining to the JW Player.

Under thumbnail, select the image file. Under HTML5 file select your mp4 file. Under Download File select your flv file. Set the thumbnails for both images. When you are finished select “Insert JW Player.”

This will insert the proper shortcode into your post and you will be all ready to go!Similar Posts:

None Found

Assuming you do understand the importance of typography (and you really should) then your selection will be as obsessive as mine. Remember, you don’t want to mix too many fonts together on the same page. It will make everything look cluttered. Pick a font that suits your image best and stick with it. Your logo and body text will probably be different fonts, but you want them to complement each other.

There are a couple of different ways to incorporate fonts into your WordPress design. All of them use CSS (Cascading Style Sheets), a language used on the web to style your design. For a great overview of how to use CSS you can check out our beginner’s guide, but for the purpose of fonts you will be most concerned with the body tag. The body tag is used to define characteristics that you wish to be uniform across your site (like fonts).

To access your CSS file in WordPress, click on the “Appearance” option in your admin panel and click “Editor.” This will take you to the Editor panel, where you can edit PHP and CSS code.

On the right side you will see a list of files under the heading Templates. If you scroll down you will see the heading Stylesheets. Navigate to style.css (or screen.css in some themes) and click on it.

If you scroll down you a little bit you will find your body tag. It will look a little bit like this:

body {
background: #fff;
line-height: 1;
}

Depending on what theme you are using , this may look slightly different, but the format will be the same. We will use this tag to indicate the font for your site. But first, a little debate to help your decision.

Serif vs. Sans Serif

Probably the most debated topic in the typography community, and yes there is a typography community, is whether to use a serif or sans serif font. A serif font contains little details that flourish each letter, such as horizontal lines at the bottom of an “A” or two vertical lines at the ends of a “T.” Times New Roman is one of the most popular examples of a serif font. A sans-serif font lacks these little details, like Arial or Helvetica. The font you are reading right now is sans-serif, the font in the title and headings are serif.

There are other categories of fonts, such as decorative or script, but these shouldn’t be used for paragraph text because they become illegible en masse.

In some circles, sans-serif fonts are heralded as the most readable and elegant of choices, with Helvetica at the top of the pyramid. They even made a movie about Helvetica, which, by the way, is very interesting if you are intrigued at all by this debate (read: for geeks only). In reality, the serif vs. sans-serif debate boils down to personal preference. I tend to use sans-serif fonts because I like their simplicity, but often not Helvetica because it is too ubiquitous. Your best bet is to choose a font that reflects the personality of your image. Are you trying to portray controlled (sans-serif) or a bit stylized (serif)?

Web Safe Fonts

Since websites are viewed on browsers, there are many fonts that we regularly use in say, a word processor, which a browser cannot read. Luckily there are fonts out there that are cross-browser compatible. These are called web safe fonts. These are free to use and are very easy to implement. They also do not put extra load time into your web pages, which other fonts may do. There are many web safe fonts to choose from, but here are a list of my favorites, and what they look like.

This is Times New Roman. A simple serif font.

Palantino Linotype/Book Antiqua uses serifs a little less.

This is Arial/Helvetica, it is the most basic of the sans-serif fonts.

Tahoma, a slightly more narrow sans-serif font.

Trebuchet MS, not used too frequently but a very even-handed, sans-serif look.

For a full list of web safe fonts click here. From this list, you should select fonts that are labeled as Mac/Windows.

To use these fonts on your WordPress site, we simply need to put the proper code in our CSS stylesheet. You will be adding the font class under the body tag we pulled up earlier. Let’s say we would like to use Arial (Helvetica on a Mac). We would want to define the font-family in our CSS. Under body we would insert the code “font-family: Arial, Helvetica, sans-serif;”. The full body tag would look like this:

body {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
}

In case you were wondering why I didn’t just insert Arial, you have to include the Windows font, the Mac equivalent and its classification. So Times New Roman would look like this:

body {
background: #fff;
font-family: Times New Roman, Times, serif;
}

because the font is called Times New Roman in Windows, Times on a Mac and is a serif font.

Using your font tag, you can also define other characteristics of your font such as size and style (bold or italic). You can also add a color tag underneath to change font color. When listing properties make sure to list style first, then size, then font family. So, let’s say I wanted bold, italic Trebuchet MS font that is green and 10px. I would type this into my stylesheet.

body {
background: #fff;
font: bold italic 10px ‘Trebuchet MS’, Helvetica, sans-serif;
color: green;
}

For the record, it would look like this.

You may have noticed that I put in Helvetica after Trebuchet. If a user’s computer does not have Trebuchet, it will show Helvetica, which is a fairly close sans-serif font.

Google Web Fonts

If web safe fonts don’t offer enough variety for you, you have another option. Google has made many custom fonts available for free use. There are far too many to list (447 and counting) but you can see Google’s web font listing here. The advantage of using Google fonts is near endless variety. The only downside is that there will be some additional load time for your WordPress site. This usually translates to only a few milliseconds, but some fonts take significantly more. For reference, the site you are on right now uses a Google Web Font, and it doesn’t take too long to load now does it?

Once you’ve sampled and found the font you want, click on “Quick Use.” This will take you to a separate page.

The web font page will give you the basic overview of the font. On the left you will see how your font looks and on the right you will see load time. This meter will tell you how much the font will add to your page load. In general you should try to be under about 40 and almost never go over 70. Droid Sans, the font I selected, is at a very safe 26. This will keep your WordPress pages running quickly.

If you scroll down a little bit you will see instructions to copy a piece of code into your header.

In the Editor section of your WordPress admin panel, find the Header (header.php) file on the right side. This will be under the sub-heading Templates. Click on the file to open it in the Editor. There will be lots of code in the header, but near the top there will be a section with several <link> tags. Copy the Google Web Fonts code and paste it into this section. Your code will look like this:

The next step is to go back to your stylesheet (click style.css on the right side) and insert the font-family code. On the Web font page you will see a section named Insert into CSS.

Copy this and insert this into your body tag. Just as before, it may be useful to add a backup in case a browser can’t read the web font. You can also add a font-size tag underneath this.

body {
background: #fff;
font-family: 'Droid Sans', Helvetica, sans-serif;
font-size:12px;
}

Heading Tags

If you scroll down a little more in your stylesheet, you will see that there are many other classes you can customize. One of these is heading tags, shown as h1, h2, h3, etc. These allow you to customize the various headings that are displayed in the dropdown menu in your WYSIWYG Editor.

You can use CSS to modify the characteristics of your font, or insert a new font altogether, into these heading tags. For instance let’s say I want Heading 1 to be bold and larger then my default font (which is now 12px). The code would look like

h1 {
font-size:12px;
font-weight: bold;
}

Or, if I want to change Heading 2 to Palantino Linotype, italic and white, the code would look like.

h2 {
font:italic 12px "Palatino Linotype", "Book Antiqua", Palatino, serif;
color:#FFF;
}

By default, WordPress has six headings, and you really shouldn’t need more, but you can add as needed. Once you have finished defining your heading tags in your stylesheet, select the Pages or Post menu option in your admin panel and select “Add New.” Use the Heading dropdown menu to select which font variation you want to use.

Choosing the right font is extremely important, and you should take some time to think about how it incorporates into your design. Of course, you probably don’t have to spend hours upon hours obsessing over it like I do. But if that happens to be the case, there is inspiration everywhere.

 Similar Posts:

None Found

Installing the Plugin

Installing NextGEN follows the same process as any other plugin. You can do it one of two ways.

1. Select “Add New Plugin” in the Plugin section of the menu on the left of the WordPress admin panel. Search for NextGEN Gallery and click “Install Now” to install and activate the plugin.
   
2. You can download the plugin from the WordPress website and upload it to your server manually using FTP. From the directory your blog is installed, navigate to /wp-content/plugins and upload the unzipped NextGEN folder. Then click on “Plugins” in your admin panel and select “Activate.”

Creating a Gallery

NextGEN will work great right out of the box, so you can go ahead and get started setting up your first gallery right away. You will see that there is a new menu option in your admin panel labeled “Gallery” which is used to manage your galleries. We will go over your various customization options later, but for now you can get started adding images.

1. Select “Add Gallery/Images” from the menu. Type in a name for your gallery in the text and click the Add Gallery button.
2. You will be directed to the media uploader where you can upload any images you want in that gallery. Don’t worry, if you forget some you can always add them later. For now select at least a couple of images and put them into the gallery. You will also see the “Scale Images…” checkbox. If you select this images will be resized to 800x600px so that the gallery outputs a consistent size. It is highly recommended that you size the images with proper crops yourself and leave this box unchecked.
3. From the “in to” dropdown menu select the gallery name that you created and select Upload Images.

NextGEN supports as many galleries as you want to create, with as many images in each one. When creating new galleries, the steps are exactly the same.

Inserting Your Gallery into Posts and Pages

The above steps will create your gallery, but they still need to be inserted into a post or page. Luckily, a button will be added to your WYSIWIG editor that adds the proper shortcode into your WordPress post or page. The button looks like this:  and it will give you three options.

1. Image list (shortcode: [nggallery id=x] ) This is your standard gallery. Image thumbnails will be lined up in a row and clicking on any of them will pop the image up in a shutter box.
   
2. Slideshow (shortcode: [slideshow id=x] ) This will show all of your images in slideshow format with a customizable delay between each one. In order for this to work, there should be no other plugins using jquery installed. If you are having trouble, skip down to the next option.
3. Imagebrowser (shortcode [imagebrowser id=x] ) The imagebrowser shows thumbnails for the gallery below the main image so users can easily scroll through without a lightbox
   

Customizing Your Gallery

Chances are your gallery will look pretty good as is. It has pretty lightweight CSS running behind it, so it will fit into virtually any theme. But if you’d like to get your hands a little dirty there are a couple of options that you can explore. Click “Options” on the NextGEN menu to the left of your dashboard to take a look. You will see a tab up at the top with a variety of options:

1. General Options allows you to add permalinks to your images, which will give them SEO-friendly URLs, activate an RSS feed, change the destination of your image uploads and dictate the maximum number of images per gallery.
2. The Thumbnails option lets you set the size and quality of the thumbnails displayed in your image list or browser. By default this will be 100 x 75, but you change that to whatever fits your theme. The “Set fix dimension” checkbox will keep the aspect ratio of your images consistent.
3. The Images and Gallery options manage the look and feel of your galleries. Remember above when I recommended that you resize images manually? You can change the default resize (800x600) to anything you like. You may have also noticed in the above screenshot that there is a “show as slideshow” option attached to each gallery. To turn this functionality off, unclick “Integrate slideshow” in the gallery tab. In addition, you can change the number of thumbnails displayed and how they are ordered in this tab.
4. The Watermark option can be used to place a custom watermark on all of your images. Simply upload your watermark (as a png, transparent image) and follow the steps.
5. Slideshow is an especially useful option tab. If you are having difficulties with your slideshow, you can try to manually fix them here. I will say that I have had trouble with the slideshow in the past, and the problem is almost always a conflicting plugin, so your best bet is to disable other plugins that use jQuery or Javascript until you find the conflicting one. But if you’re still having an issue, download Image Rotator and upload “imagerotator.swf” to your server. Then define the URL path in the “imagerotator” text box.

Expanding Your Gallery

There are a couple of ways you can expand the functionality of your gallery. For instance, you can change what effects are used to display the images by selecting the Effects tab on the options page. Thickbox and Shutter are two effects that can be used out of the box, but you can use a few others simply by installing compatible plugins. These are your effect options.

1. None – Images will link to the actual image file, which will be shown on a new blank page.
2. Thickbox – A thickbox is a white box that surrounds the image, which will also contain the caption.
3. Lightbox – The lightbox effect houses your images in a thin, lightweight box. To use it, install the Lightbox 2 plugin  and activate it. Then you can simply select the option from the effects dropdown menu.
4. Shutter – Images will flash up in a thin white box with a shadow behind it.
5. Highslide – Highslide is a zooming image viewer which uses a magnifying glass icon. You can install the Highslide plugin and activate it. If you are using Highslide, make sure that you have disabled your lightbox plugin or they will conflict (trust me).  Also note that in order to get rid of the Highslide watermark, you will have to purchase the plugin.

For reference, here’s what each effect will look like:

Shutter

Thickbox

Lightbox

Highslide

NextGEN also comes with a variety of skinned templates that you can use. You can use a shortcode to add these templates. So if you were displaying your first gallery with the shortcode [nggallery id=1], simply tack on a template name such as [nggallery id=1 template=templatename], replacing “templatename” with the template of your choice. The developer has made a full list of templates and demos available here.

Final Thoughts

There are hundreds of directions you can take your gallery in, and this guide will only get you started. Focus on what you want your images to say to your readers, and how they can enhance, not simply stand-in for, quality written content. Galleries are, after all, just one more tool for reaching wider audience (for more ideas about how to do this, check out our free blogging course). Once you get the hang of how to use NextGEN you will find it is very easy to use and manage.

Similar Posts:

None Found