'Net Features : design and development

Creative Design Tools for Non-Designers

Pete Prestipino — Thu, 11 Apr 2013 20:10:00 GMT

Face it; you're not a Web designer. You may try your digital best, but hey, you've never been trained in the art of virtual aesthetics. But that’s okay, because we can't all be Web Van Gogh's.

However, for those of us that run websites and don’t have a dedicated design team to allocate work to, it's still necessary to participate in the design process, from wireframing to reviewing, and all those little tweaks along the way.

Luckily, there are plenty of great creative design tools available on the Web that are easy enough that any non-designer can use them. Check out the list below to see if there’s something that can help you look like you play a designer on the Web.

deviantART muro

muro, by deviantART, is a browser-based HTML5 drawing application for the site’s members that allows them to create images from scratch, featuring over 20 brushes, multiple filters and the ability to add layers to an image.

Fluid UI

This is a mobile app prototyping tool that lets users quickly and easily create interactive mockups and wireframes of mobile applications for Android, iOS and Windows 8.

Label59

Ever had a great image to share that just needs a little explanation to make sense? Have you been looking for a better way to engage your audience with photos? Well, Label59 is for you, as this Web app provides an intuitive toolset that lets users label photos and even create an interactive presentation in minutes.

Sumopaint

Sumopaint offers a fast and simple graphics editor application for Web browsers, PCs or iPads that works in 22 different languages, and includes a basic version that is always free for everyone.

Actual Reports Designer

While Actual Reports Designer is really a multi-faceted tool for creating simple designs, it is particularly useful for non-designers that want to generate QR codes to market their services, products or content. The tool includes a library of over 500 industry standard signs and symbols to choose from, as well as a user-friendly drag-and-drop interface.

WeVideo

One of the more popular online video editors available, WeVideo includes three distinct editing modes (Storyboard, Timeline and Advanced) to allow users to edit videos however they’d like. In addition, it integrates with YouTube, Vimeo, Facebook, Instagram, Dropbox, Box and many other websites.

Balsamiq Mockups

This is another wireframing tool that basically lets users feel like they’re “drawing” an early version of their websites, while allowing for various tweaks and rearrangements at any time. Plus, it is collaboration friendly, so teams can create a design and modify it in real time during a meeting.

MindMeister

MindMeister is a mind mapping software with a particular focus on collaboration that has been used by everyone from EA to CNN to Oracle to help users visualize their thinking.

Pixlr

In the wake of Picnik, a number of free image editing services emerged, but none of them are as efficient and user-friendly as Pixlr, which is why it is now the Web’s most popular online photo editor.

Magisto

Turn everyday videos into memorable movies with Magisto, the automated online video editor the selects the best parts of a user’s video, adds the music, themes and effects they select, and the puts it all together to create ‘beautiful” films that can be easily shared with others.

Clue

This simple online application makes it easy (and kind of fun) to test what people remember on a website. Simply enter the URL into the empty bar to create a test, and then see what users report to be the most impactful elements of the page.

Bounce

Like Clue, this app was created by the folks at ZURB and makes it easy to share ideas on a website. Again, just enter a URL, and then users can highlight specific areas on a page and leave feedback for the website owner.

Moqups

It always helps to have a roadmap, so that’s why services like Moqups are so nice. This Web-based HTML5 application lets users create wireframes, mockups and prototypes of their websites with an incredibly intuitive interface.

IcoMoon

IcoMoon was the Web’s first custom icon font builder, meaning it allows users to choose specific icons that they need and turn them into a unique font to improve compatibility we various screen readers.

Sketchfab

Users can publish, embed and share interactive 3D models with Sketchfab. The tool supports 27 different native 3D formats with no plugin required and unlimited uploads.

HTML Banner Maker

Create banners that work across all devices using HTML5 with this Web app that requires no prior coding knowledge.

NodeFire

NodeFire is an HTML5-based interactive animation create that lets users quickly and easily design banners, advertisements, text effects, drop-down menus, scrolling items, marquees, buttons, mini games and much more.

TweenUI

With TweenUI, it takes no time at all to create sleek looking HTML5 banner ads that look great across mobile devices and tablets.

Mugeda

And if you’re looking to create rich media HTML5 ads just for mobile devices, you can turn to Mugeda, the cloud-based solution that can be easily integrated into a publisher’s existing ad platform.

9 Spectacular Social APIs

Michael Garrity — Thu, 28 Mar 2013 19:50:00 GMT

Like it or not, the Web is an increasingly social place, and in order to successfully market a brand and reach out to consumers, utilizing the various social media resources at your disposal is quickly becoming an essential part of running a website.

Fortunately, developers have access to a number of social media application programming interfaces (APIs) that can help them integrate the services of major social media services into their websites or applications. This is particularly beneficial for content providers, marketers or even e-commerce companies that may have share-worthy content or products.

So, if you’re looking to improve your website’s digital social life, maybe it’s time to consider one (or more) of these nine spectacular social APIs.

