Today’s post is all about enabling a very cool web design technique natively in a Twitter Bootstrap layout. We will be integrating a jQuery-based smooth scrolling effect that works responsively. Read More
We’ve said it before, responsive web design does not only have to be about viewing a large scale site conveniently on a small device. Responsive web design should also be about designing responsibly as well. With each HTTP Request we make while loading a web page, the harder the server has to work, and the longer the web page takes to load. Read More
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.
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!
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.
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!
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!
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!
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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
Twitter Bootstrap is a cutting-edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the always important contact page. Contact pages should be simple and easy for a visitor to understand. Therefore, we make use of good visual hierarchy practices to add both balance and flow to the page.
If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in part 1 and part 2 of our series.
Let’s take a look at what we will be building today.
The idea is rather simple. We begin using the Bootstrap Hero Unit to anchor the page and convey our initial message and purpose of the page. Next, we split the page into two sections, offering a Bootstrap powered contact form in the left hand side, while we offer our embedded google map on the right hand side.
Bing maps work just as well, if preferred. Simply use the same technique as featured in the video.
Our “Contact Us” page is filled with bootstrap functionality:
Thanks for checking out our tutorial on how to get the most out of Bootstrap for your website. We have some exciting Bootstrap-related projects coming up here at Untame so stay tuned for future updates!
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.
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.
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!
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?
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.
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.
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.
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.
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:
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!
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.
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!
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.
Hello and welcome again to our ongoing series focusing on Twitter Bootstrap. By now we have covered in detail what Bootstrap is as well as how to design a unique and responsive homepage using the front end framework.
Today, let’s take some time to talk about a great new way to access bootstrap for any of your projects. Content Delivery Networks play an important role for the global web. Instead of downloading website files from a single hosted location, a CDN allows for users to quickly access site files from a large distributed system of servers deployed across multiple data centers around the world. This type of distribution leads provides for easier access to common files, increased security for your site as well as speed.
Twitter Bootstrap is already a great front end framework and it is increasing in popularity among web developers and designers. So it starts to make sense that we begin treating bootstrap like some of its CDN hosted bretheren like jQuery, jQuery UI, Dojo and more. So the very cool people at NetDNA decided to do us all a favor and provide a Twitter BootstrapCDN platform.
Using BootstrapCDN developers and designers can access the vital Bootstrap CSS, JavaScript and image files over a high-powered CDN that even includes SSL access.
To get going, simply link up your CSS files in the same way you normally would in the hea of your document like this.
It is a good idea to link up a local stylesheet after the BootstrapCDN link in order to provide a semantic method of modifying incoming bootstrap styles.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" />
Then, in the foot of your document simply link up the JavaScript portion of bootstrap like this.
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
Now that we have successfully linked the CDN files to our head and foot areas of a webpage. Let’s discuss a bit more about why it is a good idea to obtain common files from a Content Delivery Network like NetDNA or Cloudflare.
The advantage of using files hosted on a CDN include:
Credit: John Gietzan
Start getting that extra little performance boost by using the CDN versions of Bootstrap and other common files.
Here at Untame we love to build websites for incredible clients, moreover we love to build those sites using cutting edge tools that provide functionality that help our clients stand out from the herd. Behind the scenes we have been working with a fantastic front end web framework called Twitter Bootstrap. Like you would think from the title, it was made by an incredible group of developers and designers employed by Twitter (you may have heard of em… little social network sort of site, may catch on one of these days).
Bootstrap was created by Mark Otto (@mdo) and Jacob Thornton (@fat) and handed over to a thankful world in August of 2011. Their goal was simple: to empower front-end developers to kickstart projects more efficiently and effectively.
Consider this the beginning of a larger investigation of the power of Bootstrap and how we use it (you can too) to create awesome web apps.
If you are reading this article (thank you by the way) you are likely a very attractive and powerful web designer or developer looking to spruce up your workflow. Well you are in luck. Using Bootstrap, you can create dynamic and fully featured websites quickly. Why? Because Bootstrap is a front-end framework in it’s truest form. Twitter Bootstrap delivers immediately useable simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
If you are familiar with using grids in your design process Bootstrap will be a great place way to improve your workflow substantially. Making use of a twelve column system, layout is as simple as declaring a row of content and them simply adding appropriately sized columns until you reach twelve… rinse and repeat. Best of all, Twitter Bootstrap offers several different kinds of grids that may prove useful with a wide range of projects. Including a fluid twelve column grid as well as a centered “more traditional” grid. Both however have been designed to maintain responsiveness, view-able on a wide range of devices.
“On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.”
Bootstrap bundles in a host of pre-styled elements perfect for immediate integration in a project. Best of all, the creators chose to build Bootstrap upon the lesscss.org preprocessing engine (a personal favorite of mine) making global changes to base styles as easy as editing a single line of code at a time! Ranging from immaculately styled Typography, tables, forms, buttons and built in icons, Bootstrap integrates enough style to fit just about any project. Not finding the right fit? That’s alright, Bootstrap is wildly extensible and scale-able to keep up with your needs.
Javascript is what makes much of Bootstrap so unique and useable. Many plugins that I use in my projects every single day are baked right into the framework from the beginning.
Now that we have an understanding for what Twitter Bootstrap is, we can begin to take it to the next level and use it in a practical application. In upcoming posts we will review how to create a beautiful website using the power that Bootstrap offers. I hope you have enjoyed this first post in our series on Bootstrap. Is there something specific that you would like to learn about? There is still time to let us know and we might just cover it specifically in a later post.
WordPress continues to get even better! The latest edition of the wildly popular content management system is out including several exciting improvements in version 3.4. Most of the changes are improvements to the WordPress core functionality and will require your theme developer to update your theme with the new functionality. Or if you would like to play with the update yourself, you could always just install a test version of WordPress and use one of the included themes such as “Twenty Ten.”
Check out this video for a short overview, and then we will discuss exactly how to update your WordPress install to 3.4.
Assuming that you already have WordPress installed (if you don’t, head over to our contact page and we may just be able to help out!) log into the admin area of your website, likely by typing “/wp-admin” after the core address. For example, if our domain was “www.testsite.com” we could log into our WordPress installation by typing “www.testsite.com/wp-admin”, entering our username and password and poof, we’re in!
Once you have logged in to your WordPress site, there will be a yellow alert bar on the top of the screen suggesting that you update to the latest version of WordPress. (Disclaimer: Before you update, please make sure that you have access to a backup of your site’s content) Now, click “Please Update Now” and proceed to the next page.
Notice that you should now have a couple of places to update the WordPress install. First, simply click to update the core install of the software. Once WordPress has successfully updated, return to the updates page and proceed to update any applicable themes.
Congratulations! You are up to date and ready to take full advantage of everything that WordPress 3.4 has to offer. Let’s dive in for just a moment.
First, head over to the “Themes” area and click on the link that says “Customize”. If you are using the latest version of the Twenty Eleven theme then you will be led to an interface where you may customize the site to your liking. Backgrounds, custom header images, real time layout control … yeah, we’ve got you covered.
How about one more incredible new feature, automatic twitter embeds. In the post editor, simply drop in the embed url from a tweet the you would like to show off anywhere in a post. Simply click publish and Bam!
There you have it, an interactive twitter element for your published page. Here your users will be able to follow you directly, reply, retweet or favorite your tweet without ever leaving the site!
There is a mountain of improvements baked in to WordPress 3.4. I would encourage you to set up a testing site and tinker around as much as possible. Hopefully this post has familiarized you with the process of keeping WordPress up to date and will encourage you to try out its new functions. If you would like to read more about 3.4, check out the post over at WordPress.org
