Category Archives: Showcase

Nov 15 2012
0

15 Reasons To Build With Twitter Bootstrap

Posted by | Showcase, Twitter Bootstrap | No Comments

Okay, we admit it! Here at Untame we love Twitter Bootstrap. We often start a project thinking about how we can best leverage our favorite framework help us out. After all, by leveraging Bootstrap we can predictably create a more refined product for our clients while at the same time speeding up our workflow **web nirvana.

If you are about to embark on your next web project, it may serve you well to understand just why using Twitter Bootstrap is a great idea.

Bootstrap is Free!

Yep free, like free beer, only better (I think). Seemingly countless hours have gone into the creation of this incredible framework for the benefit of designers and developers around the world. Perhaps one of the most selfless actions it that a master craftsman contributes a work purely for the enjoyment and benefit of their peers. Sweet!

Used By The Best

At Untame, we love our work and we will be the first to tell you that we are proud of it. However, we are definitely not the only show in town and absolutely not the only group that has a certain love of all things Bootstrap. Take a look around any brand new web app or service that you consider well designed. More and more startups are using Bootstrap because of its flexibility and ease of use.

Simple Yet Powerful Grid System

Float based layouts can be a real drag to configure, plain and simple. When I first started in my design career, getting layouts correct along with each element within them likely cost me more in time than I ever earned. Sure, in the design world a keen knowledge of layout methods is essential. However, if there are bigger fish to fry, then it simply does not get much better or easier than the Bootstrap grid system.

Gone are the days of declaring a “first” or “last” class for elements at the beginning and end of their respective rows. Now, if you can simply place your elements into a row container and count to twelve, you are good to go!

Cutting Edge Responsive Design

The web is becoming squishy. In fact, a squishy web is almost a defacto standard now. However, so often it is difficult to understand exactly how to best present your content in a 480px view-port when we are all used to designing for 960px. Using a mix of JavaScript, CSS and intelligent grids, Bootstrap will help with almost every responsive element that your design may require. Need a responsive navigation that is easy to use and implement? Bootstrap has your back!

Fluid or Fixed: Your Choice!

If you are designing a full web application with a full screen view and a intricate interface, it is likely that a fixed grid system is not what you are looking for at all. That’s okay, Twitter Bootstrap offers a fluid layout that is every bit as dynamic as their fixed layout. Still responsive, the fixed layout allows for the use of the very same layout techniques as the fixed. Better yet, you can even combine fixed with fluid any ol’ time you like. How do you like that for flexibility!

Incredible Starting Styles

Beautiful typography, awesome buttons and readable tables are just a few of the things that get overhauled with Bootstrap. A css reset this is not, though it does include the awesome normalize.css baked right in.

Forms That Don’t Suck!

Styling web forms can be a drag! One input or option list may look entirely different from one browser to another. However, Twitter Bootstrap includes styles for great things like inline forms, appended and prepended inputs. Need to add a dynamic dropdown menu on to a prepended section of a text input? (sounds scary) Well Bootstrap has you covered.

Made by the Pros (You are in good company)

Maybe you have heard of Twitter (small startup, I think it was just kickstarted). Well a few of the best engineers and designers at Twitter have put their weight behind the bootstrap. So, with little reservation I would suggust that Twitter Bootstrap will work for your project. Unless you are wanting to make a GeoCities clone… in that case I’ve got nothing for you.

Wide Open Customization

If you hate the Bootstrap grid, but really love the design of their buttons and icons, that’s okay! Head on over to the Twitter Bootstrap customize page and bake up a bootstrap of your very own.

Preprocessor Friendly

Bootstrap was created using the LESS CSS preprocessing markup. Less makes it super easy to alter items sitewide using a few variables here and there. You may not find the LESS enabled version of Bootstrap on their home page, but you can grab it directly from the main github account.

Developer Friendly Style

I love my back-end developer buddies. But from time to time my friends find themselves so entrenched within the back end code that the idea of having to create a front end layout just translates to frustration. No more! With Bootstrap, a dev can create an entire layout using only HTML and a few classes. Yep, never once touching a CSS file. So, if you have an awesome new app in mind, and don’t want to take the time to care about inset box shadows or border radius, Bootstrap is worth a look.

Baked In jQuery Greatness

How many times have you searched the net looking for the top 25 greatest lightbox and gallery plugins of the month? I know I have. This framework offers functional, vetted jQuery plugins that serve to make like a little easier.

