Personally, I’ve always been conscious on the code and loading times that BaseKit produces. For me, design is not just in the look of the site, but how well the code is engineered too. With that in mind, the team at BaseKit have been busy making sure you have the tools you need to build good looking, clean coded sites.
There are few basic rules that I follow when I build websites using BaseKit:
- Plan Layouts
- Use Template Columns
- Padding 0
- Less nested widgets
- Speed is Key
- Image Sizes
Plan Layouts
When I start building a site, I sit down with a piece of paper and pencil and start drawing out the basic layouts of each of the different pages. For example, a front page of a website is typically different to the inner pages. Once planned, I convert these layouts into BaseKit templates.
By pre-planning, you avoid creating a ‘one-size-fits-all‘ template; one that you throw lots of column and background widgets into to create your various pages.
Use Template Columns
By using the power of BaseKit templates, your automatically cutting down the amount of code that will appear on the page. A well thought out template will mean less column / background widgets; the more widgets you use, the more code that is required to layout a page.
Here’s example of creating the exact same layout using a column widget and the code generated:
Here’s an example of the code you get if you create layouts within templates:
Okay… maybe I’m giving the column widget a bad rap. We have a few elements to remove in the future releases as you can see from the picture, but overall the creating layouts on a template level will always be more code efficient.
Think about layouts carefully before creating a site. It will save you a load of hassle (and code!) later .
Padding 0
There is a feature in BaseKit that allows you to reduce all template columns padding to 0; Underneath the hood, BaseKit will remove the extra DIV tag from the structure required to apply the padding.
In my opinion, the less code, the better, but there is a trade off; Padding on these widgets will help you line up the various widgets inside them without too much thought, but if you reduce the padding to 0, you will probably have to line each widget up individually.
Less Nested Widgets
I constantly see sites with far too many nested widgets; Column Widgets in Background widgets in Column widgets, etc, etc… That’s just going to give you a site that’s hard to edit and your code will suffer from Divitis.
As I previously stated, I use template columns over column widgets but for background manipulation, I use CSS to apply where necessary. That said, in later releases you will be able to apply backgrounds and styles directly to the widget itself.
Speed Demon
We are working hard to reduce the load times of BaseKit sites. In the next couple of releases we will be implementing some major features to our framework and reducing code down massively to increase the overall speed. There are a few tips and tricks to help you speed those sites up which are as follows:
Speed up External Widgets
The main culprit for slowing down the load time of your site are the Twitter, Flickr and RSS widgets. The issue is that every time the page loads, BaseKit calls the external services to get the results to display (only if you have the widget on the page). Load times can get slow if you have multiple external widgets on the page.
Hidden in these widgets settings is an awesome feature that takes advantage of caching system we use in BaseKit. Lets use the Twitter Widget as an example. If you set this to ‘Every 30 mins’ for example, the page will cache the results for 30 minutes. After 30 minutes, the next time the page is loaded, BaseKit will go get the results from Twitter then cache them within the site for next 30 minutes; and so on and so forth. This will increase your page load time drastically!
Image Sizes
This should go without saying, but its interesting to see all the BaseKit sites where people have uploaded huge images and reduced them down to smaller size within the editor. Not a good look! (some Browsers can render them nicely, but others make the image look horrid) Load times are effected too which will give the perception that your site is slow.
Work out the size of the image, reduce the image down in a program such as Photoshop or GIMP then upload it.
If you follow all of these tips then they should give you a fast clean Basekit site.
This post was written by Richard Healy -Founder and Lead Developer of Basekit