Facebook Graph API
As the biggest name in social media, it only seems right that you should try to incorporate as much Facebook data into your social endeavors as possible. The Graph API is the primary way that data is retrieved or posted to the social network. This API makes it easy to connect with users on your website or application and offer them a more personalized experience, as well as the ability to Like and share pages on your site or app. It can also provide site registration features and a Facebook-based commenting system.

Twitter Embedded Tweets
Using this particular API, you can take any tweet from your Twitter account and, as the name states, embed it directly into the content of your website, or a page on your website. Moreover, the tweets will display with expanded media (e.g. photos, videos, articles summaries, etc.) and real-time retweet and favorite counts. Plus, when the tweets are embedded, they will become interactive on the Web page, allowing visitors to follow the author, reply, retweet or favorite them without ever leaving the page.

Bitly Social Data APIs
One of the most popular ways to share content on social networks (especially Twitter) is by using a link-shortening service, such as Bitly, which is wildly popular with a number of Web users. In fact, millions of people shorten, share and click on Bitly links every day, and that can be a lot of information to keep track of. That’s why the company released the Bitly Social Data APIs, which provide direct access to the best available content that has been shared by users across various social networks.

YouTube Data API
With this API, developers can build a program that performs many of the operations available on YouTube.com, including the ability to search for videos, retrieve standard feeds, view related content, authenticate users to upload videos, modify playlists and much more to allow sites or apps to create deep integrations with YouTube and its content.

Yelp API
The API from the local search and online review service lets users add functionality to their app or website that will help users find up to the 40 best results for geographic searches, sort the results by the best query, rating or distance match, limit the results to only businesses offering Yelp Deals, and identify whether or not a business has been claimed on Yelp already. This allows developers to give users a full Yelp experience without have to visit Yelp.com.

Flickr API
Images and social media seem to go hand-in-hand these days, and with more than 5 billion hosted photos, Flickr is one of the leading image services on the Web today. All of those pictures, and the Flickr community around them, create a lot of rich data, which is now accessible to developers through the Flickr API. Developers can use the API to organize, store and display their digital images, and even integrate them with other social apps. Plus, the API allows them to converse, share and curate their content with others.

Google+ API
Thought it may not have the name brand recognition of Facebook or Twitter, Google+ is still an incredibly useful social network in some circles (get it?). If you’re looking to tap into those clusters of users, you can integrate the Google+ API into your app or website, which allows users to connect with one another for “maximum engagement” and use Google+ features directly from your site or app.

Ning API
Ning is a small platform upon which users can build their own niche social networks, and many brands have turned to Ning to create social networks specifically for their companies. For those who have used Ning to establish their own curated networks, they can utilize the Ning API to take advantage of all of the data that it creates.

foursquare API
The popular check-in based social media service foursquare was a major factor in the rise of geo-location-based marketing. As such, it has compiled a hearty amount of data from its mobile applications. This API gives developers access to all of that information so that they can display public check-ins on their websites, allow users to check in from their apps or websites, aggregate data from similar locations to identify their target audiences and much more.

The Hardest-Working Staff Pages on the Web

Administrator — Thu, 21 Mar 2013 18:50:00 GMT

Every digital enterprise has a team – from one-man shows with makeshift offices to globally staffed companies with luxury digs. Regardless of size or setup, transparency is key to building trust, and almost no page works harder for a company in this regard than its staff page.

Companies can use this valuable real estate to not only highlight their biggest resource, the people behind the brand, but also to showcase (if not brag about) the deep level of expertise their company has in a given industry.

For some inspiration, let’s take a look at the hardest-working staff pages on the Web.

Caxiam Group

This team of passionate, talented and dedicated professionals loves to collaborate together and with its clients to build Web solutions of all shapes and sizes. And perhaps because Caxiam Group works so closely with clients, its “Our Team” details each person’s favorite holidays, favorite thing to do on their day off and the list goes on. The staff bios also detail the person’s job at Caxiam and their qualifications. It should also be noted that Ethan’s profile has pictures of him – sans the family - in business casual attire, but who doesn’t love a cute baby? Also, did you notice the keywords that describe Ethan?

LATERAL, INC.

LATERAL delivers design and technology with passion for tangible business results. It has a passionate and, judging from its “The Team” page, wildly creative staff. While there are no actual bios of employees, the site makes up for this in originality, and when hiring a design staff, that’s typically more important anyway. For example, when a user scrolls over any team member’s image, the rest of the employee photos look in the direction of that person. See how Bogus the dog’s image is highlighted and everyone is looking at him? By the way, he’s in charge of special projects.

Blue Sky Resumes

This small team of professional writers and job search experts pride themselves on amazing work and fabulous customer service. Working with them will even give you something to sing about, which is why the company selected design elements that revolve around blue skies and a blue bird. Its "About Us" page answers the question, “Who are these people anyway?” The design and copy choices reinforce the company’s quirky and passionate approach and reinforces the staff’s qualifications.

Arc90

