Advertise here with BSA

The online webfont service Typekit by Adobe is a fantastic business model. Their premium accounts are very affordable in yearly billing cycles and you have access to over 700+ different fonts. These can be loaded directly into your CSS and used as a regular font-family value. Typekit is a quick way to dramatically improve the layout of your website.

I have put together this showcase of 30 personal favorites from Typekit. You can use these fonts in so many different places like your navigation, footer, header text, and even body content. Custom typefaces will take a bit of time to load – so there is a tradeoff for using all custom web fonts. However when used sparingly the Typekit library is a colossus unmatched anywhere else on the web.

Proxima Nova

Chaparral Pro

Adelle Sans

FF Meta Web Pro

FF Meta Serif Web Pro

Iskra

Museo

Minion Pro

Ratio

Brevia

Bello Pro

Kepler STD Extended

Rooney Sans

Alternate Gothic

Kepler STD Caption

Utopia STD

JAF Herb

Acuta

Cronos Pro

Bickham Script Pro

Coquette

FF Market Web

Droid Serif

Skolar Web

Fertigo Pro Script

Foco

Krete

Brioso Pro Caption

Modesto

Cubano

Advertise here with BSA

Advertise here with BSA

A look at real A/B tests across several large enterprises suggests: everything.

Designing a navigation bar can be a humbling exercise. We want to consider our visitors’ natural orientation when browsing a site, along with their short attention span, and lay out a navigation structure that’s logical yet elegant. So what’s most important when designers think about navigation bar and sub-navigation usability practices?

In this post, we’ll examine several A/B tests conducted by large enterprises with plenty of resources, great attention to detail and a hunger for answers flanked by scientific method. Looking at this type of data, it quickly becomes clear that minutia such as link style, sub-nav structure, list order and the like, aren’t minutia at all. They can prove critical to the success of the site.

To sub-nav or not to sub-nav? That was Dell’s question.

In this first case study, a clever and meticulous team of Dell marketers discover that 5 pages in particular on their website correlate highly with visitors who complete a lead form. Their hypothesis becomes: if we put these pages in front of new visitors, perhaps they, too, will be more likely to convert, as it seems something about these 5 pages is compelling to them.

The A/B test Dell ran involved a baseline version of the site as it was already set up, with the B version offering visitors the 5 critical pages as sub-nav items. That move yielded 39% more leads.

Version A

Version B

What type of sub-nav increased engagement for IBM?

This test sheds light on the importance of presentation when it comes to a sub-navigation structure. IBM looked at engagement metrics, measured as clicks on topics or images in a given section of the website, to determine whether on-site links or a drop-down box would be more successful as sub-navigation.

Here’s what that looked like.

Version A

Version B

The on-page links crushed drop-down sub-nav in the test, increasing site section engagement by over 219% at more than 99.9% confidence. That is a huge win. Does this mean we should always design sub-nav with on-page links? Not necessarily, but with this test, IBM makes a pretty strong case for considering that route.

It’s possible the users’ response was so strong in this case because the page in question was a category page, intended to help visitors find their way around a site section. From that perspective, this might make a good usability test for content-heavy sites and large e-commerce players.

Don’t ignore nav header copy

Does header copy really matter? The debate is open as to just how much impact minute changes can have, but according to this Autodesk study, it can make a major difference to your user.

Version A

Version B

Version B

Advertise here with BSA

Advertise here with BSA

There are some websites online that just scream branding. You immediately recognize the site based on their logo design, the font style, the icon symbol, even vector artwork. Branding is a crucial part of the design experience because your company and its brand is all you need to draw in some attention. Many popular brands such as Microsoft and Apple demonstrate what a good logo can do for your company.

But having a good logo is only the first step. Then you need to work this into your website layout gracefully, in a manner where users are impressed and invigorated by the design. I have put together this showcase of 34 various website layouts featuring beautiful website branding. I hope this collection may provide inspiration for other designers who are launching a new project online and need a quick fix of design ideas.

MongoDB

Sony

Dropbox

Campaign Monitor

AirBNB

Fork CMS

SiphonLabs

Flywheel

WB Shop

Checkout App

TonesAll

Trilulilu

Semantic Merge

Bamboo

DuckDuckGo

Little Debbie

