UIKit’s Shortcomings

From day one, iOS developers have been struggling to alert users about simple warnings and errors that may not interrupt the flow of the app. Popping up UIAlertViews requires the user to click a button to move along, which wasn’t quite necessary for warnings that merely limit useability. Adding a UILabel somewhere on the screen isn’t consistent and doesn’t always look great.

Maybe you just have some more information you want to inform your user about. Simply adding it to the screen is sufficient, but what if your information is added off screen? How does your user know it has appeared? TweetBot found a great solution to that. By overlaying a simple panel, with an icon, title, and message, the flow of the app is uninterrupted, yet informs the user in a concise manner.

Imitation Is The Greatest Form Of Flattery

YRDropdownView is a simple and versitile class that will increase the visibility of information relating to your app in a stylish way. YRDropdownView draws inspiration from such libraries like MKInfoPanel, MBProgressHUD, and DSActivityView and fills the gaps where these classes left off.

Usage

herever you want to use YRDropdownView, import the header file as follows:

#import "YRDropdownView.h"

Basic

You can create your dropdown by calling the singleton method:

[YRDropdownView showDropdownInView:self.view
                             title:@"Warning"
                            detail:@"Danger Will Robinson. You cannot do that."];

By default, calling the above method will only dismiss when clicked on. To dismiss manually in your code, call:

[YRDropdownView hideDropdownInView:self.view];

Customizing

There are many different ways to customize the alert by calling different singleton methods:

+ (YRDropdownView *)showDropdownInView:(UIView *)view
                                 title:(NSString *)title;

+ (YRDropdownView *)showDropdownInView:(UIView *)view
                                 title:(NSString *)title
                                detail:(NSString *)detail;

+ (YRDropdownView *)showDropdownInView:(UIView *)view
                                 title:(NSString *)title
                                detail:(NSString *)detail
                              animated:(BOOL)animated;

+ (YRDropdownView *)showDropdownInView:(UIView *)view
                                 title:(NSString *)title
                                detail:(NSString *)detail
                                 image:(UIImage *)image
                              animated:(BOOL)animated;

+ (YRDropdownView *)showDropdownInView:(UIView *)view
                                 title:(NSString *)title
                                detail:(NSString *)detail
                                 image:(UIImage *)image
                              animated:(BOOL)animated
                             hideAfter:(float)delay;

+ (BOOL)hideDropdownInView:(UIView *)view;
+ (BOOL)hideDropdownInView:(UIView *)view animated:(BOOL)animated;

+ (YRDropdownView *)showDropdownInWindow:(UIWindow *)window
                                   title:(NSString *)title;

+ (YRDropdownView *)showDropdownInWindow:(UIWindow *)window
                                   title:(NSString *)title
                                  detail:(NSString *)detail;

+ (YRDropdownView *)showDropdownInWindow:(UIWindow *)window
                                   title:(NSString *)title
                                  detail:(NSString *)detail
                                animated:(BOOL)animated;

+ (YRDropdownView *)showDropdownInWindow:(UIWindow *)window
                                   title:(NSString *)title
                                  detail:(NSString *)detail
                                   image:(UIImage *)image
                                animated:(BOOL)animated;

+ (YRDropdownView *)showDropdownInWindow:(UIWindow *)window
                                   title:(NSString *)title
                                  detail:(NSString *)detail
                                   image:(UIImage *)image
                                animated:(BOOL)animated
                               hideAfter:(float)delay;

+ (BOOL)hideDropdownInWindow:(UIWindow *)window;
+ (BOOL)hideDropdownInWindow:(UIWindow *)window animated:(BOOL)animated;

Notes

Label and Background Customization

Currently, the title and detail labels, as well as the yellow background, are static for all dropdowns. Customizing these features are a TODO for this project.

Automatic Reference Counting (ARC) support

ARC support has been neglected in part for now. Your contributions are more than welcome, however. If you want to use YRDropdownView in an ARC project, just add the add the compiler flag:

-fno-objc-arc

to all YRDropdownView files in your project.

Project on GitHub

For the cutting edge releases and outstanding issues, we’ve set up a GitHub repository to keep everything in order. Feel free to post any code related issues or contributions there in addition to in the comments below. We’ll also be doing minor releases there from time to time without making full blog posts. Enjoy!

Twitter Integration Made Easy

With the release of iOS 5 on Wednesday, a flurry of new features became available to developers. From hot new features like iCloud and iMessage to Android-like notifications, one standout new feature for developers is the addition of an entire Twitter framework, allowing developers to access the Twitter-verse in a much easier way. In prior iterations of iOS, developers needed to add in third-party libraries to authenticate Twitter accounts, post tweets, search for hashtags, and so on. With the new Twitter.framework, iOS takes the wheel from the developers’ apps for the heavy lifting.