Arc90 is based in New York, but lives at the intersection of design, strategy and technology. So it only makes sense that its staff pages connects cool design with trust-building content. There are several elements at play here. On the "Team" page, a key indicates which area of the company that team member is responsible for (e.g. design, development, strategy, etc.). Additionally, when a user hover overs any employee’s image, an alternative and more eccentric photo of them is shown (see Joel, below). Visitors can also click on any person’s picture to read a comprehensive bio.

Space & Time Media Limited

Space and Time Media is a media planning and buying agency specializing in integrated media solutions both on and offline. Its website is committed to an action-hero theme, which carries over to its “Who are we?” page. While this design choice certainly wouldn’t be right for every business, it’s appealing for this one. There are cartoon images for each employee, and once clicked on, a user is brought to a new page with a full, professional bio.

-------------------------

Meet the Website Magazine Editorial Team

12 Effective Corporate Blog Designs

Michael Garrity — Thu, 14 Mar 2013 19:35:00 GMT

In the age of likes, retweets and shares, content marketing has suddenly become the best way to spread the word about your brand to bring in new customers and rack up conversions.

However, since social media has its limitations, in terms of both branding and the type of content that companies can offer, many businesses have taken to blogging to provide insightful and valuable information to their customers, while also producing likeable and sharable content that can benefit their SEO efforts.

Look, plenty has already been written about how blogs can improve a brand’s content marketing campaigns or increase leads, but we’re here to be a little more superficial than that. While content is undoubtedly and absolutely the most important aspect of a valuable, successful blog, it’s not the only thing that matters. After all, we’ve all heard about the effect that a good (or bad) first impression can have on new consumers. That’s why all of that great content on your blog should look nice, as well.

If you’re in need of some inspiration, we’ve compiled this list of 12 of the most effective corporate blog designs on the Web. Each of them takes a different approach; some are design-heavy and visually striking (e.g. Whole Foods, Southwest), while others take a simpler, less bold approach that is more in line with what the brand offers (e.g. LinkedIn, Bigelow Tea).

Which designs are your favorites? Let us know in the comments section, or share some other great corporate blogs that you know about!

Bigelow Tea Blog

The Official LinkedIn Blog

7Gen Blog by Seventh Generation

eBay inc. Ink

Disney Parks Blog

Whole Story by Whole Foods

The Cleanest Line by Patagonia

Nuts About Southwest

The Dropbox Blog

All Songs Considered by NPR

TOMS

Ice Cream Journal by Turkey Hill Dairy

Bigcommerce to Enhance Its Relationships with New Partner Program

Michael Garrity — Mon, 11 Mar 2013 19:15:00 GMT

SMB e-commerce platform Bigcommerce is set to announce the launch of a new global partner program aimed at helping Web professionals, designers, affiliate marketers and resellers get the most out of their Bigcommerce experience.

Currently, partners help Bigcommerce manage more than 30,000 online stores, and now, the company wants to give back to those partners that have helped to grow its brand with a selection of new business development tools. The offerings include co-marketing materials and promotional opportunities, updated commission options, joint social media and public relations initiatives and an assigned executive to work one-on-one with a Bigcommerce partner to provide onboarding, product training and ongoing support beyond that.

“We realize the tremendous value our partners bring to Bigcommerce and are committed to providing them with a fully encompassing program that supports their efforts and contributes to their ultimate success,” said the Director of Channels at Bigcommerce, Simon Clarkson.

The program is going to be broken into three different tiers that will each accommodate partners as various levels, and as partners become more and more successful with Bigcommerce, they can move up the tiers to receive additional benefits, including joint-promoted relationships (through co-marketing efforts and social media promotion) and upgraded commission structures.

First is the Reseller tier, which serves as an “entry point” of sorts for those new to Bigcommerce. All Reseller partners are given personal resources and a one-on-one relationship to “get to know” Bigcommerce, as well as exclusive promotional materials. After that is the Partner tier, which is for those partners that have a “solid level of experience” with the Bigcommerce platform, in addition to a good performance record with the platform.

Finally, the highest tier is reserved for Premium Partners that are “hand-selected Bigcommerce experts that have proven success with the platform," according to Clarkson. The factors that Bigcommerce uses to select its Premium Partners include, but are not limited to, the number of e-commerce stores they serve, good customer feedback and their level of engagement with Bigcommerce. At the launch of the partner program, Bigcommerce will already have a “handful” of Premium Partners that have been working with the platform for years.

Tuesday’s release will just be the first stage in this new program, and in the coming months Clarkson said he expects to see a portal for managing the one-on-one relationships between Bigcommerce and its partners, with more announcements to come by the end of the year.

Interested parties can apply to join the Bigcommerce Partner Program at bigcommerce.com/partners.

Chrome Extensions for Hyper-Productive Developers

Michael Garrity — Thu, 21 Feb 2013 21:00:00 GMT

One of the fastest and easiest ways to increase productivity and efficiency as a Web developer is to collect an assortment of tools that can help simplify, automate and just generally lessen the burden that different tasks add to your to-do list.

Of course, this isn't news to anyone. What may be useful to know, however, is that the popular Google Chrome Web browser offers a plethora of extensions that could be used to make life easier for developers. If you already use Chrome (and if you work on the Web, you probably do), why not check out these 17 extensions that can help dramatically increase your productivity and, hopefully, get a few extra hours of sleep, as a result.