Bootstrap Is Modular

With Bootstrap it is absolutely not all or nothing. There have been times that I have chosen to use just a few items like the Navbar and a few jQuery plugins. Other times I opt to use just about everything. One of the coolest parts of Bootstrap is that each individual part can survive on its own. However, if one part simply requires another, the dynamic download is smart enough to know that and include the proper files.

Community

What makes systems like this so great? I firmly believe that it is often the communities that grow around them. Twitter Bootstrap is growing all of the time and a lot of that is driven by community feedback.

Moreover, groups have extended it by developing incredible add-ons like FontAwesome (Check out Sarah’s post)

This is the kind of thing that just excites me about the future of web development. Imagine where WordPress or Drupal would be without their communities. How cool is it that a front end development kit is receiving a similar type of community contribution?

Not a One Trick Pony

If you can think it up, in all likelihood Bootstrap could be an aid in getting there. If you are creating a new blog theme or the next Spotify (they use Bootstrap too) there is a component of this framework that may very well solve a problem that seems tough.

Oct 08 2012
1

Top 10 Responsive Design Tips and Tricks

Posted by | Design, Showcase, Tutorial, Twitter Bootstrap | No Comments

Responsive design is changing how we view the web, literally! Whether you are getting started with responsive design or are a seasoned responsive pro we have a few tips that just might help with your next mobile project.

Choose A Great Framework

When beginning a responsive design, it is important to start with the selection of a solid foundation. Since the framework will inherently inform many design elements, you will want to carefully consider your needs. Will you choose a bare bones framework like Skeleton? Or does the scope of the project that you are working on require something with a bit more meat to it like Twitter Bootstrap or Zurb Foundation?

If you would like to know more about Bootstrap and Skeleton we have covered them several times in the past.

Minify Your Scripts & Stylesheets

It’s not rocket science but it is very easy to forget. Do you want your pages to perform to their maximum potential? Yes? Then get started with minifying your CSS & JavaScript.

Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

Every website a user visits is downloaded in some form to their local computer. So, if you were downloading a large amount of files from a site, wouldn’t it be preferable if the content providers were to place all of those files into a single zip file? Minification essentially does the same thing, cutting out everything except for what is absolutely necessary. So be kind! Minify!

Squish Your Images

A majority of the time, the culprit for large download times is the ever-giant image size. So, why do we need to take care of image sizes? The very same reason that we minify CSS and Javascript. It is only to the benefit of our server and our users if, as a rule, we serve up the smallest file sizes possible that still serve to preserve the integrity of our vision.


Original size: 2.0mb

New size: 161kb … Which would you rather download on your phone?

Consider a Preprocessor

We have talked about CSS preprocessors in the past, and if you have not tried them yet, then please do yourself a favor and give a preprocessor a shot today! Once you begin to preprocess styles, not only will you have access to amazing mixins and in-stylesheet calculations but also automatic organizing and minification of your stylesheets.

Want to get started working with a preprocessor? It doesn’t matter if you use a Windows PC or a Mac, here are some helpful tools to get you started.

Develop For Mobile First

Perhaps you have caught on to the general theme of this responsive design roundup. So much of what constitutes responsive design can really be summed up in responsible design. Bob Dylan said that “the times, they are a’changing” and he was right! Mobile ready websites are no longer a luxury. If a brand wants to engage with its customers or if a restaurant wants to attract new clients on their night out, a consumer better be able to engage them from his or her phone!

Mobile-first design would dictate that the design of your site no longer has much to do with the layout of your site. Mobile-first design would suggest that a web designer must look to communicate a brand image through the use of color, graphics, fonts and design elements first. So, don’t think of the phone or tablet as a hindrance to your artistic brilliance. Start designing on the phone first, then with every iteration simply enjoy the extra canvas that larger screens allow for.

Get Testing

Does your site look great on the desktop, and pretty rad on your iPhone? Congratulations! However, I suggest that designers and developers take a look at the other screen sizes just in case. Not only can new electronics be cool, but they are also useful for testing! So go for it, grab that Kindle Fire or Nexus 7 that you have been eyeing.

Ensure Touch Friendliness



If you are using an awesome jQuery slider within your responsive design, it may be a good idea to double check that it is touch friendly. After all, having to mash around for little nav points on a slideshow is never fun. Engage your customers by integrating touch friendly elements.