This tutorial will let you learn the basics to implementing the new Twitter framework into your iOS app to create and post tweets. By the end, you’ll have a simple app that will let you tweet any given message, link, or image!

Overview

The Twitter.framework has a pre-built modal view controller for presenting the user with a quick tweet, named TWTweetComposeViewController. This “tweet sheet” is a quick way for developers to post text, images or links from within their app, without bouncing out to Safari or the Twitter app.

iOS 5 has a new Accounts framework as well, which allows for a neat and tidy way to store usernames, passwords, etc. Apple has taken the initiative to package the Accounts framework into the new Twitter framework. This means that if an iOS 5 user logs into Twitter in any Twitter-using applications, his credentials can be stored into the iOS Settings and are able to be used by other apps as well.

What if our user is not logged in to Twitter when they get our extravagant tweeting app? Well, that is up to us as the developer to handle. For this example, I’ll show you two different ways to handle this situation. The first is to just let iOS notify the user that they need to be logged in to tweet. The second is to just not let them tweet at all. The decision is up to you! So let’s get started.

Getting Started

Since this tutorial involves new iOS features in iOS 5, it is assumed you’re already running Xcode 4+

To begin, let’s work with a simple, single-view based app. Create a new single-view project in Xcode. Let’s call it TweetThis. For the sake of being cutting edge, let’s make sure the project uses Automatic Reference Counting (ARC).

Add Twitter.framework

To take advantage of the new Twitter framework, we need to link our binary with the Twitter library. This is accomplished by clicking on your project in the Navigator sidebar, selecting your project’s target, and going to Build Phases. This should pull up a table with a few items. Click the arrow next to Link Binary With Libraries to expand the options and click the + button to add a new library. Find the library named Twitter.framework in the popup menu and select add button. Your end product should look a bit like this:

Setup your interface

For this example app, we only need a couple UI elements. In your ViewController.xib, add in a button and a label.

The button will say something like “Tweet this!” and will be linked to the action that brings up our tweet sheet.

The label we add is for displaying an error message should the user not be logged in to Twitter. Let’s give this some text like “Not logged in to Twitter” for now. We’ll simply just hide and unhide this depending of if the user can tweet or not.Last but not least, create an IBOutlet for the button (I named mine tweetButton) and label (mine was errorLabel) and an IBAction for the tweeting named tweetButtonPressed for the event touch up inside. Now let’s hit the code.

ViewController.h

Check for availability

At this point, your ViewController.h should look something like this:

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController {
     IBOutlet UIButton *tweetButton;
     IBOutlet UILabel *errorLabel;
}
- (IBAction)tweetButtonPressed:(id)sender;
@end

We should add in one more variable here before moving on. Add in the interface a BOOL named _canTweet. This boolean will keep track of whether or not the ability to tweet is available. What do you mean by “the ability to tweet is available”? It’s two-fold. The TWTweetComposeViewController has a method named canSendTweet. The method returns true should the user be logged in and if the device is able to reach the Twitter service. While this doesn’t mean it’ll return false if Twitter is down (which is rare anyway), it will be very helpful should the user be in Airplane Mode, or not have service, or some similar situation.

With that boolean, our ViewController header should be complete for now. Let’s head over to ViewController.m and get some work done.

ViewController.m

First things first, let’s import the Twitter framework by importing the header for it. Add the following import line at the top of your file:

#import <Twitter/Twitter.h>

Remember earlier when I mentioned that we have a couple of options to handle if our user isn’t logged in to Twitter yet? Let’s use a define to set this. Add the following line right under your import:

#define letOSHandleLogin FALSE

Since we’re going to modify interface items based on tweeting ability, let’s check our ability to tweet by overriding the loadView method as such:

- (void)loadView
{
     [super loadView];
     //Check to see if the user is able to tweet
     /**
     * This part is somewhat optional. iOS will prompt the user to log in to Twitter if they aren't already
     * However, it's best practice to do something similar to this, like show custom alerts, etc.
     **/
     if ([TWTweetComposeViewController canSendTweet]){
          _canTweet = YES;
     }
     if (letOSHandleLogin) {
          errorLabel.hidden = YES;
     } else{
          tweetButton.hidden = !(_canTweet);      //If able to tweet, show button
          errorLabel.hidden = _canTweet;          //If able to tweet, hide error
     }
}

