This month we're excited to announce three new display options for your Twitter content— Lists, Search, and Favorites. All three options give you additional means of moderating what Twitter content appears before your audience while allowing you to include content from different Twitter accounts.]]>
This month we added a new feature to our
]]>
George Penston
Director of User Experience
As part of Widgetbox's new staff series—we'll be bringing you occasional guest posts from members of the Widgetbox team.
We recently released a new product that allows you to quickly build out a mobile site for your web site. These mobile sites are accessible on popular smartphones that use WebKit for the native Internet browser experience. iPhone, iPod touch, Android devices, and Palm Pre all use WebKit for their browsers and support all of these features to varying degrees. There were a bunch of great features available in WebKit’s implementation of CSS3 that we made use of but there were two standout features I really wanted to highlight here.
First, we wanted to create a tab menu button with icons much like the ones found on the iPhone. But since we also wanted to make it possible to customize the look of your mobile site, we wanted to find a way to make the icons flexible enough to adapt to customizable colors. We accomplished this by taking advantage of the -webkit-mask-box-image property. With this, we were able to create simple black and white icons that then were used as masks for the button. These masks work much like masks do in Adobe Photoshop or Flash. Not only did it allow us to let a custom color be used for the icons, the selected state was easy to achieve by just changing out the background to a gradient.
So this simple icon: 
Is nicely transformed to this: 
And then almost easily switched over to a selected: 
All this was accomplished with a couple of lines of CSS:
.tabmenu .feed a div
-webkit-mask-box-image: url(assets/tabicn-feed.png);
}
.tabmenu a:active div, .tabmenu a.enabled div
background: -webkit-gradient(linear, 38% 0%, 60% 70%, from(#dde9f0), to(#3fc5f8), color-stop(.6,#79b2ec),color-stop(.7,#2e91e5));
}
This would normally require several CSS sprites to be built to get even close to what’s going on here, but with that said, it would be next to impossible to allow for total control of coloring of the button icons and the button bar the icons are within. The other CSS3 properties that really went a long way for us to allow for custom colors in our themes is a clever mix of -webkit-gradient along with RGBA attributes. These two combined allowed us to recreate glossy button bars that are semi-transparent without using any image sprites whatsoever. Why go to all the effort of not using a semi-transparent PNG image sprite to achieve a gloss effect? We were building a mobile product so every image download was carefully considered. Reducing the amount of HTTP requests going back and forth between the mobile site would help to keep the site as fast as possible. Creating our tab bars completely with CSS3 style rules made this possible as well as providing the capability to choose a custom color to apply to a theme. We created two themes (Poly Vinyl and Frosted Glass) out of our six initial themes that can be customized further by choosing a theme color. So anyone building a mobile site could choose a color that matched their site or brand.
Being a UX designer who has designed and developed for a variety of browser capabilities through the years, it’s hard not to get excited about designing solely for WebKit-based browsers (both desktop and mobile). The modern features offered in Safari, Mobile Safari, and Chrome bring web and user experience design closer to a true application development workflow. If you’re a web or UX designer, you owe it to yourself to set aside some time or find a project to really explore these new world capabilities. It truly is remarkable.
For more on the CSS3 visual effects mentioned, visit Apple’s Safari Dev Center (login required):
Masks, Gradients
Also, be sure to check out this cool technology in action out in the Widgetbox Mobile Site Builder. You can try it out for free here: http://www.widgetbox.com/mobile/make/.
—When George isn't writing his next book on Photoshop, he's living where the playas play (with his wife and kids of course).
]]>The Video Gallery widget allows you to easily assemble your video content into a professional-looking video gallery. Automatically import your videos from Facebook, YouTube, and Vimeo—or choose to manually add videos by entering an embed code or a web address (URL) to a video’s page.
With the Video Gallery widget you can choose to have your videos play in-widget, or have them play on a separate page. Once you’ve added all your videos, you can further personalize your widget by arranging the order of your videos, changing the titles of your videos, and customizing the look and feel of your widget with different themes and styling options.
Pro account users get even more customization for their Video Gallery widgets, including: 16 themes, multiple settings, and advanced stylings of fonts and colors. As with all Pro widgets, Pro users can also opt to remove the Get Widget button and go ad-free on their widget. Go pro for free and start taking advantage of these additional features.
Make a Video Gallery widget »
To take advantage of these just-released features, Go Pro for free with a 7-day trial.
]]>Our new Widgetbox Ad Campaigns are designed for companies and brands who want to promote their widgets to a larger audience. You’ll drive more installations of your widgets and promote your brand’s content on the Widgetbox platform.
With our unique ad campaigns you'll turn your content into customized widgets that you promote throughout the Widgetbox site. You'll be able to turn your blog, Twitter feed, YouTube video, or just about any other content into an appealing widget for potential customers. The dynamic nature of the widget allows your content to be more relevant and engaging to your audience than any traditional static banner ad.
Best of all, advertising with Widgetbox Ad Campaigns allow you to achieve multiple marketing goals with single ad units. You'll increase brand awareness and drive traffic to your website.
Get started today with Widgetbox Ad Campaigns »
]]>Simply enter in your blog or feed-based address (URL) and your feed will automatically be converted into a Blidget you can share with others.
Examples of content feeds that can go into a Blidget include:
As with all of our widgets, Blidgets can be placed just about anywhere: MySpace, Blogger, Facebook, TypePad, iGoogle or your favorite website.
To further customize your Blidget and take advantage of some just-released features, Go Pro.
The new features available to Pro subscribers include: