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!

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.

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!

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.

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.

We’re very excited to launch our next jQuery plugin since the widely popular Supersized. Totem makes implementing animated vertical tickers with navigation easy. It is the result of a few recent client projects which required finely controlled tickers plus navigation. This is certainly not the first vertical ticker plugin released for jQuery, but it does have a few features that help it stick out. We hope you’ll find it useful.

Totem is a relatively simple plugin that focuses on being flexible without too many bloated preformatted options. Apply it to a list, and Totem will take it from there. Style and structure as you planned.

The project page has full documentation and download links, and will be the hub for current and future versions going forward.

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.

The Roadmap

There’s still plenty left to do. Future versions will include more animations, and the ability to have a continuous scrolling mode. Have any other suggestions? We’d love to hear them in to comments.

Support Requests

Based on feedback from previous plugins, here’s a reminder regarding support requests: We’re physically unable to address every “How do I make it do ABC under situation XYZ” posted to the comments. For example, we can’t provide support for “How can I load my recent blog posts to this?” or “How can I make this pull live results from the following sites.” If there are clear bugs that need fixing, that’s another story entirely.

This plugin controls presentation, and the specific structure (CSS, HTML, and data) will be unique to your project. We are available for custom work through One Mighty Roar if needed.

Because of the recent commotion about the lack of icon quantity in my first post, (more specifically an RSS icon) I decided to provide an update with 27 more icons! Generous, I know. Hopefully your arsenal will now be large enough to use these icons in any project.

• Every icon is a .PNG (making them easy to edit) and packaged together.
• The set includes three sizes for each icon: 32×32, 48×48, 57×57.
• Each individual icon was made with love

The original part one icon set can be found here: http://buildinternet.com/2010/07/sketchy-social-media-icons-freebie/

Usage and Sharing

If you end up using any of these graphics, please include a link to this post.

Introducing Supersized 3.0

Supersized has been one of the most popular posts on Build Internet since the original came out in February 2009. It was later updated during spring 2009 to version 2.0 and has laid untouched ever since. During this update hiatus, the comments stacked up – they demanded thumbnails, scrolling, better performance, and a number of other requests that I took into account this time around.

Over one year later, I’m happy to announce Supersized 3.0 – enjoy. Visit the project page for more details.

Features

• Resize images to fill the entire browser window while maintaining proportional dimensions.
• Fullscreen slideshow complete with transitions, navigation, captions, and preloading.
• Integrate with existing sites or create your own portfolio gallery.

New in Supersized 3.0

• Added scrolling – you can have your site on top of Supersized.
• Increased performance for larger number of images.
• Images are now loaded from an array.
• Added thumbnail navigation.

Questions, Thoughts, and Dreams

I have done my best to include a healthy number of demos showing potential uses on the project page, they should help you get started and answer a lot of your questions.

As always, please leave any questions, requests, or bugs below. If you end up using this plugin, provide a link – I love to see it in action.

License

Creative Commons Attribution 3.0 License
*If you want to share this plugin with others, link directly to this post, please do not directly link to the download or host the current version on your site. Other than that, if you feel so inclined, provide a link back if you end up using it (not required, but appreciated).

Header image contains browser window by Liam McKay and background by Interfacelift

A Note on Support: If you’re experiencing problems with the plugin, or want advice on how to modify it, you can post a comment below. Even though we read these comments regularly, we can’t keep up with the volume of “How can you make it do XYZ…” requests. We’ll try to fix any issues, but please don’t rely on these comments for a direct how-to fix for something custom. This includes integrating to WordPress, changing content, etc. Thanks!

As a designer that at one time had the ambition to become an illustrator, you can imagine I miss the hands-on work quite a bit. I look for any opportunity I can get to incorporate drawing in design. It’s an easy thing to overlook given the modern day design styles, but it’s important to go back to your roots sometimes.

I’m going to be bold and say social media is popular enough that I don’t need to justify making these. I tried to show some love to the top social media sites that I frequent across the Interweb.

• Every icon is a .PNG (making them easy to edit) and packaged together.
• The set includes four sizes for each icon: 16×16, 32×32, 48×48, 57×57.
• It also includes two sizes for each icon next to its type mark: 32px tall, 57px tall

Usage and Sharing

If you end up using any of these graphics, please include a link to this post.

I was inspired by the vast number of Twitter birds out there and decided to provide my own entry the internet’s collection of our feathery friend.

Everything is neatly packaged in transparent .png format, which means the bird will have no difficulty nesting in whatever site you place him in.

Feel free to leave a link in the comments if you end up using any of the illustrations for a project – enjoy!

Inside the Bundle

Usage and Sharing

Released under this Creative Commons license. While it’s not required, if you end up using any of these graphics, a link to this post would be greatly appreciated.

If you want to share this file with anyone, please link directly to this post ( http://buildinternet.com/2010/06/freebie-fiesta-twitter-bird-egg-illustrations/ ).

*The font used in the above graphics is called Johnny Quest Classic.