Great! Now at this point you should be able to run your application and depending on whether or not your simulator has a Twitter account setup already, you should see the button or the error message! But that’s just step one. Step two is the fun part: composing the actual tweet!

Composing and Displaying the Tweet Sheet

The last step to creating this awesome tweet is actual composition of the tweet sheet itself. This step is actually quite simple and takes only a few lines of code. Define your IBAction for tweetButtonClicked as such:

- (IBAction)tweetButtonPressed:(id)sender {
     //Create the tweet sheet
     TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init];

     //Customize the tweet sheet here
     //Add a tweet message
     [tweetSheet setInitialText:@"Just learned how to use the #iOS5 Twitter Framework on @buildinternet"];

     //Add an image
     [tweetSheet addImage:[UIImage imageNamed:@"tweetThumb.png"]];

     //Add a link
     //Don't worry, Twitter will handle turning this into a t.co link
     [tweetSheet addURL:[NSURL URLWithString:@"http://buildinternet.com/2011/10/ios-creating-your-own-tweet-sheet"]];

     //Set a blocking handler for the tweet sheet
     tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result){
          [self dismissModalViewControllerAnimated:YES];
     };

     //Show the tweet sheet!
     [self presentModalViewController:tweetSheet animated:YES];
}

Let’s go through this line by line real quick to see what’s going on. First, we alloc-init a new tweet sheet; Objective-C basics. After that, we can customize what the actual tweet is. We can set text with the setInitialText method, add an image with addImage, and add a link with addLink (which will be converted to a t.co link for you by Twitter). Next, we have to set a blocking handler for the result. This is to ensure that we don’t mess up the rest of the app while tweeting until we dismiss the modal view (that is our tweet sheet). The last line displays our tweet sheet! Build and run your app to see the tweet in all its glory.

Wrap Up

I’ve included a sample project for you to learn from here on GitHub. This project is only one example of how to use the Twitter framework. Implement it to your pleasing! Add your own images, craft your own tweets, and bring your app to the next level of the Twitter-verse.

The Basics

I first saw this style slideshow as a Flash solution on Cargo Collective, which has since been updated to Javascript. As it turns out, it’s actually quite easy, making it a quick addition to any site you wish to implement it on.

Here’s what we’ll be doing:

• Super fast slideshow that only runs when hovered over.
• Overlay logo that toggles between two different states depending on hover state
• Inspiration piece for this tutorial: Cargo Collective
• See our end goal by visiting our demo page.

The HTML

This is the structure for each slideshow, with the images are pulled from the unordered list and turned into a slideshow by jQuery Cycle Plugin.

The .link element is where a URL can be provided for when the slideshow is clicked. It is also how we will swap the logo on hovers.

<!-- Slideshow
=========================-->
<div class="slideshow-block">
	<a href="http://website.com" class="link"></a>
	<ul class="slides">
		<li><img src="image.jpg"/></li>
		<!-- Any other slides -->
	</ul>
</div>

The CSS

The dimensions for my slideshow are 200px by 150px. Depending on the sizes of your logo and slides, the below background position coordinates and overall dimensions may need to get adjusted.

• The logo is toggled between the two color variations using the background position hover technique.
• The unordered  slides list is given a class of “active” when hovered over, making it visible on the page.

*{
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
}
.slideshow-block{
	position: relative;
	width: 200px;
	height: 150px;
	overflow: hidden;
	background: #111 url('img/bg.jpg');
}
a.link{
	position:absolute;
	height: 150px;
	width: 200px;
	display: block;
	z-index: 10;
	background: url('img/logo.png') no-repeat center top;
}
a.link:hover{
	background-position: center -150px;
}
.slides{
	z-index:0;
	visibility:hidden;
}
.slides.active{
	visibility:visible;
}

The jQuery

On the jQuery side, we want to accomplish two tasks:

1. Tie the jQuery Cycle Plugin to our list of images, turning them into a slideshow.
2. Swap between pause and play states when the slideshow is hovered over. This means the slideshow is hidden and paused when the mouse is not over it.

<script type="text/javascript">
jQuery(function($){

	// Cycle plugin
	$('.slides').cycle({
	    fx:     'none',
	    speed:   1,
	    timeout: 70
	}).cycle("pause");

	// Pause & play on hover
	$('.slideshow-block').hover(function(){
		$(this).find('.slides').addClass('active').cycle('resume');
	}, function(){
		$(this).find('.slides').removeClass('active').cycle('pause');
	});

});
</script>

Closing

I’ve included two versions of the script, one with the TV and one without (for easier copy and paste implementation). As always, when in doubt, try using the downloadable demos as a foundation to build from.

