Best - Untame

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.

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.

Weekly RoundUp: 10 Great Web Design Learning Resources

Posted by | News, Tutorial | No Comments

So… You want to learn how to design your own websites on the internet, but don’t know exactly where to start? Let me tell you, I was in the same position that you are in years ago, and I know how important it is to get started with learning the right things in a good order. So that is what we are going to do today. Below you will find a few of the great resources to get you off and going in the right direction.

What You Need To Learn:

Don’t Panic! The world wide web is vast to say the very least. Before you know it you might come across blog posts, forum threads and entire books pointing you in one direction or another. However, the best way to get into this pool is to simply dip your toe in ever so gently. Let’s talk bottom line, the goal is to be able to put a page with some text and who knows, maybe even a few pictures on the internet. In order to do that you really only need to know a few things…

Put It On The Page: Basic HTML

HTML is the base of all web efforts. HTML tells the browser what content it should display on any given page.  Remember: HTML Controls the Content.

“HyperText Markup language: a set of standards, a variety of SGML, used to tag the elements of a hypertext document. It is the standard protocol for formatting and displaying documents on the World Wide Web.”

30 Days to Learn HTML & CSS (Free)

Perhaps one of the best and most comprehensive video series on the subject. I only wish that I had something like this to follow along with while I was first learning web design


W3 Schools HTML Tutorial (Free)

A still relevant standby. The W3 schools, while not always the subject of praise from the web development community can always be counted on for quality “best practice” information.


HTML & CSS – The VERY Basics (Free)

Chris Coyier is in many ways an “OG” as it pertains to web design and development tutorials and this one is no different. Follow along with Chris as he leads you step by step in understanding the basics.

 


Make It Pretty: CSS

CSS or Cascading Style Sheets allow for a designer to alter the appearance of the HTML placed on a given site. A CSS document will usually be called something like “Style.css” and linked to at some point at the top of an HTML document.

Remember: CSS is for colors, layout and more. However CSS does not control content.

30 Days to Learn HTML & CSS (Free)

As stated above, this tutorial is simply one of the best out there, and the CSS tips are no different!


W3 Schools: CSS Tutorial (Free)

Need help learning CSS? W3 Schools have your back. Also you may want to bookmark their page as it will be an instrumental reference for everyday questions about web design.


CSS From Noob To Ninja (Premium)

The first premium tutorial on our list, and for good reason. Noob to Ninja covers just about every nook and cranny there is in basic CSS. Once through this course you will be ready to jump into just about any CSS environment.


Give it A Place To Stay:

You have done it, if you have followed the tutorials found above then you have likely created a basic web page, styled it and are ready to put it on the web. The only thing you need now is a place to put it and a way to upload your content.

Software:

FileZilla (Free & Awesome)

It is an industry standard for a reason. FileZilla is absolutely free and incredible. Chances are, FileZilla is installed on nearly every single web designer or developers computer right now.


Transmit by Panic (Premium + MAC Only)

You need to transfer files. Maybe to an FTP or SFTP server. You need Transmit, the #1 Mac OS X


Hosting:

A Place to Call Home:

Hostdime

HostDime provides quality and reliable managed web hosting, reseller hosting, dedicated servers, and shared hosting for clients around the Globe.


Site5:

Site5 offers speedy hosting at incredible rates. Simply upload your shiny new documents and you will be up and running in no time!


5 Great Premium WordPress Plugins

Posted by | News, WordPress | No Comments

WordPress is an awesome Content Management System. In fact, for most of our projects here at Untame it is our CMS of choice. However, often we require functionality that moves beyond the core WordPress offering. This is where plugins come in. The “Premium” WordPress community has grown in leaps and bounds for the last several years allowing top WP contributors to make a living developing for the platform that they are so passionate about.

This post is no kind of definitive list of the absolute best plugins on this fine planet of ours. Instead, we want to showcase five plugins we have used in the trenches of development that have made a significant difference for us.


Fancy Gallery

“Create unlimited of galleries and each gallery can hold unlimited of albums. You can add different types of media – Images, Video, Websites to the albums.”

One of the most requested features of our sites is an ability to host an image gallery on a particular site. Fancy Gallery provides for a highly customizable way to not only adjust the look of your gallery but also manage the order of the pictures within it. If your site is photo heavy (I’m looking at you wedding photographers) then fancy gallery could be a great solution for your site.


Easy Custom Content Types for WordPress

Easy Content Types provides an extremely easy-to-use and intuitive interface for creating custom post types, taxonomies, and meta boxes.

WordPress is full of incredible functionality. However, some functions are less intuitive than others, even for developers. Easy Content Types allows developers to create and manage their own post types, taxonomies and metaboxes within minutes.


Visual Form Builder Pro

“Visual Form Builder Pro is an affordable WordPress plugin that helps you build beautiful, fully functional forms in only a few minutes without writing PHP, CSS, or HTML.”

Forms stink! From coding them to working with databases to ensure that the correct information is delivered to the client on time, forms can definitely be a hassle. However, it would serve you well to take the $10 plunge into Visual Form Builder Pro. Sure, the free version that we have already covered is fantastic. But seriously, $10 is not too much to ask for such a versatile plugin that makes managing forms almost (dare I say) fun.


RoyalSlider – Touch Content Slider for WordPress

RoyalSlider for WordPress is a cross-device jQuery content slider with touch-based navigation and responsive layout. It has a user-friendly admin area where you can manage slides, change slider settings, customize your interface and add blocks-captions using custom WYSIWIG editor.

IT is one of the most popular files on CodeCanyon, and for a good reason. Image slideshows are one of the best ways to deliver a message of show off your work on a site. RoyalSlider makes integrating one or multiple slideshows a breeze. With an easy-to-use administration area, RoyalSlider can integrate into a page or post within minutes. What’s better, RoyalSlider packs in all of this power while remaining responsive. Yep, that means that RoyalSlider would look equally at home on an iPhone as on a giant desktop screen.


Visual Composer for WordPress

“Visual Composer for WordPress will save you tons of time working on the site content. Now you’ll be able to create complex layouts within minutes! It’s built on top of the Twitter Bootstrap and jQuery UI framework”

We love to set our clients up for success. Sometimes that means giving them the ability to create their own layouts without a bit of coding knowledge. Enter Visual Composer. Using Visual Composer could not be easier. Simply tell the plugin how wide your site is, set a few custom colors and you are off to the races.


We encourage you to experiment with WordPress plugins of all sorts. Plugins help make a site stand out, adding key functionality in places that WordPress just does not cover on its own. Do you have a favorite plugin that we have not covered yet? Let us know by leaving a comment or using our handy contact form.

Start planning your project today. Get Started