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!
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.
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?
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!
Apache users can simply put these lines in an .htaccess file at the root of there website directory. This covers most of your bases.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
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.
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
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.
I’m not one but it looks pretty straight forward. Maybe this Stackoverflow thread will help you.
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/
I obviously violate a few of these rules but that doesn’t mean you have to!
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.
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.
Long Answer: I tried out a few so lets just go down the list.
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 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’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.
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.
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.
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.