Use A CDN (For Free)

Content delivery networks help to serve up files to your viewers in a responsive way that is likely closer to them than any single server company that you may host with. What’s better? Often, a good CDN will take care of image optimization and CSS/JS minification automatically for you.

Learn more about why we use CDNs by checking out these posts:

Use FitVids or FitText If Applicable

If you also serve up a bunch of videos on your site then maybe video size has become a problem. It can be hard to deal with video on responsive sites, especially since exact device widths can be unpredictable. We can fix that! The very kind folks over at Paravel and CSS-Tricks.com have created a few simple and lightweight scripts that will take care of large videos or even giant text for any screen that you can think of!

Be Inspired!

Responsive design is really cool! There are thousands of designers and developers that are learning how to morph their workflow to compensate for all of the new requirements that should be taken into consideration. So, take a look around! Check out cool sites like Dribble.com or Codepen.io and see how other pros are doing it! It is certainly cool to be inspired by the work of others and find ways to contribute as well.

Sep 19 2012
0

Responsive Design: 15 Free & Awesome Tools

Posted by | Design, Showcase, Twitter Bootstrap | 2 Comments

Here at Untame, we focus our design and development strategies around a holistic approach to the web, across any web-ready device. After all, web usage on phones and tablets is growing more every day; that’s why a highly responsive internet is so important. We want to deliver great web experiences to as wide a swath of visitors, no matter how they access the web.

Featured below are just a few incredible resources that may just help web designers or developers solve a few tricky responsive design problems.

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. FitText provides a responsive solution to text size. No more fussing with 52px headlines on the iPhone version of a website, pretty sweet!

Fitvids

Flash video can be difficult. However with FitVids responsive flash video can become a problem of the distant past. Simply activate a bit of JavaScript and videos will bend to your every need.  (A very special thanks to Paravel and Chris Coyier for FitVids and FitText)

Skeleton

Perhaps the single most simple solution to developing a responsive website or project. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Twitter Bootstrap

We’ve professed our love for Bootstrap more than a few times on the site. However, did you know that Twitter Bootstrap does not only include the ability to design a fixed width responsive site. Bootstrap also includes a Fluid grid layout designed to fit any screen at all.

Zurb Foundation

To say Zurb is advanced would be like saying that Dr. Neil Degrasse Tyson is only kind of smart. Zurb provides not only a responsive framework in order to layout a design. Zurb also includes just about every Javascript or CSS element that a responsive project may need.

The 1140px Grid System

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. If you require a folding grid system. Golden is a great place to get started.

Now 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

Flex Slider

FlexSlider is an awesome, fully responsive jQuery slider plugin that is being cared for by the WooThemes crew. FlexSlider is easy to use. Even better, FlexSlider provides or hardware accelerated touch feedback where available.

Nivo Slider

The go-to slider for web developers and designers around the world is now fully responsive. It very simply just does not get any more simple than Nivo.

Style Tiles

Often responsive design simply does not mean exacting PhotoShop design placement. Styletiles provides a method in which a designers can communicate the “atmosphere” of a design.

Semantic grid system

If you are a LESS or SASS user, then you might want to take a long look at the Semantic Grid System. Tired of using unsightly layout classes throughout html markup? Semantic provides for pre-processed methods in which to apply relevant styles to semantic elements.

Spritepad

Being responsible about responsive design can mean cutting down on download times at every corner. A great way to cut down on HTTP requests is to place commonly used images within a sprite image. Spritepad makes it easy to create a sprite and even helps provide the relevant CSS code to render your sprite correctly.

Responsive Images

The Filament Group is at it again, delivering on a quick and simple method in which to query the relevant pixel density of a device and serve up a perfect image.

Retina.js 

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

TinyNav.js

TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected=”selected” for that item.

As you can see, the responsive web is growing every day. Choosing the correct tools can make a web crafter’s job a whole lot easier. Take a look at a few of the resources above and let us know what your favorites are in the comments below.

Sep 12 2012
0

15 Incredible Sites Built With Twitter Bootstrap

Posted by | Design, Showcase, Twitter Bootstrap | 2 Comments

Here at Untame we have a special place in our hearts that is only filled by one thing – responsive design and smart design (okay, okay: two things). Twitter Bootstrap is a flexible front end framework that provides developers and designers an incredible set of tools that they can wield in as large or as small a capacity as needed. In any number of uses, there are tons of great sites that benefit from the Twitter Bootstrap framework and we want to highlight just a few!

