responsive design Archives - Untame

How To Create Full Screen Background Images In WordPress

Posted by | Tutorial, Video, WordPress | One Comment

WordPress Background Manager

As the internet changes into a more fluid experience, with websites being accessed from tablets, smartphones, laptops, kiosks and even cars, a trend has started to emerge. In an era wherein “Intentional Layout” is dying off, designers must find new ways to provide visual interest. Commonly, this search has led to the use of images. Because, hey, images are interesting by their very nature. In this post, I will show you how to replace your current WordPress background tool with the incredible WordPress Background Manager plugin. Read More

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

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!

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.

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!

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.

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.

15 Excellent Ways To Learn WordPress

Posted by | WordPress | 4 Comments

WordPress is huge, and it is only getting bigger. Over the past few years more and more developers are turning to WordPress to deliver accessible websites to their clients. This means that at a very basic level it is advisable that no matter your position in the internet world, having a good working knowledge of WordPress is a must.

For Beginners


Welcome to WordPress! This area is dedicated to users that need to know the very basics of how to work within the context of a WordPress site. Need to know how to add your first post? This is the section for you! We assume that right now, you have no need or desire to learn to code your own sites and that is completely cool! A huge amount of the largest blogs and sites in the world are operated by users that have never touched a single line of code. You are in very good company with WordPress!

WP101

A landmark series for WordPress beginners. Not necessarily because it had never been tried before. WP101 is a landmark because it is an incredible resource, provided absolutely free that is of just about the best quality you will find.

WPBeginner

Need a refresher on how to operate your new WordPress site? WPBeginner will help you through the process, from picking out a good hosting company to setting your new site up.

 

WordPress | Where To Start

Spoilers! The WordPress Codex is pretty great. Not only is it great, but it is the go to place for the latest in WordPress best practices.

 

WordPress Essential Training (premium)

Lynda.com hosts a variety of training videos and courses. This WordPress essential training video series will take you through just about everything that you will need to begin your publishing journey.

Get Going With WordPress

Plug Alert! Our very own post on what to do once you have installed WordPress.

For Designers


You know the basics. Perhaps you already create awesome sites for your clients using static HTML, CSS & JavaScript and are ready to let your sites go to the next level. WordPress will give you the power to offer clients interactive, editable and feature rich environments. This section is for you, we will cover a few incredible places that you can take your skills to the next level.

WordPress 3: Creating and Editing Custom Themes

Chris Coyier will guide you through a surprisingly easy to understand tutorial on how to create your very own WordPress theme.

wp.tutsplus.com

The home of some of the best darn WordPress tutorials around. Sneak back to the basics and theme development sections to take advantage of the TutsPlus+ resource.

How to be a Rockstar WordPress Designer

A watershed publication in WordPress theme development. What’s better, one of your teachers is the CEO of the entire Envato network of sites… not too shabby!

How to be a Rockstar WordPress Designer 2

Dive deeper into WordPress with this one. Know how to set up a general theme? Nice! Now understand how theme options and plugins work with part 2.

WordPress Codex

This should be on your bookmark bar. Take a load off and go read the codex for an hour or so. I promise you will learn something!

For Developers


You have been there and done that but maybe not yet with WordPress. If you have spent the past few years custom coding your own CMS for your clients or maybe using another CMS like Joomla or Drupal. In this section, we will assume that you have a working knowledge of PHP and will feature some sources from a few WordPress masters!

Digging Into WordPress

Chris Coyier is back with Digging into WordPress. This book basicly defines extensive. Would you like to share in WordPress best practices? There is no better place to start than right here.

WordPress Codex

Are you noticing a theme here? I am not kidding when I assure that you need to make the codex your new best friend! I was totally that guy… “I’ll never need the codex”. Then I wised up. If you are a WordPress developer, the codex is simply the fastest and most searchable way to get the info you need!

ThemeShaper Blog

Get to know WordPress from the theme masters themselves. These guys word at automattic and curate the giant library of free WordPress themes. Better yet, they have dedicated this as a resource to share their knowledge with fellow dev’s.

wp.tutsplus.com

Past the mid-level tutorials, wp.tutsplus.com is really a place where you can dive into complex builds, solving niche problems. All throughout the comments of this site you will find a community of fellow dev’s that are solving problems right along side of you.

WPMU.org

WPMU is a massive source of information, founded by some of the most advanced WordPress plugin developers on the planet. It would serve you very well to make WPMU a daily stop.


There you are, a few of the absolute best ways to learn WordPress no matter your skill level or need. Do you have a favorite that we didn’t cover? Let us know in the comments below!

Twitter Bootstrap: Build A Stunning Two Column Blog

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

Hi there, and welcome to the latest in our series of posts covering Twitter Bootstrap. So far we have given a proper introduction to the framework, shown you how to create a responsive homepage and made that even faster with BootstrapCDN.

Today, we will expand on the idea of building pages with Bootstrap that you can use within your own projects. The Bootstrap framework provides for a giant amount of productivity to be completed within a relativly short period of time. Today’s tutorial will cover nested columns in more depth, and provide you with a great beginning point for a 100% responsive blog style layout!

 

View The Demo | Download the Files


One of the core concepts to understand when laying out a page using Bootstrap is the idea of nesting divs using “rows.”  Essentially, we are trying to declare an outer container wherein we can safely nest our inner divs. In this case, we are doing it with posts and widgets but you could use this technique for just about anything. 

Nesting divs within containers is a very easy concept, yet it’s also easy to overlook. Just remember; when beginning a new area that will contain subsequent divs, you will need to use a row to ensure proper alignment. The use of rows provides for a rather brilliant alternative to the standard practice of using “Alpha” and “Omega” classes when designing within a grid.


Building incredible layouts with Twitter Bootstrap is easy and efficient. Once you have mastered a few of the simple techniques provided by the Bootstrap framework, just about any layout is within reach. As you can see, it only took about eight minutes to create a fully functional markup of a great looking blog page. If you would like to take a gander at the code or demo just check the links above.

Start planning your project today. Get Started