UX London 2013

Mind Snacks

Moourl

Locomotive CMS

Visual Website Optimizer

Smore

Engine Yard

Awwwards

.net Magazine

Web Design Tuts+

Nova Crystallis

The Next Web

Smashing Magazine

Wirehive

Tone Agency

Ringadoc

Kickstarter

Freshdesk

Advertise here with BSA

Advertise here with BSA

People who have managed their own startup or websites online will know the stressors which come along through the job. It will require some finesse and a lot of research online. To install a CMS, create your own theme, back up the database, and fix bugs will require a whole toolbox of knowledge. But there are some helpful resources to be found online which may expedite the process of creating new website launches.

I want to present a small collection of webapps and tools online for startup founders and webmasters. These are each unique in their own right but should not be underestimated as a beneficial product. One of the most difficult tasks when managing a startup is to keep the company above water, and not to lose yourself in debt. I think that by focusing on the free options available it will provide a wider margin for saving money.

WordPress CPT Generator

I am always fiddling around in WordPress because it is the easiest and most secure PHP/MySQL CMS. One of the more complicated topics is related to building custom post types for your layout. Thankfully I found an amazing tool online which offers free custom post type generation for PHP source code.

You simply enter the details for your CPT and list all the important labels, features, and functionality. Then this resource will output a set of default codes which you may copy/paste into your theme’s functions.php file. I generally like to split up functions into library files like functions-cpt.php. Then you can include everything into the same file without needing to sort through huge blocks of code.

But overall I must recommend this resource as a staple for WordPress developers. I know that not every startup will have a purpose to use WordPress. But if you have yet to try it out, then I think it is an extremely beneficial system worth learning. And this tool will only help to shave off your development requirements.

Google Snippet Optimization

The quality of your website when it ranks in Google searches will reflect on the total number of clickthroughs by interested users. Both your webpage title and description are vital to attract any useful content. The Google SERP Snippet Optimization Tool is a free online resource for testing your headlines and page titles. Simply enter the text for your title tag and it will automatically display as if you are looking at the search results page.

I find this more useful now than ever before as I am constantly thinking of better solutions for page titles. Google will limit all websites to using 70 characters in length. So when you are dealing with a sub-sub-page 2 levels deep it can be tough to include all that context inside your title tag. But keep this page bookmarked for future reference as you are dealing with SEO strategies. I find myself running back to check new ideas all the time.

Hacker News

Although this may not exactly be a tool itself, the Hacker News frontpage gets updated almost 3-4 times per day. You can find startup tools and articles discussing business management, programming, marketing, and other related ideas. Hacker News is my go-to source for new startups and technologies. It is also a very specific website with a no-nonsense community of educated developers and businessmen interested in the startup scene.

Just check out the homepage titles and see if you find anything worthwhile. I have found numerous blog posts on this site which helped improve my knowledge of running a common startup. Not to mention further interesting topics like A/B testing, bitcoins, hiring & firing, mobile app development, even web server sysadmin ideas. There are also lots of tools and resources which make it onto the front page every day – so keep checking back whenever you have the time.

Sync.in

Collaboration with teammates or colleagues over the Internet can be tough. Using Google Drive and other alternatives can be too formal, and it is difficult finding a similar network or program to offer free services. Now cue the cloud-based text editor Sync.in which allows multiple authors typing and editing one document at the same time. You may choose to pay for a premium account which allows for private documents, or just use the open free notes which are public and sharable to anyone.

Sync is fantastic if you need to document ideas or links for a specific website launch. You may want to keep a running tally of employees or maybe new blog post ideas. Overall Sync may have 101 different uses for your startup team. Just by checking out their features listing it should become obvious if you would have a need to work within Sync’s online note collaboration tools. But give it a quick demo trial and see how you feel. The user interface is extraordinary and provides one solid web application for communicating with multiple teammates anywhere in the world.

Closing

I have enjoyed running my own startup online and although the team is small, we learn quickly and scale out operations in an agile manner. These tools are just a couple of ideas which we have been using for a few years now. There are obviously many other places you should check out for inspiration. Plus the majority of free tools have other competition which may provide a better interface or compatibility for a different purpose. If you have any suggestions for other startup resources please share with us in the post discussion area.

Advertise here with BSA