I look forward to seeing what folks are able to make happen – enjoy!

Note: You are able to place multiple slideshows on the same page, meaning it’s feasible for you to make a gallery out of a series of thumbnail slideshows.

Intro

Over the past few years, I’ve had the pleasure of working on a lot of small gigs as a result of my plugin, Supersized, and our company, One Mighty Roar. I currently average about 3-4 small projects a week, most of them with new clients. Through these experiences, I’ve learned quite a bit about how to run through this process as smoothly as possible.

Our Rules

1. Projects under $1,000 are paid in full before work begins
2. Hourly rates are preferred to project pricing
3. If the project was misrepresented, refund and reapproach
4. Negotiate scope, not price
5. Save time by including a next step in every email

Projects under $1,000 are paid in full before work begins

This is a great way to avoid being held hostage by scope creep.

While it may be different for you, this number represents a little over a days work, which means it should be a relatively quick and painless project. I used to do a 50% deposit and 50% on delivery, but I found myself running into a lot of “Oh, I forgot to mention…” scenarios where additional features are requested and the final payment was withheld as a result. By taking the full deposit initially, you can re-approach any additional requests at a fairly valued rate, rather than have to cram them into an existing budget.

Projects over $1,000 would require a contract, and are a different story entirely.

Hourly rates are preferred to project pricing

There is some debate in terms of hourly rates vs project pricing, but for small projects, there are very few situations where I would feel comfortable with a fixed project price.

All quotes are hourly, this avoids being stuck with hours of unexpected QA beyond what was intended. If you are on a project price and their site code is a mess, you risk facing the “you touched it last, I hired you to make this work on my site, so you need to handle it” moment.

When integrating with their existing site, there is a risk being presented with unusable code which could add to time needed – or worse, be viewed as a problem you caused. For this reason, I always keep original copies of the pages I edit in case they need to be referenced later in the project, regardless of whether or not the client has their own backups.

If the project was misrepresented, refund and reapproach

This should happen the moment you realize you are not looking at what you expected, before you do any work. I have had scenarios where I was expecting to integrate with a static website, only to find it is WordPress and the expectation is that I create a custom plugin to work with an existing format. In most cases, thorough questioning and a clear scope could avoid this scenario, but you can never account for what clients view as”standard” and therefore fail to mention in your email exchanges.

When this happens, I alert the client and offer a refund, unless they wish to allocate additional hours. I typically get a “thank you for being up front with me” or a “there’s no way I’m paying for that, it’s not what we talked about”.

You win some, you lose some, but the important part is that it’s not your job to make the original hour estimate if it requires more work than anticipated.

Negotiate scope, not price

“I’m a startup with limited funding and am not looking for anything fancy – I just need this one simple thing…”

This line really only serves one purpose, it communicates that they are budget-minded, which means if the costs exceed what they were hoping for, it’s time to negotiate scope. It’s your job to inform them of the costs for the project, and if you’re so inclined, potential options within their budget.

Your hourly rate and time spent do not get discounted as a result – wanting more than you can afford is not a problem that falls onto the vendor. Outside the world of service based companies, it would be laughable if a BMW salesman was faced with a person would really “needed” a BMW, but could only afford a Mitsubishi. These debates should not happen and are a waste of time, if you have a simpler alternative, offer it, otherwise give yourself the luxury of declining the project.

Save time by including next steps in every email

Whenever possible I try to include as many questions and actionable items in the initial exchange with a new contact. Often I’ll receive a vague scope, which requires some clarification, but I still make an attempt to quote if possible. If I have a simpler or alternate way of approaching a project, I am sure to include that as an option as well – part of your job is to educate.

“If you meant the following… then it would be X hours. If this is not what you are aiming to do, then could you clarify…”

Giving the potential client a sample of your rates early on helps you avoid a series of project scope emails, only to find out they aren’t on the same page cost-wise.

Red Flags

We have a few red flags that that cause us to disengage with a contact and cut off future work. Every item on this list is backed with multiple personal experiences that could have been avoided – simply put, they are not worth the headache.

1. In-depth questions regarding refund policy.
2. Insisting on a project price with ambiguous scope
3. The promise of a donation if you add functionality specific to their project.
4. Hostility and feeling of entitlement

In-depth questions regarding refund policy

If you’re working at an hourly rate in a service based business, there is no refund policy. Extensive questioning regarding refunding should make you more uncomfortable than a person being a little too curious about your local bank’s security system. If someone has an odd number of questions concerning refunds, don’t engage with that person.

Clients need to respect that they are buying your time, and the results within that timeframe are a byproduct. If they run out of funding or become too ambitious for their budget, they can’t be allowed to view their project as incomplete and therefore demand to refund.

Insisting on a project price with ambiguous scope

Accurate project scope is a must. You wouldn’t expect an accurate quote from a contractor if you said “I want a house with a kitchen, bathroom, and living room – how much will that cost me?” (thank you to our Director of Business Development, Chandler Quintin for this one). The same is true when it comes to websites – I always clarify incoming projects with a simple bullet point list, to ensure nothing is overlooked.

Secondly, I am wary anytime a person requires a fixed price for a small project. While I can appreciate the need to allocate a budget, there is a certain amount of realization that comes with any project. I’ve walked into scenarios where the site code was unusable and would require hours of reworking to get where it needed to be. Even though the scope was clear, I couldn’t have factored in the state of disrepair of the site – something that is easily solved by explicitly stating projects are on an hourly basis.

Hostility and feeling of entitlement

When a potential client becomes abrasive upon hearing your hourly rate or estimate, even if they accept, it will not be a fruitful relationship. If they are greeting your initial estimates with hostility, imagine the reaction if additional QA or hours resulting from scope creep are needed. This is not a parking ticket, they can choose whether or not they want to agree to your rates – and if they do, it should not be a continued point of contention. Almost every time this has happened, the client escalates their expectations beyond what you arranged, based on the fact they are paying more than they anticipated.

“Well fine, if I’m paying that price I expect this to be done within the next 24 hours and you will provide a warranty if there are any problems with my site.”

We have something called the “headache tax”, which is reserved for folks that complicate the process by adjusting timelines, changing project scope, or being high maintenance in general. If you’re spending a good chunk of time fielding emails and phone calls regarding the project, be sure to factor that into your estimate – project management time is not free.

Promise of a donation in exchange for work

I will speak to this only in the context of custom work for an open source project, as it has been covered more than adequately for web design as a whole.

I frequently receive emails that go something to the tune of this:

“Hello,

If you add in this [insert project specific feature here] to Supersized, I would be happy to donate”.

Thanks.

As a general rule for Supersized, when time allows, I add in features that would benefit everyone, based on number of requests I receive for certain functionality. This is free for two reasons: 1) I dictate when I am able to work on it and 2) the features benefit everyone. As soon as either of those criteria are removed, it becomes a paid project.

If you do a few hours of work in exchange for the promise of an unspecified amount of money, you’re setting yourself up for disappointment. Donations are fantastic, but are not leverage to have discounted labor done. You wouldn’t do a job for free in exchange for the promise of future work, and prospective donations are no different.

What Are Your Rules?

While this list is entirely based on my own experiences, I’m curious what sorts of rules you have established for small projects. I’ll look forward to hearing what you folks have as guiding principles in the wonderful world of client work.

Introducing Supersized 3.2

Features

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles backgrounds via slideshow with transitions and dynamic preloading
• Core version is available for those that just want background resizing.
• Navigation controls with keyboard support
• Integration with Flickr – pull photos by user, set, or group
• Head over to the project page for all the details.

New in Supersized 3.2

• Complete rewrite of the Supersized script.
• More options, including ability to prevent slides from being cut off.
• Link directly to slides
• API lets you call functions directly (eg. play/pause, next, previous, and jump directly to a slide)
• Theme files are now separate from base files, which will make upgrades much easier. The Shutter theme is included in each download.
• Flickr is not yet updated to 3.2 (it’s on it’s way)

Inspiration / Sites Using Supersized

I’ve put together a small sample of Supersized sites that I’ve come across recently. Keep in mind, these sites are not necessarily running the latest version, and some are heavily customized. I will be putting together a more extensive list for the project page, so feel free to shoot your site to sam@onemightyroar.com!

Plans for WordPress

I’ve noticed quite a few WordPress themes based on Supersized floating around – I plan on entering into the ring with an official Supersized WordPress theme. While I’m still at the early stages at this point, in the meantime, you should check out WP Supersized developed by the talented Ben De Boeck from World In My Eyes. Note: This plugin is currently using version 3.1.3

Comments and Feedback

Just a reminder, you can follow Supersized on Github, which is were I will publish minor point releases and field any bug reports.

If you have an urgent problem and/or would like to contact me directly to hire for custom work, please email me at sam@onemightyroar.com. For troubleshooting, make sure you have first checked the documentation and FAQ sections on the project page.

Enjoyed this project? Have a look at our Build Internet Projects page for some other stuff you make fancy as well.