Eye Dropper
The open source Eye Dropper extension allows users to quickly pick out specific colors from a Web page, advanced color picker or "personal color history" to use in site design and development.

NoCoffee
As a "vision simulator" plugin, NoCoffee allows developers to see how their sites will look for users with a variety of potential vision issues, such as low acuity, low contrast sensitivity, color deficiencies, glare, ghosting, snow or a partial vision block, so that they can then go back and fix their sites to better accomodate these concerns.

jQuery-Injector
With this extension, users simply have to click on their toolbars to have jQuery "injected" directly into the current page that they are working on, and afterwards they can check for successful insertion by running a jQuery command on the page from their JavaScript consoles.

Wappalyzer
This browser extension will "uncover" the technologies used on a website, so that developers can figure out how certain aspects of a site were created. Wappalyzer comes with a list of applications that it detects, which includes content management systems, Web shops, servers, JavaScript frameworks, analytics tools and more.

Code Cola
Developers can easily visually edit a Web page's CSS style with the Code Cola extension. It even comes with a collection of handy patterns to further expediate the process.

ruul. Screen ruler
This is one of those "Why didn't I think of that?" tools that is useful for any and every type of desinger. It is a simple on-screen ruler that helps users line up and measure various aspects of a Web page, including type, line height, strokes and pretty much anything else.

Page Ruler
Sort of like ruul, Page Ruler is a Chrome extension that allows developers to draw a ruler directly on a page in order to discover an area's pixel dimensions and positioning, as well as other page elements.

JSONView
With this extension, developers can rapidly view and validate a page's JSON documents with increased efficiency.

Resolution Test
As the name implies, this extension helps developers test the pages they're working on in various screen resolutions so that they can make any necessary adjustments. It even comes with an option that allows them to define their own resolutions.

Web Developer
An extension with a name like "Web Developer" has to be good, right? This will add a button to the top of a user's toolbar in his or her Chrome browser that features various tools for Web developers, including color, resizing and image tools.

YSlow
This performance tool from Yahoo will make your Web pages faster by analyzing them, grading them on one of three predefined (or user-defined) sets of rules and then suggesting ways to improve their performance based on the results.

Ripple Emulator
Ripple Emulator provides users with a multi-platform HTML5 mobile environment emulator that allows them to test the performance of their websites across a variety of mobile devices, thus reducing the challenge of trying to design for the multitude of available mobile platforms after the initial Web-based site has been created.

Python Shell
The Python scripting language aims to emphasize code readability, making it a favorite among many Web developers. With this extension, they can test Python code or regular expressions; they can even use it as a calculator.

Microformats for Google Chrome
Now, developers can easily display microformats right on their Web pages thanks to this handy extension, which supports hCard, hCalender, hReview, hReview-aggregate, hRecipe and geo.

jQuery Debugger
Working with jQuery has never been easier than with this Chrome extension, which features a Selector Inspector panel that will, not surprisingly, inspect a page's jQuery selectors and watch their matching elements as they're displayed on any website. In short, this extension was designed to help users easily understand even the most complex selectors.

DevTools Autosave
This incredibly useful little extension will automatically save any changes in CSS and/or JavaScript that were made with Chrome DevTools, meaning you'll never have to worry about losing your work again!

960 Grid System Overlay
Technically, this is an "unoffical" tool, but it still rocks. This extension allows users to overlay a 960.gs guide over a Web page that is using the 960 Grid System by simplying right-clicking on the "960" icon in their browsers. They can even change the default colors of the overlay.

Responsive Design Gets Simplified

Michael Garrity — Thu, 14 Feb 2013 19:45:00 GMT

As a Valentine’s Day present of sorts, Adobe announced the release of a handful of new Web design and development tools for its Creative Cloud suite earlier today. This includes updates to the Adobe Edge Animate and Dreamweaver programs, but the real star of the show is the Adobe Edge Reflow responsive design tool.

Edge Reflow will allow users to create “high fidelity” CSS3 website designs that can realize and resize for the design surface that the user is visiting the site from, while allowing creators to select from a desktop or mobile-first design approach and to preview their work (in its various sizes) from within a browser.

Needless to say, this is going to be a handy tool for many Web designers and developers out there, as it makes it significantly easier to create a robust, feature-rich mobile-responsive website; and really, isn’t that the ultimate goal of most Web professionals these days? Of course it is, and that is why solutions like Adobe Edge Reflow are not only going to become more commonplace, but they’ll likely become something of a necessity for the designers and developers of the future.

Responsive Design: Then & Now

Traditionally, the bulk of the work of responsive design has been laid at the desk of a content management system (CMS), which most websites utilize in one form or another through a platform like WordPress or Drupal, or by using an internally developed system. Either way, the responsive design challenge has long been based upon the capabilities of a company’s CMS.

Building a responsive website starts by designing a liquid layout or set of fluid grids that expands with a page to fit the browser/screen from which the site is being accessed. But that isn’t the most important part, because next the developer has to include the CSS3 media queries that help websites to gather data about a sits visitor and use that info to conditionally apply CSS styles. These queries effectively control the site’s behavior and allow it to respond to the end user’s needs.

Until now, the challenge for responsive design has largely been trying to find a theme for a designer’s content management system that would be able to respond to a wide array of different screen sizes and device types, but thanks to new platforms, solutions and services (like Adobe Edge Reflow) that take automatically take care of the “responsive” aspect of website design, that is quickly changing.

No Longer Just a Special Consideration

If the release of Edge Reflow signifies anything, it’s that responsive design isn’t just a cool added bonus that only a select few websites have or need to worry about anymore. From now through the foreseeable future, mobile is going to be a major factor in company’s Web success, and responsive design is the simplest and most effective way to meet that problem head-on.

As a result, solutions that make it easy to not only create a website that is able to automatically respond to a user’s screen size or device, but also allows designers and developers to preview what their site will look like in a variety of different shapes and sizes as they’re designing it, will become some of the most useful tools available to them; so much so that we will likely begin to see a proliferation of similar services sooner, rather than later. We already are, to some extent.

Just yesterday, a new all-in-one CMS and marketing platform called Bislr was launched, born initially out of the desire to combine all of the different touch points for business owners, designers and marketers into a single, unified platform. With Bislr, companies can build their own “intelligent” websites from the ground up, using a simple drag-and-drop interface, that come equipped with built-in social media and marketing capabilities, including integration with CRM and marketing automation software. And on top of all that, the service creates sites that are immediately responsive “with no extra work.” Users can even adjust their interface’s size to see how the site will look when rendered on different devices, allowing them to make changes as necessary during the initial build.

Responding to Needs

As the need for responsive design increases exponentially, so will the need to simplify the process for designers and developers, as virtually every site they create will have to be able to operate across devices. Adobe Edge Reflow may be the first big-name solution to provide this kind of quick-and-easy functionality, but it certainly won’t be the last.

7 Innovative Solutions to CAPTCHA User Attention

Michael Garrity — Thu, 07 Feb 2013 19:35:00 GMT

Security is one of the most important factors that a webmaster or developer has to take into consideration when designing a website – especially one that handles sensitive user data and/or requires users to register before they can begin to interact with the site.

Among the many solutions that Web workers have devised to improve security measures, as well as the user experience on their sites, is the CAPTCHA (or Completely Automated Public Turing test to tell Computers and Humans Apart – I think it’s a good idea they decided to use the acronym), a solution that presents a challenge response test to users that ensures the “person” trying to access the site is actually a human, and not just an annoying spam bot.

Unfortunately, while these solutions can be useful in theory, they are often more problematic when they’re actually implemented. Not only can they be cumbersome, difficult to read and a generally unwanted hassle for users, but they’re not even foolproof, as bots can use optical character recognition (OCR) software to crack the CAPTCHA code.

As a result, developers have had to get creative with their CAPTCHAs, resulting in an improved experience for many users. Here are six of the more interesting, innovative and just plain useful CAPTCHA solutions available today:

reCAPTCHA

Although reCAPTCHA looks a lot like traditional CAPTCHA solutions (because it is), it’s also a service that helps digitize books, newspapers and even old radio shows. Basically, as reCAPTCHA goes about the process of putting this old content into a sleep new digital format, it will go through and find those words that are pretty much impossible for OCR programs to read, and then uses those for it’s CAPTCHAs, making it far more secure than other solutions.

Asirra

This is a Microsoft Research project adds a dash of cute to a website by asking users to identify photos of dogs for cats (e.g. they’ll be asked to identify all of the cat pictures in a set that mixes both cat and dog photos). It’s powered by a unique partnership with Petfinder.com, and according to their user studies, not only can people accomplish this task quickly and accurately, but a lot of them also think it is fun.

Confident Technologies

Another similar CAPTCHA solution is available from Confident Technologies, which provides clickable picture CAPTCHAs that stop spam and bots by asking visitors to click on specific pictures. This tool comes in various international languages (including French, Spanish, German and more), is already mobile-optimized and allows websites to brand their CAPTCHA using their own unique logos and marketing messages.

Ironclad CAPTCHA

Ironclad CAPTCHA is a solution from the Security Stronghold company that presents a set of 3D objects for users to count and identify. According to its website, the solution is “easy for even a kid, impossible for [a] robot.” A box will appear with a variety of 3D objects and ask users to count how many individual objects they see. And the best part is, it’s totally free!

PlayThru

If CAPTCHAs are driving away users, why not give them a game to play instead? At least, that’s the idea the folks at Are You a Human had when they created PlayThru, a cloud-based service that provides little interactive minigames with simple tasks (e.g. drag the food items into the refrigerator) that users must complete before they can move to another part of a website.

NuCAPTCHA

NuCAPTCHA takes a new approach to CAPTCHA security by using videos that feature easy-to-read streaming letters, as opposed to a traditional static box. It’s also much less of a hassle for developers to integrate into their sites and can be customized in a skinless form that lets designers match it to the them of their websites.

