Our Mobile Site Builder allows businesses to easily optimize their current website for display on iPhone and Android smartphones while adding mobile-specific widgets to their site. This month we wanted to highlight one of our most popular mobile widgets for businesses--the Google Maps widget.
The Google Maps widget allows your mobile audience to easily locate your business when they’re on the go. Simply enter in your business’s address and the Google Maps widget will compute the location's coordinates. Users will be able to view your business location on a map and obtain detailed directions to your business.
The Google Maps widget is one of several useful widgets that you can include in your business’s mobile site.
Make a mobile site for your business »
Entries in mobile site (5)
Did you know that Widgetbox's Mobile Site Builder can help you reach your mobile audience and gain customers and fans?
With our Mobile Site Builder you can design and launch a mobile site in minutes. Mobile sites are websites that are mobile-friendly and can quickly be viewed on iPhone, Android, and other popular smartphones, allowing you to get your content into the mobile space.
With Widgetbox you can create an engaging site that includes a blog or feed, Google Map, Twitter, polls, and more. We make it simple to quickly build your customized mobile site with just a few clicks with no coding required.
Still not sure how a Widgetbox mobile site can benefit your brand or business? Here are just a few examples of how a mobile site can give your customers and fans the information they're looking for when they're on the go.
- Restaurants: Include menus, reviews, reservation information, and more. Add the Google Map Page to let customers easily locate your restaurant.
- Businesses: Include services offered, contact information, location, and more. Add your company blog and Twitter feed as well.
- Musicians & Event Organizers: Promote upcoming shows or events and keep you audience up to date with Twitter, blog, and Facebook updates. Include the Share feature to let viewers share your event and invite friends.
- Personal Profiles: Make a personal or professional profile to showcase your content. Include your blog, photos, video, and more. Provides an easy way to let others access your content on a single mobile-friendly site.
Last month we were excited to introduce our new Mobile Site feature, and this month we are pleased to announce two brand new feature enhancements for your Mobile Site—Facebook Fan Pages and new sharing capabilities.
In addition to Twitter, blog feeds, Google Maps, and more, you can now add a Facebook Fan Page to your mobile site. Simply enter your Facebook Fan Page URL and your content will be automatically imported. Best of all your mobile site content will dynamically reflect any new updates to your Fan Page.
Share to Twitter, Facebook, Email, and Text Message
Starting this month, users can easily share your mobile site with others via Twitter, Facebook, email, or even text message! The new share feature allows your mobile site to go viral as people share your site with others. As a Publisher Pro or Business Pro subscriber you can get even more viral exposure by customizing the About section of your site.
Make a mobile site and start using the new features »
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).
Here at Widgetbox, we’re very excited to announce the release of our new Mobile Site Builder.
What’s a mobile site you ask? A mobile site is a website that is designed to be mobile-friendly and can quickly be viewed on iPhones and other popular smartphones. It allows you to get your content into the mobile space, allowing your followers to easily access it on their mobile devices.
With our new Mobile Site Builder you can design and launch a complete mobile site in minutes. Create an engaging site that includes:
- A blog or feed
- A location map
- And more
Mobile Sites are available free to all users in the ad-supported basic version. Publisher Pro subscribers get additional customization options, including the ability to control ads. To begin using enhanced features for your mobile site, start a free 7-day trial of Publisher Pro.
Watch a video on our Mobile Site Builder »
Make a mobile site »