The Pink League

Improvely

Discoursehq

leanix

CodrSpace

BreweryDB

Opencooks

NoteSurf

Resource Guru

Gusta

Cup Trek

Bagel Hint

Percentage Calculator

Sweet Soundtrack

NameVine

Well there you are! As you may be able to see purely from these examples, Twitter Bootstrap is no one-trick pony. One of the things that makes Bootstrap so simple to use and beneficial to designers and developers is its ability to become modular. Want to use just the javascript plugins that Bootstrap offers and could not care less about the grid based framework? No problem! Just head over to the Customize page on the Bootstrap site and weave a web of awesomeness baked fresh just for you.

Just can’t get enough of Twitter Bootstrap on Untame? Check out a few of our recent posts.

Aug 06 2012
0

20 Incredibly Beautiful Free Google Fonts

Posted by | Design, Showcase | No Comments

When you decide to start the process of creating the right design for your latest web projects, you want to make sure that it has a little something special to help it stand out from the crowd. If you find yourself at a loss for how to achieve a little extra “pop”, don’t fret; you are in luck! Today we are going to be showing you some beautiful fonts that can make your site sparkle.

Traditionally, web designers have been relegated to using only a few “web-safe” fonts in their designs, however a trend that is only growing has come about offering the ability for designers to access web-fonts. Webfonts allow designers to use fonts that are no installed on the viewers computer by accessing them via a remote server.

Google web fonts is an absolutely free service that provides a unique user interface wherein a designer can surf through an ever growing library of fonts and choose one that matches their design direction perfectly. At Untame, we love and use Google web fonts all of the time, and thus, we put together a collection of a few of our very favorites.

Antic Slab

Berkshire Swash

Eagle Lake

Economica

 

Ewert

Kaushan Script

Londrina Sketch

Krona One

Lovers Quarrel

Russo One

Arvo

 

Josefin Slab

Bitter

 

Open Sans

Oswald

PT Sans Narrow

Raleway

Rock Salt

Syncopate

Ubuntu

Seems pretty easy right? Give Google web fonts a try, I think you will find that by simply adjusting the type on your web pages web fonts can help your site stand out from the rest. Adding web fonts to your site is also easier than ever before, if you haven’t already, check out the helpful video above for more instructions.  Do you have a favorite free font that we didn’t cover? Let us know in the comments below!

Jul 30 2012
0

15 Killer Plugins & Tips for Using WordPress as a CMS

Posted by | Showcase, WordPress | One Comment

To say that WordPress is extensible would be an incredible understatement. There are so many incredible uses for WordPress as a CMS that it would be almost impossible to review them all. However, your friends here at Untame would like to shed some light on a few ways that you can optimize your WordPress install for enhanced content management system functionality.

Pods CMS Framework

“Pods Framework is a content creation kit for WordPress that provides developers and editors with a flexible platform to manage and display custom content.”

The Pods Framework for WordPress is an advanced plugin that allows developers to manage content with a slick user interface. Pods allows you to add context and content to your WordPress site with ease.

Easy WP

Are you put off by the default WordPress dashboard? Have we got a solution for you! Easy WP simplifies with WordPress admin into a simple CMS allowing you or your clients to easily manage posts pages and content. Easy WP also taps into Google analytics for a little extra kick!

XML & Google News Sitemap Feeds

Optimize your WordPress for great Google search results by using XML & Google News Sitemap Feeds. This plugin will help keep your site up to date on Google feeds and results allowing you to pay more attention to creating great new content.

White Label CMS

Do you love WordPress, but need to make it a little more your own? White Label CMS will help you to brand your WordPress site with your company’s logo on the WordPress dashboard as well as the login screen.

Types

Sometimes the adverage post type of “post” just doesn’t cut it. What if you have specific needs? For example, if you run a movie website, it may be a good idea to create a custom post type of “Movies” with its own custom taxonomies of actors, directors… Normally this feat involves a deep dive into PHP code, however Types puts the power of custom post types into your hands!

Posts 2 Posts

Do you need an easy to understand way of making connections between posts, pages and other WordPress elements? You are in luck! Posts 2 Posts will help you create relationships between your content, easily allowing you to create related posts or pages sections with a simple UI.

CustomPress