Solve Media

Advertising is everywhere these days, and now it’s even in our CAPTCHAs thanks to Solve Media, which has created a CATPCHA and display ad hybrid that asks users to answer a simple question about an ad that it shows them from another company. Advertisers pay for these appearances, and publishers will share half of their ad revenue with Solve. In other words, this is a solution that allows you to monetize your CAPTCHAs and keep spam bots away at the same time.

Typography App Eases Design Process

Allison Howen — Mon, 04 Feb 2013 15:05:00 GMT

A new browser-based tool is helping the design community save some time and create better quality Web typography.

Typeface provider Monotype Imaging Holdings has commercially launched the Typecast application, which allows Web designers to combine, compare and style Web fonts quickly without performing screen captures in third-party applications or through hand coding. In fact, users can visually style text directly within the browser, which offers a broader scope for creative experimentation, better typographic control and a simplified workflow.

As designers work, Typecast generates production-ready HTML and CSS code. Then, when designers are ready to start building their sites, they can export the HTML and CSS as well as generate embedded code that will serve their project’s typefaces to their site.

“Good typography is transforming the Web, and the engine behind that is Web fonts,” said Chris Roberts, vice president and general manager of Monotype’s e-commerce group. “With Typecast, designers now have a simple yet powerful design tool that opens up a whole new level of productivity and creative expression. We’re very excited that it’s now part of our complete Web font offering.”

Designers can set styles such as font size, line spacing and coloring, and apply OpenType features such as ligatures, small caps, fractions, lining and old style figures, and swash characters. Moreover, designers are able to try fonts on full-length project content, not just short snippets. By using side-by-side comparison and testing, designers can quickly view how fonts look, and styles can be adjusted across entire projects with just a few clicks.

“The Typecast application simply takes the pain out of working with Web fonts,” said Paul McKeever, director of Typecast. “We’ve simplified workflow to bring joy to Web design and allow designers to spend more time on creative experimentation. They can iterate as quickly as they ideate and more easily create accessible, readable content for any sized screen on any device.”

The Typecast application is available at four subscription levels, with prices starting at $29 per month. Additionally, all plans include a free standard subscription to Fonts.com Web Fonts, which enables Typecast subscribers to use more than 20,000 Web fonts on their live sites. Furthermore, the Typecast application is available as a free trial for 14 days.

It is also important to note that the Typecast application allows designers to experiment with fonts from Typekit, Fontdeck, Webtype and Google Web Fonts as well as Monotype’s Fonts.com Web Fonts.

jQuery Plugins for Increasing Interaction

Michael Garrity — Thu, 24 Jan 2013 20:55:00 GMT

There is one thing that every website, no matter what kind it may be, always wants to see: more user interactions.

However, despite the universal desire to increase interaction on one’s website, the route that each designer and/or developer takes to make it happen can vary greatly. Often, their choices are dependent on the type of site (e.g. content-based, e-commerce, service providers, etc.) or brands that they’re working with. Thus, there are many different ways to go about enticing visitors to engage with a website.

So if you’re one of the many webmasters, designers or developers interested in improving user interactions on your website, check out these 10 cool jQuery plugins designed to do just that, either through easier navigation, greater customization or added functionality.

jQuery Page Peel
Like it says, this plugin makes it easy to create a page peel animation for you Web page that sits at the top of the screen on the right-hand side. When users hover their cursors over that area, the page will peel down and reveal more content behind it. While many websites like to place advertisements behind this peel, it can be used in more effective ways to draw attention to extra content or other website features.

Image Overlay Plugin
Images are a great way to capture the interest of visitors, especially if it’s their first time on your site. With the Image Overlay Plugin, you can reel them in, and then present more text-based information about the pictures that will appear (see image below) when users hover over the images. This way, you can still share information about the images without adding distracting, unnecessary text to your Web page.

jSlideRelatedPages
jSlideRelatedPages is a scroll sliding plugin that helps you engage users when they get to the bottom of your Web pages by displaying a sliding animation (see image below) when they get down there. On the slider is a list of related pages on your site that the user may also be interested in based on the content of the page they are currently on, so that you can keep them on your site and looking at more of your content for a longer period of time.

jFontSize
One of the more overlooked reasons for early site abandonment is poor readability for certain users because of the font size on a particular page (or set of pages). The jFontSize plugin helps to alleviate this problem by making it easy to create those “A+” and “A-“ buttons that some site’s have that allow users to alter the site’s font size, which will make your website far more accessible to a much wider range of visitors.

Overscroll
Users are so comfortable with accessing the Internet on mobile phones and tablet devices these days that it may behoove you to make your whole website mimic the mobile scrolling experience on desktop browsers. Luckily, the Overscroll jQuery plugin does just that by adding a “draggable drift” to overflowed DOM elements and a set of fading “thumbs” to a site. In other words, it allows users to simply click on the site and drag their mouse to move around the site, just like they would using their fingers on an iPhone. While Overscroll works best with Safari 5+, Chrome 5+ and Firefox 3+, it says it should work just fine on pretty much any modern browser.

