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
30th
July 2010
Read More
When first starting out in the world of web design there is so much to learn in order to improve your craft that you are bound to make mistakes along the way. Even after a few years in the industry you will still make mistakes that you know you could have easily avoided but didn’t for one reason or another. I thought I would share with you some of the mistakes that can be very easily made by the inexperienced (and sometimes experienced!) web designer and why you should avoid them.
Not Designing to a Grid
There seems to be one of two reasons why newbie web designers don’t use a grid based system when designing: 1) They have read somewhere that it limits creativity; or 2) They are unaware of it.
Designing to a grid does not limit creativity; it allows you to be more creative by giving you a clear understanding of dimension and scale from the offset. Just as artists are confined to the size of their canvas, you are limited to the size of the browser. Using a grid allows you to plan the size, positioning and the flow of your elements within the page.
If you fail to use a grid you will more than likely discover (after countless hours work) that your design will have to be redone as your elements are too big, too close together or even worse – you have forced a horizontal scroll into the users browser!
There is an excellent article on Grid Based Web Design over on www.noupe.com.
Not Sketching
Sometimes it can be eagerness, other times it can be ignorance, but many newcomers fail to sketch when designing for the web. It can be too easy to get excited by the prospect of a new design project and to jump straight into Photoshop to begin designing a layout. I sketch everything, from wireframes to logo design – although I never used to. I find that sitting down with a notepad and a pencil helps me release ideas that I never knew I had and my work has got a lot better as a result.
I’m currently in the middle of redesigning my portfolio (www.leehardingonline.co.uk) and although I already have a rough idea of how I want it to look it was a nice sunny day so I decided to sit in the garden, get away from my desk and enjoy the sunshine. Being a bit of a workaholic I began sketching layout ideas and after only 20 minutes or so I had come up with some really great layouts, a few of which I will definitely use in future.
Sketching makes it easier to be creative, if you are sat in front of your computer working with Photoshop, you only have that one design idea in mind and it becomes a lot more difficult to come up with new ones – especially if you have already spent a good few hours on one design and become committed to it, even though deep down you know it could be better.
Following Trends
If I hear one more person utter the words “It’s not very Web 2.0 is it?” I think I’ll break down and cry. I heard this from a client once when showing them a mock-up of a web layout I had done for them, I asked them what they understood by the term “Web 2.0” and they didn’t really have a clue. They based their idea of Web 2.0 on the presence of gradients, gloss effects, reflection effects and big bright colours.
If you type “What is Web 2.0 Design” into Google you will find over 174 million results, each of which will have its own varying definition. Try searching on “What is Web 3.0 Design” and you will find over 69 million results, “Web 1.0” will give you 89 million results. I don’t think the term “Web 1.0” was even a term until somebody came up with the term “Web 2.0”.
My point is that trends come and go and tend to last between 3-5 years. Would you rather design a site that is “Web 2.0” but wrong for the job in hand and will probably need a complete redesign in a few years, or would you rather design a site that a timeless design, is a bit different from everything else and perfect for the job?
Following trends doesn’t really teach you anything, whilst it’s good to be aware of what everyone else is doing, it doesn’t encourage you to be creative. Don’t follow trends, set them.
Becoming a pixel pusher
Why did you become a designer? Was it to unleash your creativity and find solutions to problems, or was it to have someone stood over your shoulder telling you exactly what to do – or even worse was it because you wanted to copy www.someone-else-ssite.com. Firstly copying someone else’s site is just plain wrong, your client gains nothing unique and you learn nothing. If a prospective client wanted me to copy another site I would simply refuse. I’d ask them what aspects of that site they liked and try to incorporate those elements into my own unique design but I’d never copy.
If your client is happy to steal somebody else’s hard work, is that a client you really want to work with anyway?
Pixel pushing is different from taking constructive criticism or being open to suggestions. Accepting criticism and communication is an important part of being a designer, but pixel pushing is different. It starts with a simple, “can you make this a bit bigger, move this to left, change the colour of this, delete that” and before you know it your entire design has changed beyond recognition and 99.9% of the time it looks awful.
Pixel pushing demeans your skills as a designer. You have become no more than a tool to the client and your only usefulness to them is that you know how to use Photoshop. The countless hours you have spent studying typography, colour theory, usability and accessibility have been a waste of time.
We have all been a pixel pusher at one point, usually to keep the client happy and get the project done as quickly and painlessly as possible, fully aware that the project will not be a portfolio piece and you will deny any involvement in its design to friends and colleagues.
Try to stay away from these types of projects, they limit your own creativity, you learn nothing and eventually they will kill your love of the job.
There are many mistakes that we make when we first start out in the design industry. The most important thing is that we learn from them and try not to make the same mistakes again. I have made all of these mistakes before and continue to make different mistakes or errors in judgement now, but from each mistake I make I learn how to improve my skills and ability as a designer. What types of mistakes did you make as a newbie web designer? What types of mistakes do you make now?
This post was written by Lee Harding of Lee Harding Web Design – creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!
18th
June 2010
Read More
We know that BaseKit can sometimes throw an error at you when you try to upload a PSD. And while we’re working to make this as simple and trouble free as possible, we have made some videos to help you out.
So, next time you get an error thrown at you by BaseKit – check out our YouTube channel – the answer to your problem is likely to be there!
Layer Names Error
Image Format Error
File Type Errors
Image Format Error
17th
May 2010
Read More
Head of Product Ryan Kiskis tells us about how the development process works at BaseKit Labs…
Here at BaseKit HQ, we’re proud of what we’ve been able to accomplish in helping designers build websites smarter, faster and easier from their PSD files. Our development process is a big part of how we accomplish that with such a small team, and I thought I’d give our customers some insight into how we operate.
Agile – While it’s a popular term in software development, we live and breathe it here. What it means for us is that we do a large number of very short release sprints – usually 3 weeks, sometimes 4 if it’s a big release. Our users will be seeing real, meaningful improvements to BaseKit, month in and month out, as we continue to hone and polish the BaseKit experience. While 3 weeks is a very short time to do releases to customers, we find the only way to get true feedback is to get our software in yours – and then listen carefully to your feedback. That ties in closely to the next point…
Customer Focused – Almost every item on our development roadmap comes directly from customer feedback. We maintain a long term vision for how we’d like to improve BaseKit, with some major new elements coming in the next few months that will serve to change how you think about BaseKit. But those occupy only a small part of our overall roadmap. The majority of what we work on we solicit from you, and it’s important to get that input very quickly and continually as it feeds into our release planning every 3 weeks. So how can you get your feedback into BaseKit? There are actually lots of ways we watch continually:
The feedback tab in the application: This goes straight to our Get Satisfaction team, which our customer experience team reads on a daily basis.
- Visit the forum at www.basekitforum.com: Again, we get continual notices of new activity here and our customer experience team is very active on getting feedback into the larger company from here.
- Email us at support@basekit.com: We ensure we respond to every support or technical request, and endeavour to respond to every feature suggestion. Rest assured that everything here gets directly.
- Surveys: We run user surveys regularly to folks, which we mention to you either in the BaseKit application itself, or by email. Keep an eye out for them – they often have coms great prizes attached!
- Webinars, BaseKit Academy, and Usability Sessions: While we’re based in the UK, our reach to our users is global. Every week we run a number of virtual conference sessions with users across the world, from the UK to Korea. You can find out more on our webinars page at www.basekit.com/webinars.
- Using BaseKit: We have an in-depth system to help discover problems our users run into while using BaseKit, as well as what features, themes and more are popular. So just go ahead and use BaseKit – how you do so can help guide us to improve that experience.
Tiered Releases – So how do we work on this growing list of requests? Every one of those releases includes usually 1-2 major items, which we’ve prioritized over the previous weeks based on volume of requests, importance to the BaseKit experience, greatest reach and impact on our users, and technical complexity. While it’s easy to get wrapped up in the shiny, exciting new things, we ensure that we always reserve part of every sprint for catching up on the little details – customer requests and polish that may only take a few minutes, but make a big difference to the folks who have requested them. This ensures that little things don’t keep getting pushed off and off – it’s those little things that actually might make the most difference to daily users of BaseKit. We also keep part of the release each time for research and testing for major future new developments, and of course our QA team dedicated continually to finding and squashing bugs.
So that’s a little glimpse into how we operate here at BaseKit. The most important thing to take away is – your feedback matters. A lot. So please take the time to send us some!