Banner image provided by Colin Wojno.
Other photography by Brooke Shaden and Maria Kazvan.

Overview

The idea of a fluid thumbnail bar is simple: Create a list of thumbnails within a space where the overflow can be flipped through page by page. Speaking of pages, make sure we’re on the same one by checking out the demo page.

To be clear, this tutorial is intended to show you how to add this functionality to an existing list of images, in hopes you can use it to compliment whatever your current setup might be. This tutorial assumes you have some level of experience with jQuery.

Features

• Cycle through thumbnails in different intervals depending on container width
• Page arrows only displayed when needed (thumbnails overflow container)

Getting Started

First off, let’s make sure we have a base structure to work with, outlined below.

Scripts

jQuery (surprise!), Easing, and the separate file which will contain our script.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/fluid.thumbs.js"></script>

CSS

Just one stylesheet needed, nothing crazy. For the sake of brevity, I will let you review the stylesheet on your own, which is available in the download.

<link rel="stylesheet" href="css/fluid.thumbs.css" type="text/css" media="screen" />

HTML

Below is the structure of the list which will contain the thumbnails, wrapped in a container.

<div id="thumb-tray">
     <ul id="thumb-list">
          <li><img src="thumb-1.jpg"/></li>
          <li><img src="thumb-2.jpg"/></li>
          <li><img src="thumb-x.jpg"/></li>
     </ul>
     <div id="thumb-prev"></div>
     <div id="thumb-next"></div>
</div>

The jQuery

This is where the bulk of the functionality will be made possible, to get a good sense of what we’re aiming to do, here are the goals:

• Automatically resize the width of thumbnail list to fit number of images it contains (when the window is loaded or resized).
• Calculate how many thumbs are visible within the visible area.
• Cycle through the pages of thumbs when the forward or back arrows are clicked.

The Variables

To make editing easier, we are going to plug the elements into variables. Additionally, we are defining the thumbInterval and thumbPage variables, which store the pixel width of each page and the pixel distance from zero, respectively.

var thumbTray = '#thumb-tray',
thumbList = '#thumb-list',
thumbNext = '#thumb-next',
thumbPrev = '#thumb-prev',
thumbInterval,
thumbPage = 0;

Setup

When the document is first ready, the width of the thumbnail list must be calculated, and then depending whether or not it exceeds to visible area, the thumb arrows are displayed and the pixel width of each thumb page is calculated.

// Adjust to true width of thumb markers
$(thumbList).width($('> li', thumbList).length * $('> li', thumbList).outerWidth(true));

The width is calculated by multiplying the width of one li by the total number of items within the list. The outerWidth function allows us to include padding and margins in our calculation.

// Hide thumb arrows if not needed
if ($(thumbList).width() <= $(thumbTray).width()) $(thumbPrev+","+thumbNext).fadeOut(0);

If the width of the thumbnail list is larger than the thumb tray, then the arrows are needed and faded in.

// Thumb Intervals
thumbInterval = Math.floor($(thumbTray).width() / $('> li', thumbList).outerWidth(true)) * $('> li', thumbList).outerWidth(true);

Similar to how the true width of the thumb list was calculated, we are now figuring out the width of each page of thumbnails, establishing how far to shift the list (left or right) when it is cycled through.

Thumb Navigation

Pages are navigated by adjusting the left property in a positive(backward) or negative(forward) direction. The thumbInterval variable stores what distance is considered a page, while the thumbPage variable stores the total distance from the left.

If the beginning or end of the list is reached, it will automatically spill over to the opposite end of the list. Each page is calculated based on how many complete list items can be visible in the current visible space. We make use of easing for these animations to add extra smooth transitions.

// Thumb Next Button
$(thumbNext).click(function(){
	if (thumbPage - thumbInterval <= -$(thumbList).width()){
		thumbPage = 0;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}else{
		thumbPage = thumbPage - thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}
});

// Thumb Previous Button
$(thumbPrev).click(function(){
	if (thumbPage + thumbInterval > 0){
		thumbPage = Math.floor($(thumbList).width() / thumbInterval) * -thumbInterval;
		if ($(thumbList).width() <= -thumbPage) thumbPage = thumbPage + thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}else{
		thumbPage = thumbPage + thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}
});

Handling Resizes

Since the thumbInterval and thumbPage are calculated when the page first loads, we need to adjust for the fact that when the browser window size changes, those numbers are no longer relevant. In order to keep this simple, when the window is resized, the variables are recalculated and the page is set back to zero.