SimpleModal
SimpleModal gives users a powerful interface for modal dialog development that offers greater flexibility to develop whatever they can envision in the box, while mostly doing away with many cross-browser user interface development issues. The real benefit is that designers and developers can totally customize these modal boxes to fit the style and theme of a website, while also being incredibly easy to implement and manage.

PikaChoose
Anyone who has spent an inordinate amount of time getting lost scrolling through Instagram or Facebook photos will tell you about how great image galleries are for capturing a user’s attention and encouraging them to interact with your site. If you want a simple way incorporate a thumbnail image gallery onto your website, look no further than PikaChoose (cute, no?), which is lightweight and super easy to integrate into any website.

jQuery TextAreaResizer
This plugin is ideal for any website that is using an iFrame to display a Web page, image(s) or form(s), especially if the iFrame uses a fixed height, which can be very inconvenient for users, as they’re difficult to resize across different browsers. That’s no longer a problem though thanks to this plugin, which makes it easy to resize iFrames by equipping them with a grip bar.

Responsly.js
In 2013, more users than ever are going to be accessing your website from mobile devices, so responsive design is going to be absolutely essential to ensuring all of your visitors are going to be willing and able to interact with your site. This lightweight plugin will scale to everything from small smartphone screens to large desktop monitors with minimal dependence on jQuery for convenience. It’s uses pure CSS styling and CSS3-based transitions, meaning it can be heavily customized, and it comes compartmentalized so that developers can use only the features that they want.

Single Drop Down Menu
Add multi-level navigation menus to your website that will keep users interacting with your tabs and links while they search for the content that they came looking for. The Single Drop Down Menu (or Single-ddm) applies mouseovers to a preformatted list and a timer that lets users customize the drop down menu’s stall time. It also supports metadata, meaning each list can have its own special features without multiple function calls.

Bonus: Raptorize
Because who doesn’t want a digital velociraptor run across their website, complete with a raptor screeching sound? It’ll get your visitors’ attention, at least.

5 Exciting Web Design Headers for Sellers

Michael Garrity — Thu, 17 Jan 2013 20:25:00 GMT

The Web landscape is filled with hundreds of great brands, each of which has become successful over time for their own unique reasons.

However, despite their success, it seems that the majority of the Web’s biggest and most recognizable brands tend to play it safe when it comes to the design of their websites, from the header all the way down to the footer. In fact, most of the major names in retail and e-commerce have highly efficient, but ultimately not terribly exciting sites.

As people who spend all day looking at websites, you can trust us when we say that after a while, they all start to look the same. That’s why we’ve taken the time to find some great retail websites that dance to the beat of their own drum and feature some truly awe-inspiring website designs starting from the top down. Below are five great examples of awesome header sections on some really cool retail and/or e-commerce websites.

Betsey Johnson

Sharpie

Klondike

Blind Skateboards

Essie

And a bonus (because who doesn’t love grilled cheese?)
The Grilled Cheese Truck

Streamline Web & Application Development for Visual Studio

Michael Garrity — Fri, 11 Jan 2013 15:30:00 GMT

Proficiency with a keyboard is an invaluable skill for Web developers, and KeyRocket wants to help them achieve this expertise with new support for Microsoft Visual Studio.

KeyRocket is a smart application that suggests context-aware keyboard shortcuts to users as they work. It supports a variety of different programs, including Excel, Word, Outlook, PowerPoint, Windows and Gmail for Chrome. And now, it’s adding Visual Studio to its paid Premium suite and including “absolutely all” of the program’s various keyboard shortcuts.

This will streamline the Web and application development processes by suggesting keyboard shortcuts based on each individual user’s working habits, regardless of their level of expertise, saving them both time and effort by eliminating a vast swath of unnecessary mouse clicks.

Visual Studio versions 2008, 2010 and 2012 are all supported by KeyRocket Premium.

KeyRocket is also more personalized now, as each user can customize the frequency, duration and place on the screen that they will receive pop-up notifications. All they have to do is click on “Pop-up Settings” when they get a notification and make their unique adjustments.

Squash Bugs with GitHub Survivor

Allison Howen — Thu, 10 Jan 2013 19:30:00 GMT

Developers have a lot on their minds, which makes it easy for them to occasionally forget about bugs.

Development teams, however, can prevent bugs from becoming an issue with GitHub Survivor, which is essentially a dashboard that displays an overview of bugs in a GitHub-hosted repo.

The development team at 99designs, for example, implemented the dashboard as a way to better monitor bugs.

“We’ve found it helps keep our minds on bugs,” a blogpost from 99designs states. “It reminds us to make a small effort every sprint, gradually bringing the bug count closer to zero.”

It is important to note that the dashboard has a gamification element to it, because it features a bug leaderboard that shows which developers have closed the most bugs and which have closed the least. Additionally, the dashboard displays the current open bug count, the net difference in open bugs since the last reporting period, and charts for the number of bugs opened and closed in the last 12 reporting periods, as well as the number of open bugs in the same time frame.

8 Awesome Advertising APIs

