6th
September 2010
Read More
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
19th
August 2010
Read More
Big news today for you fellow Basekiteers! The Gold release is out and ready for you to try out.
The Gold release, despite the name, is in no way our final or complete release. It is, however, still pure gold. In some ways we consider it the “social” release – we’re adding a number of new features to help you share your BaseKit sites with your friends and get them to benefit from BaseKit, through our brand new referral program. Other features of the Gold release include:
• Ability to build HTML5 and CSS3 enabled sites through BaseKit
• Instant Twitter updates
• A whole lot of new CSS styling controls
• Open Themes
• Selective Page Publication
• Additional video support
• Multi select and delete Image/files en masse
• PSD Downloads of Themes
To check these all out in greater detail read the notes below.
We’ve also deployed our first private beta widget to the BaseKit Beta Program. We’re continuing to develop incredible new widgets for BaseKit behind the scenes, and some of these need some testing in the semi-wild before we release them publicly. We only release these to our Beta Program, a select group of BaseKit enthusiasts. If you’re interested in joining the program, check it out. The new widget we’re working on should be one of the most powerful in BaseKit, so after we get some feedback from our community look for it coming soon to everyone!
Finally, we’re kicking off a long term initiative to make BaseKit the best online service to build HTML5 and CSS3 enabled sites. The shift to HTML5 and CSS3 looks to be one of the more exciting developments in the web space, and we’re fascinated to see what the BaseKit community comes up with when given these powerful tools through our user friendly GUI. Stay posted for more information as this develops – we’ll have more news on HTML5 soon – but you’ll be able to start using some of the new CSS3 tags immediately.
Without further ado, the major items :
Friend Referral Program: You enjoy using BaseKit and so might your friends too! We’ve now made it simple for you to get them on board and try out our Basekit. If you’re an active BaseKit user, you can now invite your friends directly from the dashboard in the “what’s new” section. If you don’t see it, you probably haven’t been that active, but you can always reach the referral board by logging into your BaseKit Dashboard -> Account.
The best part? refer friends to BaseKit and you and your friends get a one month free trial of a BaseKit Basic Account or £5 ($8) off if you’re already a BaseKit subscriber.
Twitter Updates: You can already pull in Twitter feeds to any BaseKit site using the Twitter widget and as of today you’re able to notify your Twitter followers of your latest BaseKit creation. Just publish any site, and you’ll be prompted to connect with your Twitter account. Then, whenever you publish updates, opt to notify your friends automatically (or not, if it’s a minor update).
CSS3: We’ve added a whole host of new styling controls that you can find on the Text Widget -> Styles tab. These enable you to apply some of the new CSS3 items to your CSS elements. You can add shadows, gradient backgrounds, rotations, scales, skews and more and more at the drag of a slider. While not technically CSS3, we’ve also added fine-grained control over borders, which was a commonly requested item, while throwing in the CSS3 for rounded corners. By rounding each corner style independently (easy in BaseKit!) you can get some very cool asymmetric effects. This functionality should also give you a preview of how we’ll be integrating this functionality across other pieces of BaseKit soon! Here is a preview of the CSS3 controls:
Open Themes: Themes remain one of the most popular ways to try BaseKit, giving you a fully functional site to deploy, play with (or rip apart and redesign) as soon as you start. In addition, we’ve received many requests from our community members who don’t use Photoshop, but just want to set up a great looking site from scratch. So, our design team has been hard at work building a number of “open” themes. These are full design templates, all with at least 3 colour variations, that let you start a new BaseKit site with background graphics and regions, but nothing else. Build up your pages, layouts, widgets and more just as you’ve envisioned.
Here is a sneak preview of one of the open themes:
And some more minor updates:
Selective Page Publication (ie, draft pages): You can now specify a page to remain in a draft state. This means this page will not be updated to the live version of your site when you hit “Publish” – allowing you to work on new versions or long term projects on live pages without having to hold off on publishing your site. Here at BaseKit, we use it in particularly on our homepage. Since all of BaseKit.com is built in BaseKit, we have a huge number of pages that are updated daily. By leaving our homepage and other major pages in “draft” state, we ensure that they never get accidentally republished with in-progress work. Access this through the Page Options in the BaseKit editor.
More Video Support: We’ve already supported embedding some of the leading video platforms – YouTube, Vimeo, Google- inaddition, we’re now supporting new services, such as Facebook, UStream live video feeds, MetaCafe, Veoh and Blip.TV. You can drop the embed code for these services directly into the Video widget, or just the direct URL which we’ll convert to embed code . Note that Facebook videos will need to be full public access to ensure they can be played on site.
Mass Delete on Images/Files: A common request on our team and some prolific BaseKit users, since sometimes you end up with huge numbers of images and file uploads in the media manager. Now you can multiselect and delete these en masse.
PSD Downloads of Themes: We’re making all the PSDs we use for creating the themes you find in our Theme Selector available for download. You’ll be able to see a big variety of BaseKit ready PSDs, as well as tweak your favourites in Photoshop and then re-import the new PSD. Enjoy!
That’s about it. As always, another busy release for us here at BaseKit. But we’re impatient, and ALWAYS moving quickly to provide you maximum design in the minimum time. Your feedback is what matters, to help us shape the future of BaseKit. Feel free to share with us your views, opinons and experiences through any of our community or support channels – we’re always listening.
To see the Gold release features in action watch the video below:
This post was written by Ryan Kikis at BaseKit
11th
August 2010
Read More
Today we are talking to the winners of the BaseKit-iStock competition that was held earlier in March in collaboration with our friends from iStockphoto.com. Participants to the competition had to create a website using BaseKit and iStock images
Lets find out now how they are getting on with BaseKit and their goodies!
First let’s talk to Steven Butler who came in first place for his website Eddy’s excellent adventure.
How did you find out about the competition?
I initially found out about the competition through my iStockphoto email newsletter.
What drove you to join the competition?
Of course the potential to win some awesome prizes definitely influenced me to explore the Basekit site, but I was initially very impressed with how easy it seemed to build and manage a site directly from your browser.
How did you come up with your design?
It took me a few days to finally decide on the right concept for the site I wanted to create. After browsing the iStock images for a while I began sketching down potential concepts to build a site around. I was originally drawn to the image of the Chihuahua wearing the goggles. It was a nice image that I felt had good potential for the homepage. Being a dog lover, I felt good about creating something fun surrounding the idea of a dog who travels the world. My coworker has a Chihuahua named Eddy so that’s where the name comes from. Once I had my idea the rest just fell into place.
Inspirational resources?
My main inspiration was from my Beagle, Grace. Beagles are very curious dogs and she is always snooping around exploring everything so the articles are written from her perspective. As far as the design is concerned, I wanted to create something nice and clean. A blog site that was organized and showcased some of Basekit’s features.
What did you think was the hardest part of creating your BK site?
The creation of the site was not hard at all. From a production standpoint, BaseKit made creating the site easy, therefore, I didn’t have to get caught up troubleshooting code so I was able to concentrate on my design and content.
How long did it take you to create your site?
It took me about 5 days from concept to completion.
What did you like the most about creating your site with BaseKit?
As a designer, the most difficult part is the production and coding of the site. This tends to cloud the design process because there are so many variables with html, css, forms, databases, etc. Unless you are an expert developer and designer you have to find a happy medium between the two. With Basekit, the coding is taken care of so I get to focus on my design and not get caught up with how to make it work.
What’s the best tip you could give to the BaseKit users?
I would say to just be creative! If you have not built a site yet, build one. Don’t wait until you have a client that needs a site. Build a pesonal portfolio site, blog, etc. They have a variety of great tutorials on their You Tube page that will give you enough knowledge to hit the ground running.
How does the code-free template design process compare with workflows you’ve have used in the past?
This was my first experience using a code-free process. It is a huge time saver. The other great thing about this is that once the site is live, it is very easy to make updates, add content and pages.
How much time could you save by being able to replace the design of the site without having to change the content (i.e. template replacement)?
That would depend on the site but I would say it could potentially save days, even weeks, worth of work.
Do you think you’ll use BaseKit (more) in the future?
Yes, I am already working on a couple of new websites that I hope to have live within the next 2-4 weeks. Why (not)?
Now, let’s get an other perspective from the first runner up, Neal van den Eertwegh who designed the cool website a Taste of Tokyo, which acts as a tourist guide for people visiting Japan.
Let’s find out how Neal got on with using BaseKit and what was his inspiration for creating his website.
How did you find out about the competition?
I already made two BaseKit sites and thus found out about the competition via the BaseKit newsletter.
What drove you to join the competition?
For one, the ipad of course. But also because I like the way BaseKit works, it’s so simple to use, and setting up a site is a matter of minutes, who wouldn’t join?
How did you come up with your design? Inspirational resources?
Both my designs came from the photos istock photo had supplied. But I’m also kind of a Japan nutt, so choosing that Tokyo photo was an obvious choice.
What did you think was the hardest part of creating your BK site?
Coming up with the idea, once that was figured it was easy riding.
How long did it take you to create your site?
I’m not sure, but I think I worked on it for about two weeks, but that’s mostly on details and such. Actually uploading the site took me one afternoon.
What did you like the most about creating your site with BaseKit?
Not having to go through the hassle of slicing my designs and make it look the same in my Internet browser.
What’s the best tip you could give to the BaseKit users?
Take a look at the BaseKit videos; they are an excellent guide on understanding how BaseKit works.
How does the code-free template design process compare with workflows you’ve have used in the past?
You aren’t down in the code anymore. You’re only concern is the design.
How much time could you save by being able to replace the design of the site without having to change the content (i.e. template replacement)?
With BaseKit, this is just a matter of making a new PSD design and uploading it. Normally you would have to slice the PSD and go into the code again.
Do you think you’ll use BaseKit (more) in the future? Why (not)?
Definitely, BaseKit for me is an excellent prototyping tool. I make my PSD design, upload it to BaseKit and show it to a client. A website says more then just an image.
What feature(s) would you like to see next in BaseKit?
Custom widgets and Wordpress support! The current widgets are superb, but for more elaborate, user supported websites we definitely need those! Oh, and an iPad app of course.
We were very impressed with Steven and Neal’ designs and are glad that they’ve enjoyed using BaseKit and found our tool easy and efficient to use. Your prizes were well deserved, hope your having fun with them!
Interview conducted by Freek Dix @ BaseKit
29th
July 2010
Read More
First there was this blog. Then there was Facebook, Twitter and now… Linkedin too!
So if Linkedin is your social media network of choice, visit our group at http://www.linkedin.com/groups?mostPopular=&gid=3261105 and follow our latest updates on there!