$(window).resize(function(){

	// Update Thumb Interval & Page
	thumbPage = 0;
	thumbInterval = Math.floor($(thumbTray).width() / $('> li', thumbList).outerWidth(true)) * $('> li', thumbList).outerWidth(true);

	// Adjust thumbnail markers
	if ($(thumbList).width() > $(thumbTray).width()){
		$(thumbPrev+","+thumbNext).fadeIn('fast');
		$(thumbList).stop().animate({'left':0}, 200);
	}else{
		$(thumbPrev+","+thumbNext).fadeOut('fast');
	}

});

Wrap-up & Expanded Script

I've taken the basics of this tutorial and expanded upon them in Thumb Reel, a free script I released that has added functionality such as clicking and keyboard navigation. You can also see this script used in the newest Supersized release, which is what it was originally made for, although it has since been modified.

The way most sites go about sharing via social media is cheap. They treat visitors like blank billboards. Billboards just waiting to republish a title and link to their content. These billboards “drive traffic” to the content, and raise more billboards to repeat the process. At least that’s what the marketing plan says will ideally happen. Just one question. At what stage does the actual person come in?

You Rarely Just “Do”

The genius of people is that they often react to what they experience. It takes a boring person to simply “Go to the beach”. The average person “Goes to the beach, and has a great time” or something similar. Notice the difference?

When you make something no one hates, no one loves it. – Tibor Kalman

Complacency should scare you. Reactions are part of how we communicate. Embrace this when adding a share option for your site. Facebook dabbles a bit in this idea by the binary option of “Liking” Facebook content. The problem with this on most person sites is that it leaves out a whole range of middle ground. The act of liking (or abstaining from) is not definitive. Does someone chose not to like a post because they had issue with it? Or just because they didn’t understand it? The absence of feedback in this case is ambiguous.

One of the features that our team was particularly proud of integrating a ways back was the Twitter feedback bar. You can see an example in use at the bottom of this post. Since including it on our theme, we almost instantly noticed a significant boost in tweets for posts. In contrast, options like “ShareThis” have reached a point on par with banner ads. At this rate, will we develop blindness to plug-n-play social media links too?

In the time since launching the original tutorial, a number of other sites have started to integrate options for meaningful reaction. This means that instead of just reading an article, you can now vote for tone and reaction. You can also see what other people think. Buzzfeed does more of the same.

But is it any good?

Don’t force people to become your billboards. Give them a platform to construct their own way of sharing your content, complete with a full range of reactions. We include negative options in the Twitter feedback bar available on post pages. Saving face is stupid if the result is publishing crap. Negative feedback is just as useful as the positive. Better to have someone tell you via tweet than by wondering where all the traffic went.

Traffic is a Byproduct

Don’t let your site fall into the trap of limited billboard response. It betrays the type of interaction dedicated fans will use. I don’t stop reading a blog if one of the articles sucks. Readership is rarely that fragile. Use the reactions to your advantage. These are the types of share actions that benefit in more than one way. First, the link is shown to more audience. Second, you receive meaningful feedback as to the quality of what was shared. Winning all around.

For your next project, give it a thought. You’ll see realistic responses, and get one step closer to substantial engagement rather than just unfeeling evangelism.

Blogs that Publish

I’m a little late to the party on this one. When Vitaly contacted us a month ago for feedback on their latest release, I started to read through the book casually between client jobs. A few (well-spent) weeks later, here we are. Ready to give the good word.

It’s not every day that a blog grows large enough to start its own line of books. When they do, the result is magic. Similar examples can be found with the recent A Book Apart line put out by the same people behind A List Apart. Publishing is a great progression from standard niche blogs.

There are books that teach concrete skills, and there are those that expose you to abstract stuff that sounds impressive. For those looking to build their skill set, this is a common situation when sifting through resources. Substantial content is hard to distinguish from wordy content at times, and even more so when you’ve just started to learn. Fortunately, certain publishers make this easier for you by developing solid reputations. With this release, Smashing Magazine is slowly becoming one of them.

A good web design book will leave you with some concrete plans, as well as introduce you to more abstract concepts that you can build on in the future. The second Smashing Book is segmented nicely, which means you can jump into any section you want without any issue. All of the chapters are written by folks who pride themselves in being masters of craft for the subject.

A Look at Content

This book is definitely more for the UI/UX folks out there. Hardcore development is not a topic that would fit well within the books flow, so you end up with chapters catering more towards the typical frontend developer. As such, certain chapters are more exploratory than applicable; presumably this is to increase general awareness of the platforms without expecting those same people to be responsible for developing.