Michael Garrity — Thu, 10 Jan 2013 14:00:00 GMT

Web businesses use application programming interfaces (APIs) for all sorts of things, depending on their unique needs and the demands of their customers. These interfaces allow website developers to easily migrate their software to different platforms, support multiple operating system versions and offer more functionality than system calls.

APIs cover a wide range of categories and can provide routines, protocols and tools for everything from back-end modifications and payment processors to blogs and social media; in other words, APIs cover a lot of ground. Any Web professional could probably find one that will enhance his or her business.

However, because of the sheer number of competitors out there (a figure that grows on a daily basis), no company can be successful in today’s online environment without advertising. It doesn’t really matter what they do or which industry they operate in, at some point, they’re going to need to get their name in front of interested consumers.

Well, there’s an API for that! Keep reading to learn about eight awesome advertising APIs that each uniquely help Web businesses reach out to consumers on the ‘Net.

Smadex
The mobile advertising service Smadex allows advertisers and publishers to put their ads into mobile apps and content. This API lets developers access Smadex functionality and then integrate it into other applications, which includes integrating ads into content, retrieving ad information and managing account information.

Ad Server Solutions
Not surprisingly, Ad Server Solutions gives publisher, advertisers, agencies and networks ad serving solutions, as well as an integrated platform for advertising campaign management. This allows users to plan, buy, optimize and analyze their campaigns from within a single platform.

Enthuse
It seems like one of the best ways to lure in consumers on the Web these days is to reward them for just paying attention to you, which is why gamification services have become so popular over the last few years. One such “fan loyalty” service is Enthuse, which allows brands, teams and companies to reward their fans with prizes and offer them exclusive promotions. Now you can cash in on this trend with the Enthuse API, which gives developer access to integrate Enthuse functionality with other applications.

Voodoo.com Domain Parking
With Voodoo.com, Web pros can make money off their domains, as the platform helps them manage their domain portfolios and optimize their domains to display relevant landing pages and advertising. The platform provides an assortment of tools, such as an ad provider, one- and two-click landers, customizable layouts and this API, which is free and provides access to all of Voodoo.com’s functionality.

SodaHead
If you’re unfamiliar with SodaHead, it’s an opinion-based online social community platform that aggregates online news stories and events for users, in addition to a providing a polling platform and methods for marketers to reach out to its user base. The API gives up access to single polls, multiple polls and the ability to cast a vote by Poll ID and/or Answer ID.

Sendori
Sendori makes it possible to selectively reroute URLs that have been directly entered into an address bar by catching common typos or URL variants and sending the user to their desired site. Not only does this help webmasters ensure that users land on their site, but it also protects consumers from potential malware attacks. By using URL rerouting for a specific advertising campaign, publishers and marketers can send traffic to their intended promotional messages, thus increasing the value of their paid advertising efforts. Sendori’s API supports targeted ad campaigns and the ability to manage traffic sent to campaign-specific URLs, as well as supporting the grouping of separate ads for common management. That’s not all though, as this feature-rich API also provides thorough reports on ad performance and related traffic and various administrative functions (e.g. budgeting advertising expenses).

PosterOven
Not the most visually creative person in the world? That’s fine, because you don’t have to be with PosterOven, which provides multiple templates and designs that help users create their own PDF posters using their social media information or QR codes. The API lets developers integrate this functionality into existing applications, allowing users to populate templates, create and display posters.

InviteBox
InviteBox is a neat and easy way for online businesses to design and launch social referral programs, allowing them to immediately reward customers for sharing their site via various social channels after reaching a specific sharing goal with coupons, promo codes, download files, access to “locked” features or any other customizable treat that they can come up with. They can even set up promotional contests that have customers compete to get the most referrals. Using this JavaScript API, users can create their own customized rewards and reward conditions, and the Reward callback API can issue server-to-server calls when customers make posts to social channels, when referrals visit their site or when someone completes a referral goal.

Look Out Below! 15 Fabulous Footer Designs

Michael Garrity — Thu, 20 Dec 2012 18:51:00 GMT

One of the most literally overlooked aspects of website design are footers, the area at the very bottom of a page that provides information and links to other areas of the site or outside Web properties (such as social media profiles).

All designers use this space differently. Some of them are information heavy, including “fine print” like terms & conditions or privacy policies. Other footers are used primarily for linking to other sites or pages on the site. Another popular use of footers – and something that is found on most of them – is to provide contact information, which can range from links to social media profiles to an email address and/or phone number to a brick-and-mortar address. Finally, some designers use this area as a call-to-action to entice users to signup for an email newsletter or other promotional endeavor.

How a site owner chooses to use their footer area is largely dependent on the action they want visitors to take, but it’s all moot if their footer design doesn’t catch the users’ attention, and a good design is one that is creative, engaging and in-line with the look and feel of the rest of the website.

For some inspiration, have a look at these 15 fabulous website footers:

Seed Hunter

Weblabs Solutions

Rancid

Me & Oli

The Midnighters Club

Superior Contracting Services

Poogan's Porch

Mecannical