Responsive Archives - Untame

Feb 21 2013
18

How To Build A Responsive Lightbox Gallery With Twitter Bootstrap

Posted by | Tutorial, Twitter Bootstrap | 7 Comments

Integrating Twitter Bootstrap with PrettyPhoto

Images are a driving force of the web. Compelling images can bring visitors to your website, and exciting displays can keep them there. Over the past few months we have delved into the possibilities of Twitter Bootstrap. At times, however, Bootstrap alone does not contain every component that we may need for a project.

Today we will discover how to complement a Twitter Bootstrap-powered image gallery by implementing the PrettyPhoto lightbox plugin! The end result will be an excellent template to build out image galleries that are simple to put together and incredibly easy to manage. Read More

Nov 20 2012
0

Responsive Web Design: Videos With FitVids

Posted by | Tutorial | No Comments

We have spent a lot of time covering ideas behind responsive web design. However, up until this point we have focused almost solely on the “Big Picture”. So today, let’s take some time and dive into an element that is essential when it comes to designing responsively. Video!

After all, it would be easy to say that people love watching videos online, so it only makes sense that we should design responsibly to meet our users where they are, on the devices they are using. So with that in mind, let’s take a look at FitVids.js by Chris Coyier and Paravel.

FitVids is a light weight responsive web design jQuery plugin that allows designers to not only design responsively for small screens, but also for large environments as well. It could make sense that using a tool like FitVids could allow you to embed several blog format videos into a page, and also create awesome full screen video backgrounds! Cool huh?!

If you would like to use FitVids within your own projects, it would be a good idea to check out the video above and follow along. However, if you are in a hurry then simply follow these steps.

Step 1: Download FitVids.js

Step 2: Include the plugin within your javascript (See Video for Example)

Step 3: Activate FitVids


<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

That’s it! Now you are up and running with FitVids and Videos placed within collapsing containers will bend to your will. So play around with it; I promise that you will find it capable of solving your problems and perhaps even providing a bit of inspiration! Just think of what you can create with a tool like FitVids in your pocket. So get back to designing your next cool site!

Oct 17 2012
4

Twitter Bootstrap Part 3: Design a Responsive Contact Page

Posted by | Design, Tutorial, Twitter Bootstrap | 4 Comments

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.

Check Out The Whole Series!
Twitter Bootstrap Part 1: What is Bootstrap Anyway?
Twitter Bootstrap Part 2: Design a Responsive Homepage
Twitter Bootstrap Part 3: Design a Responsive Contact Page

View The Demo

Let’s Get Started

Let’s take a look at what we will be building today.

Download the Source

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:

Hero Unit:
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
Bootstrap Forms:
Individual form controls receive styling, but without any required base class on the < form > or large changes in markup. This results in stacked, left-aligned labels on top of form controls. Bootstrap doesn’t supply form functionality as much as it nearly perfects the User Experience or UX. Valuable hover states and built in validation are a huge help when coding a site.
Bootstrap icons:
140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons. If you need a bit more functionality you could also use the incredible Icon Fonts provided by Font Awesome
Well:
Control padding and rounded corners with two optional modifier classes (“well-large and well-small”).
Bootstrap Buttons:
Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only “a” and “<button>” elements for best rendering

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!

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.

Jul 13 2012
0

Twitter Bootstrap Part 1: What is Bootstrap Anyway?

Posted by | News, Tutorial, Uncategorized | No Comments

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.

What is it anyway?

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.

Built on HTML5

Ahh the future of the web. While it may be the future, HTML5 is great because it simply allows us to write more semantic, readable code. Bootstrap is packed with HTML5 best practices to help make sure that you are creating future-proof projects for your clients.

 

CSS3 Integrated

If you would like to get started with CSS tricks like box-shadow and gradients Bootstrap is a great place to get started. Better yet, they have taken the time to provide excellent fallback support for older browsers.

 

Bootstrap is Open Source

Would you like to shell out some cash to get your hands on Bootstrap? Too bad! It is completely open source. In fact there are already some great projects built upon forked versions of Bootstrap that integrate even more awesome features.

What Does Bootstrap Do Exactly?

The Grid

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.

Helpful CSS

“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.

Built in jQuery Plugins

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.

Each plugin combines to provide a consistant user experience throughout any project. However, it is understandable if you find yourself looking through this list of plugins and saying “Hey, my project will never use that plugin”. That’s okay, you may download your own customized copy of Bootstrap including only the files that you require for your next project using their Bootstrap Builder.

What’s Next?

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.

Start planning your project today. Get Started