The graphic design chapters are some of the best introductions to fundamentals to be published in recent memory. I think everyone has accidentally gotten caught up in trend-based design before. You know the situation: using gradients to decorate an otherwise fine layout, or turning buttons into identical matches of those found on Apple’s website. The graphic design chapter helps distinguish between sensibly made design decisions, and those that just make it “look good” at the moment.

My background is mostly in front-end design, so I may be biased when I say how much enjoyable the usability chapter was. It covered the right bases, especially for those just trying to introduce themselves. Those in digital agencies or web companies will appreciate how candidly the reality of client/project limitations is addressed. Best practice is easy to talk about, but harder to implement successfully when there are other factors in play.

Christopher Kolb’s chapter on the application of game design into UI is a fascinating read. This is a design trend you’ve experienced before without directly noticing. It was a pleasant surprise in topic. Also in this category was Christian Heilmann’s chapter on warning signs in web development. The introduction is a brilliantly candid summary of what it is like to work on real world projects that haven’t (and often can’t) been implemented in 100% proper form.

The chapter on mobile is also a welcome addition. Mobile design and development is one of the largest interactive sections to hit the industry in the past few years. Makes sense to include a new section in this book too. It’s hard to just be a pure “website designer” in today’s market. If it has a screen and people can interact, it’s fair game.

Final Words

This book isn’t timeless, but neither is the average website. Like most things associated with the Internet, it will need updating in a few years. In the meantime, use this book to your heart’s content. You can get a copy on the official web store. If you already have the book, I would love to hear what you’re experience was like. Leave a comment if you can!

Sliding Boxes Revisited

The original sliding boxes tutorial is undoubtedly our most popular tutorial, with about 660,000 views as of this post. Given our recent surge in releasing plugins, we decided to add sliding boxes to the roster – say hello to the Mosaic jQuery plugin.

Features

• Automatically generates sliding boxes & captions
• Allows slide & fade animations with custom directions
• Preloads images within boxes
• Lightweight at ~2kb (minified)

Notes & Comments

Implementation is fairly easy, I’ve provided a number of sample configurations in the downloadable file on the project page. It operates with two panels – an overlay and a backdrop. The content in the overlay gets repositioned according to the options that you provide. I would suggest starting from the base.html file, as it it a stripped down version which can act as a good foundation for customizations.

If you have any questions or feedback, please leave them below – it helps the plugin grow.

Hello, Supersized 3.1

Features

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles backgrounds via slideshow with transitions and preloading
• Core version is available for those that just want background resizing.
• Navigation controls with keyboard support
• Integration with Flickr – pull photos by user, set, or group
• Head over to the project page for all the details.

New in Supersized 3.1

• Complete rewrite of the Supersized script.
• Automatically adds in required elements.
• Added image rendering for faster transition speeds on FF and IE.
• Dynamic image handling (no longer relies on predefined ratios).
• Unobtrusive backgrounds – you no longer need to wrap your content in a special div.
• Many options added, including fit to screen, keyboard navigation, transition speed, and more.
• Created separate script specifically for Flickr – can pull by user, set, or group.

Upgrading from Version 3.0

3.1 cleans up a lot of extra code, which means the majority of the upgrade process entails cutting out extra lines. Here’s the process to upgrade from a clean version 3.0 install:

1. Update the paths to the new JS and CSS files.
2. Remove the #supersized element and #loading (now called #supersized-loader)
3. The default image path is “img/” – make sure this matches your setup or change line 56 in supersized.3.1.js
4. Replace the jQuery which calls Supersized from your page with the new format (“jQuery(function($){ $.supersized …” found in any of the downloadable demos).

If you are experiencing trouble upgrading a clean installation feel free to post below in the comments. If you have done a substantial amount of customization and need help, I am available for hire – details are at the bottom of the project page.

Comments and Further Development

If you are going to use the Flickr version of Supersized, you will need to get an API key, available here. Keep in mind Flickr limits you to 3,600 calls per hour – so I apologize if the Flickr demo on the project page goes down.

In order to keep things loading as quickly as possible, if you make any edits to the Supersized javascript file you will want to minify it when you’re done. There’s a number of ways to go about this, but I’ve recently become quite fond of this GUI solution which uses YUI Compressor – Smaller.

I’ve added Supersized to Github, which is were I will publish minor point releases and field any bug reports.

Thank you for continuing to make Supersized one of the most popular posts on Build Internet.

If you have an urgent problem and would like to contact me directly to hire for custom work, please email me at sam@onemightyroar.com.

Banner image provided by Kitty Gallannhaugh.
Other photography by Emily Tebbetts and Larissa Felsen.