I’ve created a WordPress theme for developers to use as a spring board for building responsive WordPress based websites for their clients. If you are a web developer you should go check it out!

[DevDmBootstrap Demo Site/Documentation]

The Story

About three months ago I had this idea that I would make a theme for small businesses that would be easy to use and contain some very business specific components (services, hours, photo-gallery,logo -all the basics to get someone up and running). I decided that first things were first (duh!) and I knew that I needed a “starter” platform to get things going. So I set out creating DevDmSmallBusiness based on Twitter Bootstrap 2.3.1. This was my first no timeline, could build it how I wanted to build it, no budget WordPress theme. So I really took the time to read EVERYTHING and try to understand what the best standards and practices for building a theme were. At my 9-5 we do a lot of basic theme building on the cheap or template flipping so I wasn’t getting the proper education I wanted.

I then saw a thread on Reddit where a theme designer was polling the hive mind about what they were looking for in a theme. The responses in this thread determined my mission. It was no longer to create a theme that I would profit from. The project turned into “How can I give back to this community?” I changed the project name and proceeded to create DevDmBootstrap. Now there are already a few Bootstrap starter themes out there but they were not tailored for developers in the way that I wanted to. Many have been sitting for months and months untouched, some don’t even work, some are bloated, and some are just, well, bad.

So I’ve spent all these weeks building this “thing” and trying to make it the best I could. Then the unexpected happened as I was nearly finished. Twitter releases Bootstrap 3 rc1. This was painful for me and I was pretty bummed but I had a decision to make.  Do I redo everything I’ve done for the new release candidate? or do I stay the course with what is already solid and push on?

In the end I decided to stay the course. I’d come too far to go back now. Even though I will lose some of those bleeding edge developers (until I release DevDmBootstrap3 THE RECKONING!) it was in the best interests of the community to provide a SOLID foundation.

This blog right now is using a child theme of DevDmBootstrap and I have a plan to create a few more child themes to show people what is possible.

At some point your mental focus changes when you work on something that you intend to give away for free. The community suddenly becomes EVERYTHING. You start to think about all those people who provided all those FREE plugins, themes, and advice that YOU have benefited from over the years. It is a feeling of liberation that washes over you as a new sense of purpose inside your heart is manifested.  The web as a whole MUST remain open and free. The opportunity for people of ALL casts to educate themselves and contribute to their world must BE FREE. It is counter productive to put a monetary “price” on progress.

 

 

3 Comments

Recently I came across Google’s PageSpeed checker extension for Chrome’s developer tools.  Page speed in general has always been a common sense thing for me. I think that is one skill that developers who grew up in the dial-up era vs the broadband era understand a little better than most. With that said I’ve apparently gotten very lazy! Nearly all my website properties were testing awfully low and slow.

The increase of widely available high-speed internet is breeding a NEW type of user. This new generation of user is far less patient. Your websites MUST be quick and fast or they move on. Google recognizes this. While there is some debate about your page speed affecting your SERP (Serach Engine Results Page) rank it just makes efficient sense to do everything you can for your clients and yourself when it comes to speed.  Why would Google make all of these speed tools and give you graphs about speed inside their Webmaster Tools if it wasn’t a factor?

To make your sites faster you simply have to make them smaller! This is what gzip does for you.

This video from Google explains gzip in some simple terms.

I tried to find any reason to NOT use gzip in this day and age.

There is NONE!

How to implement gzip in a few seconds

Apache Users

Apache users can simply put these lines in an .htaccess file at the root of there website directory. This covers most of your bases.

PHP Users

PHP has a nice gzip object that will detect the browsers available compression type and serve up the page accordingly. I just add this line to the top of any PHP files in my web projects.

Optionally you should be able to add: AddOutputFilterByType DEFLATE application/x-httpd-php text/html to the .htaccess code above but I have not tested it.

Windows IIS Users

I’m not one but it looks pretty straight forward. Maybe this Stackoverflow thread will help you.

Google PageSpeed Checker Quirks with CSS and JS files.

During my testing a spent a great deal of time wondering WHY the PageSpeed tool was constantly telling me my JS and CSS weren’t being compressed. Nearly every other gzip testing utility was telling me they were. In the end I couldn’t figure it out and eventually they went away.  If you are worried just try another tool like http://gzipwtf.com/

Are there other ways to make my site smaller?

  • Compress/Minimize your Javascript.
  • Minimize your CSS files.
  • Only serve up what you are going to have the USER be using!
  • Scale your images.

I obviously violate a few of these rules but that doesn’t mean you have to!

Resources

One Comment

If you are using Twitter Bootstrap you will use LESS if you want to pump out some quick color templates for your designs. In the world of CSS pre-processing there is LESS and SASS at the top. I’ve not dove into any of the SASS stuff but LESS was in front of me so that is what we will focus on.

What is CSS Pre-Processing?

LESS is for all intents and purposes a CSS programming language. There are variables, mix-ins, functions and all sorts of basic expression operators to speed up your CSS creation process. However, when you create these .less files they are not readable by any of the layout engines (WebKit, Trident, Gecko, Presto). The .less files must be fed into a compiler to generate a CSS file to use on the web.  You can use less.js (or many of the other emerging “on the fly” generators) but your website will suffer in speed for something you only had to do once locally.  Compiling the .less into CSS locally is STILL the way to go.

What programs are available to help me compile my .less files into CSS?

What to choose? Short Answer:  WinLESS if you are working with Bootstrap’s files. Crunch! if you ARE NOT working with Bootstrap’s LESS.

Long Answer: I tried out a few so lets just go down the list.

Crunch!

Crunch! Is a LESS editor and compiler in one. This is probably the number one option for MOST people getting into LESS.  It provides a nice interface and is built with Adobe Air. The only reason I’m not using it is that the current v1.5 doesn’t compile Bootstrap’s 2.3.1 LESS files. It throws an error every time. V1.6 fixes this problem and is being worked on in GitHub but I’m still kind of a boob about using GitHub so maybe you are able to download a new compiled version to install but it isn’t officially released as of writing this post.  Once v1.6 comes out this will be what I will use.

Koala

Koala is just a compiler with no built in editor. The cool thing about Koala is that it isn’t limited to just LESS files. It has the capability to compile SASS and CoffeeScript as well. For some reason Koala was VERY slow on my system. It took forever to start but seemed okay once it was started.

SimpLESS

SimpLESS’s redeeming quality is the ability to use Prefixr on the compiled CSS files.  Prefixr is cool because it automatically generates cross browser CSS. I use the Prefix plugin for Notepad++ to do accomplish this but there are JS files available to do it on the fly.  SimpLESS will read your LESS files -> compile them -> Run Prefixr -> Minify the outputted CSS files.

WinLESS

My favorite! WinLESS has won me over until Crunch! is updated. WinLESS allows you to select the files you want to compile and it does so ON THE FLY when the file is changed. It runs in the background and is VERY fast. So my process has become: Open WinLESS -> Load my projects’ LESS file directory -> Open my LESS files with Notepad++ -> Edit as needed. All I have to do is save the .less file and reload the page I’m working on in my browser. The CSS has been already compiled by the time I reload.  WinLESS also Minifys the output. In fact MOST of the LESS compilers will Minify the CSS file.  All Minify means is that all the white space and new lines in your CSS file are removed. The resulting minified file looks like one giant long string instead of a formatted document a human can read easily.

Resources

Leave a Comment

The time finally came conquer the responsive design monster.  I decided to redo my affiliate site Costume-Depot.com to make it friendly across ALL devices. I choose the Twitter Bootstrap CSS “framework” to accomplish this task. All the experience and philosophy stuff is after the pictures.

Desktop Version

  • @media (min-width: 979px)
  • Displays all features and images.

Some Tablets/Smaller screen version

  • @media (max-width: 767px)
  • Top Nav collapses
  • main header background image changes to a flat color.

Most small phone screens

  • @media (max-width: 480px)
  • Left column is hidden
  • Top logo and credit card images are gone
  • All the span(x) divs are thrown on top of each other. I didn’t know what to think of this at first. In the end I decided a REALLY easy thumb flicking up and down experience was best.

What have I learned?

  • Learning the beginning ins-n-outs of responsive design wasn’t nearly as scary as I thought it would be. I put it off for a long time and all I had to do was spend ONE day with Bootstrap.  Now I have the beginnings of a very valuable and marketable skill.
  • @media queries seem to be the bread and butter here.  Using specific CSS for the screen size is what this is all about.
  • Twitter Bootstrap is a great framework for people like me who are more gifted in the code parts of projects than the artsy parts.  If I am going to be completely transparent -the original Costume-Depot template was actually generated in Artisteer.
  • I know that Bootstrap has been around the block for a while now but honestly things aren’t moving as fast as people think in this industry. Aside from a few new CSS tricks that aren’t supported or some reworking of already done scripts to make them more efficient -CSS frameworks have been one of the only major additions to the web development process.  Some people hate them because they are purists and think that you must retain 100% control over what is going on in your code. I would agree with them but with the caveat that the end result is what your customer is going to see. They don’t give even the slightest “crap” about your ego massage from building something pure. You don’t have to write all the code yourself but you should be able to READ AND UNDERSTAND IT COMPLETELY.
  • Responsive design is something you should make the decision to use before you start the project. It needs to be part of the thought stream so you can imagine all of your little Divs and modules floating on the surface of a pool and decide what happens to them as the sides of the pool close in forcing them together.

Is responsive design faster/better than detecting a user agent and serving up a mobile version of your website?

No. In my opinion, no.  But it all depends on who you ask. Some would argue that it doesn’t matter anymore.  The cellular networks are fast enough and the data-plans are cheap enough that it shouldn’t matter if the user loads a little extra. I don’t think this is the case just yet but it is all moving fast enough that a responsive design is a very REAL option for presenting your content. Responsive design is a nice catchall to ensure the presentation of your data is controlled as much as possible without having to create multiple versions of your website (ie mobile.yourdomain.com). However I do not think there is enough thought going into the fine details of controlling every element to make it optimized for a mobile browser. Pictures are still loading big and displaying small.  The full versions of your scripts and css files are usually all still being loaded.  The div style may now be set to “display: none” but the html is still loading.  Your site ends up looking tiny and nice but inside it can still be a giant fat beast.

All that being said, “I love it!”  I love that it makes you think about every part of the site in more detail and I love that no matter what device I view the site on I know exactly how it will operate and look.

Resources

  • Twitter Bootstrap – Honestly the ONLY link you will need. The documentation is so good that I didn’t really need to look anywhere else on how to use it properly. 
  • Costume-depot.com – Buy some costumes bro 😀
  • Artisteer If you want to try it out.

One Comment

Privacy Policy | Refund Policy | Contact