Do you need to manage more detailed content than just a few blog posts here and there but still love the simplicity of WordPress? Check out CustomPress by WPMU DEV! This plugin offers a powerful UI allowing you to transform your WordPress site into exactly what you need. Use it to manage custom content types, fields and more.

Visual Composer for WordPress

Your pages don’t have to look like a plain ol’ wall of text! Extend your WordPress CMS install with the Visual Composer. With its easy to use drag and drop editor you can add all sorts of content to your site like grids, toggles, sliders, alerts and more. This is a great plugin to extend the usability of your WordPress site!

 

Point and Stare CMS Functions

Customize WordPress into the CMS of your dreams! Point and Stare adds specific functions that allows users to customize specific areas of WordPress to their liking. Do you have a client that will simply never use specific parts of the WordPress admin such as the “links” area? No problem, remove it!

Restrict Categories

“Restrict Categories is a plugin that allows you to select which categories users can view, add, and edit in the Posts edit screen.” If you are running a blog that has multiple editors or contributors than restrict categories might be just what you are looking for! Use restrict to control which categories your writers have the power to contribute to.

—

WP-CMS Post Control

“Hides unwanted items within the write/edit page and post admin area for each user role”

If you need a little more control over what your contributors are able to do within the post editor page then WP-CMS Post Control might be exactly what you need! Easily manage user abilities based on specific user roles.

—

Front-end Editor

Do you love the idea of WordPress and incredible open source awesomeness but wish you had some of the front end controls found in other CMS? If you write better when you can view your work live and in real time, check out the Front-end Editor plugin.

Advanced Custom Fields

Sometimes we need just a little more power than the WordPress editor or even custom fields allows. The Advanced Custom Fields plugin allows users to define an enormous array of field types and implement them with relative ease within post or page templates. In an even cooler turn, the advanced custom fields developers have created a great add-on store that allows for developers to create and sell incredible additions to the plugin.

Permalinks

From the tip jar… When you are using WordPress as a CMS one of the easiest things to overlook is the permalink settings. Permalinks are what you see within your browser address bar, and they also show up in search results. If you want for your new site to look professional, take the time to show the permalink section some love.

For a really nice permalink structure, you may want to create one on your own. To do this, simply click on the “custom structure” radio button and enter the following.

/%category%/%postname%/

(Take two of these and call me in the morning )

Reading Settings

Perhaps the most simple of content managment tips! WordPress was born as an incredible blogging engine, and it still is. However, recently WordPress has come into its own right as a fully functioning content managment system. Yet, one first install, your blog posts will automaticly be displayed on the home page of your site. If you would like to have your posts displayed on another page, simply edit the “Reading Settings” to display them within your desired area.

And there we are! I hope these suggestions get you moving toward your WordPress CMS goals. With these plugins you will be able to extend your WordPress install beyond what is normally capable of and develop a site that goes far beyond the WordPress blogging roots.

Jul 26 2012
0

15 Popular Tech and Culture Sites That Use WordPress

Posted by | Showcase, WordPress | No Comments

So, you are in the market to launch a brand new website. “We’re going to take over the world, influence the conversation and change online writing forever”, you say? Yet, the thing that you really need is a way to manage your content.

Here at Untame, we use WordPress to create a wide variety of blogs, corporate sites and more. So, it comes naturally to suggest that you might find benefit in developing your next project by choosing the WordPress CMS. Afterall, you would be in great company, since a study done this year found that over Half Of The Top 100 Blogs Now Use WordPress.

All Things D

 

9to5mac.com

 

GigaOM

 

Mashable.com

 

Ford Social

 

Mozilla Technologies

 

Playstation Blogs

 

Sony

 

TechCrunch

 

CSS-Tricks

 

TutsPlus+

 

NetTutsplus+

 

PSDTutsplus+

 

Smashing Magazine

 

Ebay Ink


Whew! Well, I hate to say I told you so, but hopefully a few of these sites are evidence that not only can WordPress power some of the most popular sites on the internet, but it can fit just about any situation or need. Take the an example of the TutsPlus+ sites from above. They have crafted a multi-million dollar business by exploiting the strengths of WordPress, using a built in feature like multisite to create a manageable network of compelling sites and businesses. So, if after considering what WordPress could provide for your own site or company, consider dropping us a note and let a few of the experts at Untame create an incredible site for you.

Start planning your project today. Get Started