Following on from my last post which was all about the “do’s” of Twitter – I wanted to ensure you all know about the “don’ts”. Feel free to add more – especially if you have seen people do things on Twitter that annoy you!

Twitter Don’ts:

1. Don’t constantly tweet about what you are doing or links to YOUR special offers and YOUR blog – people are more interested in things that are useful to them. Twitter is not about advertising yourself, it’s about marketing and communicating in a helpful and friendly way. Instead, mix up your tweets with links to useful articles, retweets of other tweets, quotes, comments, and SOMETIMES – stuff about your blog and offers.

2. Don’t be an “egg” – ie leave the default picture thumbnail of the little egg and the default background. Instead take the time to upload a good thumbnail cropped picture of yourself (a person to person connection is what it’s about) and aim to have a customised background. Ask us if you would like one created for you!

3. Don’t just follow celebrities and journalist/news Twitter accounts. Instead follow people in your own field, suppliers etc. You can look for lists of these people on Listorious and look at who the people you follow are following, who they talk to on Twitter. Once you follow these people, then follow lots of other people.

4. Don’t go without tweeting for too long – Twitter takes commitment to work – although of course you are allowed to take holidays, you need to answer each tweet, participate regularly and keep tweeting! There are ways to schedule tweets and our favourite is Buffer.

5. Don’t swear – If you are using Twitter to market your business, it’s best to appeal to the largest percentage of the population – those who probably think it’s not professional to swear online! However there are many people who do swear on Twitter – some of whom have good success with it. I personally prefer to err on the side of caution!

Hope that is useful to you! Be sure to book into our Social Media – Can You Afford To Ignore It? seminar – this Friday!

This is again for people who are using Twitter but aren’t entirely sure if they are doing it right. Have a look at the list below – if you feel like you already doing these things, then you may be ready for some of the “advanced” stuff – but we like to take things step by step – and the beginners stuff is actually where most of the magic of Twitter happens! If the words below seem like a strange language to you, comment below and I will answer with further explanations and definitions!

The real magic of Twitter comes from

• Answering the tweets which have your @name in it – you can check your twitter messages on the Twitter website by clicking on your @name on the right side panel – there you see mentions and messages too you. When I say @name I mean the part of the page with the @ sign and your Twitter username right next to it, eg my @name is @topleftdesign. If you want to try it, tweet me and say you have read this post – and I will reply and then we can take it from there!
• Follow people who are in the same industry as you as you will learn the most from them. A lot of people make the mistake of starting first to follow only celebrities and news feeds. This is fine but if you follow active twitter users who tweet regularly with a variety of different tweets, then you will be able to pick up the better Twitter habits much quicker!
• Speak to people regularly on Twitter (using 2 of the strange things I referred to earlier – “@replies” and “mentions“
• Try and promote others regularly too – using “retweets” or “RT“s and just generally being supportive and complimentary (if you mean it of course!)
• Tweet regularly, and continue to be relevant within your field – and try regularly tweet headlines and shortened links. I like to use Bit.ly to shorten my URL – see http://www.bit.ly – just copy paste a long URL into the box, click shorten and it will give you a short one! Check out the video below which shows you how.
• Follow people in different industries and group them together in Lists – as this will make it much easier to manage who you follow and to use Twitter more strategically.

Definitely follow me (@topleftdesign) as I try my best to practice what I preach. You definitely learn the most from observation. Once you have mastered the above – there is more strategic marketing stuff you can do – I am happy to answer questions as usual!

Here is what Julien wrote

Hi everyone! I’ve just finished my 10 weeks internship here at Top Left Design. Usually I work more with the programming side of things, and have never really learnt much about the design process. I like coding because I’ve learnt a lot about how to do it, and so now it’s easy for me. But during this internship I saw that design is not so different from coding, you have to always keep in mind some key rules and guidelines to create a good design.

Here are the 7 most important rules I learnt at top left design during my 10 great weeks:

Composition

Align, align, align! Well-aligned elements within your layout make your website look tidy and organized. You can see an example of this on the Performance Resolution website.

Colours

Choosing the right combination of colours in reference to the client’s brief, and referring to the colours of their existing branding, is a difficult and important task in order to create visual harmony within the new branding and website. It’s also good to have some contrast between different elements to highlight important sections of the website, you can do this by using a combination of bright and dark colours, and this can also help to guide the reader through the site.

Visual Hierarchy

You should highlight things important like the services offered by your company, and keep less important things more simple. You can see on the A Business Innovation website that there services are highlighted in boxes making this section stand out to people.

Consistency

The website should be consistent, each page should be identifiable as part of the whole.

The little things matter

Details are very important in any type of work. It is the same with the design: details are the difference between a good design and great design.

When I started working on design layouts, I realised that every final site produced perfectly reflected the final design. This means the margins, padding, backgrounds and borders have to be perfectly consistent through your designs, it’s also important that the colours and fonts stay consistent throughout the site.

At the beginning of my internship it was very hard for me to follow these rules, I found it easy to make small mistakes in a layout, such as remembering to make sure everything is aligned exactly, making sure the right colours are used throughout, and ensuring the titles are consistent sizes. And the fact is I didn’t understand why it was so important because by definition, it was only small details… But now I know why.

Looking out for the little things whilst designing and remembering your ‘rules’ whilst designing really does have it benefits:

• The most obvious: The work looks more professional, if you always make small mistakes your reputation will suffer.

• You don’t waste time explaining these little mistakes when the client is viewing your designs. Everything is perfect and so you can focus spending time discussing the things that really matter.

• It makes you more organized. If you’re organised and have named each of your layers in Photoshop, and grouped these into folders it means when you come to making small changes you save a lot of time. Naming your layers in Photoshop is really important when you are working in a team as it’s not only you that will be working on those files.

• Faster development. For example if you design a blog which is not correctly aligned and you send it off to the programmer to be built, the programmer doesn’t have to waste time figuring out if you made a small mistake or if it was intentional.

Check your work

This tip is linked to my previous point. The final design has to be perfect to avoid a dissatisfied or disappointed client. Everything is double checked to be sure the result is as expected. Sometimes when you work for a long time on a design you can’t detect mistakes easily. That’s why it’s important to have someone else in the team to take a look over the design, and see if there are any little tweaks which need to be made.

Keep it simple

A design can look sophisticated and professional without many design elements which may just prove to be useless. Personally when I’m looking through a website for information about a company, I prefer to see a clean and minimalist design where it’s easy to find what you want, and not be distracted by things that are not as important.

So, here goes – ahem – Just in case you didn’t hear – we are running two seminars this month. At the time of writing this blog – we have only 2 spots left on the blogging seminar and 6 spots left on the social media seminar.

Let’s see how the next few days transpire! Very exciting!

There used to be a time when you might have waited 3 minutes for a webpage to open.

Then we got broadband.

Then we only had to wait an average 10 seconds for a page to load.

Then we got Firefox.

Now our new browsers such as Google’s ‘Chrome’ not only load the page in a split-second, but the programs themselves open almost instantaneously. Plus they can handle a metric ton of ‘tabs’ and not slow your computer down in the process!

Here’s 8 tips to give your web-surfing a steroid boost

1. Upgrade Your Browser

You might still be experiencing some waiting periods, but that’s probably because you’re still using Internet Explorer 6/7/8. Excuse me while I spit on the ground in disgust.
My first 2 tips are going to be Mozilla Firefox & Google Chrome. If you haven’t yet tried these two browsers, then you’re in for a real treat! Although, Internet Explorer Version 9 might be one to watch out for…

Have a look at This infograph comparing browser performance and speed.
At Top Left Design, we only ever use IE to test that websites we create actually work in the browser.

2. Bookmarks Bar

You know those sites that you visit every day? Like Gmail, Hotmail, Google, Twitter, Digg, etc? Wouldn’t it be great if you could access them in one click? Well good news; you can.

The bookmarks bar is one step better than your bookmarks menu. Dragging a link from the address bar of the site you are on will add a handy link to this line of icons in your browser window. You can edit the name of the link, or remove the name completely if you are familiar enough with the site’s ‘favicon’.
You can Ctrl+Click on a bunch of links to open up a few at a time in separate tabs.

When using normal bookmarks, make sure you name them relevantly, and put them into sub-folders, or you might end up with a mile-long, hard to use list – I only recently got out of that bad habit.

3. Search in the Address Bar

One thing that Firefox does great (and Chrome to a lesser extent), is its intuitive address bar. I can’t fathom how much time I’ve saved using this feature.

Let’s say that you wanted to look up a film on www.imdb.com – try typing into your address bar: “IMDB usual suspects”
Chrome and IE will probably give you a handy Google search result – but Firefox will actually open the film’s page on imdb.com!
Typing “wiki movember” will bring up this page straight away. You’re basically cutting out the middle man (Mr. Google Search).

If you know what you’re looking for, you can bypass search forms on websites completely.

4. Tabbed Browsing

Tabs gave Firefox it’s initial edge over Internet Explorer – the option to have multiple websites open in one instance of the browser application. Meaning that your windows bar at the bottom doesn’t get clogged up with every page you have open!

Since their conception, they have become standard in new browsers, and thankfully have some universal shortcut keys.
Using tabs when browsing the internet not only means that you can quickly hop to the other 15 pages you have open, but without the headache on your CPU as a bonus.

5. Shortcut Keys

I’m slowly working on phasing out my mouse completely:

Ctrl + T = New Tab
Ctrl + Click Link On Page = Open link in new tab
Ctrl + Tab = Next Tab
Ctrl + Shift + Tab = Previous Tab
Ctrl + W = Close tab
Ctrl + Shift + W = Close ALL tabs
Ctrl + Shift + T = Open last closed tab
Ctrl + J = Downloads
Ctrl + F = Find
F5 = Refresh
F6 = Jump to type in the address bar
Space bar = Page down
Home = Top of the page
End = Bottom of the page
Tab = next field/link on the page

And of course, Ctrl + [C = Copy / V = Paste / A = Select All / X = Cut] for links and bodies of text.

6. Browser Launch Page

Chrome has a handy landing page when you open the program which shows your most viewed sites, for easy access. Note from the screenshot below, my Facebook page isn’t showing as a tile. That’s because we WORK here at TLD. (Twitter is part of work of course!)

Though in most browsers, you can even go a step further, and have your most viewed sites open in separate tabs once your launch your browser.

I have Chrome open Google & Gmail on launch, as I know that I am going to have those 2 sites open whatever I’m doing!

7. Extensions / Addons

Addons are a great way of streamlining and customising your browsing experience.

Google Chrome Extensions
Firefox Addons

Aviary Screen Capture allows you to capture, crop and save a section or all of the website you are viewing.

Do you still see adverts? Adblock stops 90% of ads from loading, both pop-ups and ads built into the pages themselves. This includes ads on the videos which appear on YouTube.

Gmail for Chrome alerts you when you get new mail in your account.

Check out this page to see 17 Google Chrome Extensions for Web Designers and Developers.

8. Spyware Scan

Of course, non of the above will help speed up your surfing if your computer is riddled with resource and connection hogging spyware.
If you are waiting over 3 seconds for a website to load, and you have a fast internet conenction with a fast browser, chances are that you’re being slowed down by a virus.
Run a scan using the free scanner AdAware on a regular basis to avoid having your browsing stunted.

Hopefully now you should be 8x faster when surfing the internet, leaving you with more time to look at videos of cats falling off things, or whatever it is you do!

Let us know if you have any tips to add to the mix!

Bonus link – as a reward for reading this far! 9 more insanely useful firefox add-ons that will save your time

In this post, I’ll be showing you how to make your very own custom 404 error page!

Time needed: 30 mins + any time spent designing the page itself
Necessary resources: Notepad, Site FTP access, coffee
Optional programs: Photoshop/Illustrator (for design of the page), FTP Client (for easier uploading)

A custom 404 page is not only a way to expand accessibility on your website, but it also shows that you (or your company) has attention to detail, and can be a way to inject some humour into a website!

A 404 occurs when someone visits a part of your website that doesn’t exist. The default 404 page is ugly and not very user-friendly at all. We’ll soon take care of that!

We recently made a 404 page for Top Left Design’s website, which you can view here:

http://www.topleftdesign.com/404

Here’s how you can create the same effect for your very own website.
(If you get stuck anywhere along the way, get in touch or leave a comment and we’ll help you out!)

Step 1. Design your page

The first step (and the most fun part of the whole process), is to come up with an idea for your 404 page!

You might want to reference pop-culture, or an in-joke. Maybe you just want a simple page explaining the error, but matches your existing sleek website design.

A 404 page can take the form of a striking placeholder, and integrated page in your website’s exisiting design, or a mixture of the two.

Once you have your idea, you’ll need to mock up the design using Photoshop, or a similar image editing program.

huwshimi.com

Step 2. Create your HTML page

This tutorial assumes that you already have some basic knowledge of HTML – after all, you wouldn’t need a 404 page unless you already have a website!

If you already have your website, you could incorporate your website’s navigation structure, and a search bar – allowing the unexpecting 404 visitor to find what they were looking for when they shipwrecked upon your error page!
A simple way to construct this would be to take an existing page from your website, and modify it until you are happy – then save it as “404.htm”.
Make sure that you link everything using absolute paths, to avoid broken linkage should the 404 occur in a nested folder on your website.

As far as content goes on your 404 page goes, a good formula in the design industry is considered to be; striking image + witty phrase (depending on the tone of your website of course). See the examples below and the links at the end of this post for examples!

CSSscoop.com

carsonified.com

Here’s a good tutorial to make a “BSOD” custom 404 page in HTML/CSS.

Either way, once you’re done creating the page, you should have a ’404.htm’ file, along with any extra images you may have created for your 404 page.

Step 3. Create your .htaccess file

Open up Notepad for this one. You will want to paste the following text into the blank document:

ErrorDocument 404 /404.htm

Now save this text file, naming it “.htaccess” – making sure that the drop down is set to All Files.

Easy! Who ever said .htaccess was complicated?

Step 4. Upload and test

Now, with your files all ready, connect to your FTP server, and get ready to sample the fruits of your labour..

Upload the .htaccess file to the root directory of your FTP server (it should be in the same folder as your index.htm file)
Upload your 404.htm page to the root also, and any extra images to the relevant folder on your server (depending on how you have linked the image paths in your 404.htm file)

Sidenote: Once uploaded, your .htaccess file may not be visible on your server, unless you turn on the hidden files settings in your FTP program. Files beginning with a full stop are automatically hidden by default.
To turn on hidden files like this in CuteFTP for example, do the following:

Open up the Edit menu and select the Filter option.
Check the box next to Enable Remote Filters.
Enter the two characters “-a” (without the quotes) in the Remote Filter box.
Click OK to confirm the change.
The next time you make an FTP connection to your account, you should be able to see the hidden files which were not visible before.

Done!

Now all you need to do is visit your website, and add: “/anything” after the .com
As long as the page does not exist on your site, your new custom 404 page should appear! Well done!

Further reading:

The best of error 404 pages
Collection of fantastic 404 pages
Tutorial to make a “BSOD” custom 404 page in HTML/CSS.
How to make a custom 404 page in a WordPress theme

Have you seen any great 404 error pages?
Have you made your own? Let us know, we’d love to see them!

In our recent Halloween Newsletter, we ran a survey to gather some feedback on the service we are providing to our clients, and to find out what people would like us to concentrate our efforts on in the future.

The information we received was very informative – we greatly appreciate and would like to thank everyone who took the time to fill out the survey!
We pride ourselves on being a company that listens to it’s clients needs, and asking you questions about our services is the best way to find that out.

But it’s not all serious business here at Top Left Design – we also asked the question: What were you for Halloween?

Here is what you guys said:

1.  Dancing badly

2.  In kerwin rae’s course

3.  The sweets holder!

4.  In a bar.

5.  The same wonderful me since I don’t “do” Halloween

6.  In Lymington at a party

7.  Inside and not answering the door!

8.  Just me I am scary enough!

9.  I will be going to see Steve Reich at the royal festival hall. I have a spare ticket too if you know anyone who’s interested!

10.  A devil

11.  Giving out sweets…

12.  Tired!

13.  Very much out of place if I dress up, as our part of London doesn’t do Hallowe’en at all. But, being a bit of a goth, I’d probably be a witch of some sort.

14.  Pirate of the Low Seas

15.  The wicked witch of the west

16.  At a party

17.  A surprise

18.  Too tired to be anything… if I had the energy – rather than a 17 day old son to feed every two hours – I’d love to be a princess. There – I have it. Sleeping Beauty!

19.  Dinner at a friend’s

20.  Black cat

21.  I’m going to go as the apostrophe in Hallowe’en, just as soon as I work out what a suitably anally-retentive costume would be. And, yes, I realise that I’m a grammar and type fascist.

22.  Pooped – all my spare time is going to redecorate my new house before my father moves in with us next weekend. If I did have time for such shennanigans I’d probably dust off my old glam rock costume, even though I made the shoulder pads/breast plate so big I can’t eat or drink in it because my hands can’t reach my mouth!

23.  Ali-hipo-rhino-croca-dilli-gator

24.  At the theatre

25.  A designer

26.  Not sure yet!!

27.  Moving my M-in-L to her new house!!

28.  A pumpkin.

29.  Sleeping!

31.  N/A

32.  With my nose? A witch obviously!

33.  A witch…

34.  Myself

What I learned at Top Left Design

Working at TLD was definitely a learning experience, not only did I learn HTML and Photoshop, I learned a whole bunch of simple skills that I have been using in almost every job that I’ve had afterwards.

Effective Email

Email communication doesn’t have to be complicated or take a long time. After writing many emails at Top Left Design, I learned that in order to avoid confusion increase efficiency, emails have to be formatted properly and be clear and simple. First, let’s start out with format. It is so important to start out an email with the person’s name. You could say “Hi Martin” or “Martin,” some sort of introduction. When you start an email out with information it can be confusing and not to mention it can seem a little rude. The rest of the email should be broken up into paragraphs and finish with a sign off like “Thanks,” or “Regards,” or whatever you are comfortable with. As for simplicity and clarity – this is the most important part. Unless you want to be writing back and forth all day with questions, its best to be clear about what you are talking about. This means to get the main points out separately. So, if you have to mention several points and ask questions it is good to group them together. When you are asking questions you have to make it obvious that you need an answer. If you say “I was wondering” and trail off with a long complicated question it isn’t clear in the end what you are talking about. On the other hand, writing an email with a quick one line answer can be even more confusing. If you follow all of these simple rules emailing will be less work and people will appreciate the ease of reading your emails.

File in Style – it takes a while but saves a mile!

Another important part of working with emails all day is keeping them organised. An organised email program on your computer means that you can respond faster to clients, colleagues and have a clear idea of what you are working on and will need to work on. By keeping a clear filing system in your inbox you will be able to find an email quickly and easily if you need it for reference. Not to mention that if you keep your inbox clean you can see what you need to work on and what’s new. Once you are finished working on something you can file it away and not worry about it anymore. If you have loads of emails that are in different stages of being complete you’ll have no idea what you are working on. You could also file based on urgency levels, i.e. 3 being least important (maybe ongoing projects that aren’t client based) and 1 being the most important (projects that have a deadline that is quickly approaching). If you are able to do this you will increase your efficiency level at the workplace significantly.

Mean well with a manual!

Another skill that I acquired working at TLD was manual writing. In any position it is important for someone to pick up a piece of paper and be able to figure out how to do a certain task. If you are the only one who knows how to do a certain procedure at your workplace it can be stressful if you are sick or going on vacation. The best way to work on a manual is to break down the process very clearly into bullet points or steps. Once you are complete try to do the steps based on your own instructions, or better yet get someone who knows nothing about the process to do it. That way you will see whether your manual has holes and how you can fix them. Once you have this information down on paper transitional periods will be much simpler at any job.

Overall, keeping organized is not something that everyone knows how to do. By following these easy steps you will be begin to be more efficient and dare I say happier at work. If you know what you are doing and what track you are on things will definitely start to go your way at the workplace.

———————–
“When I heard about my internship in web design I was a little bit afraid, because I’ve never worked with HTML and web design before. But in the end I enjoyed it and I now know more about web design and how to present the designs to clients.
To be honest – this is my first internship that I really enjoyed. The whole team was very friendly and open minded and it was a very relaxed atmosphere. I even had my own computer – that was great!

The special things I have learnt whilst on my internship were:

Using Adobe Photoshop, Macromedia HomeSite, Adobe Illustrator and Adobe Indesign
How to make a gradient (using Layers) [ Photoshop]
How a website is designed in Photoshop then built in HTML (Footer, Top, Navigation, font size & Home and Inner, Templates) [ Photoshop & HomeSite]

I had a lot of projects, which was very good – so I could do a lot of designs which made me very happy. Sometimes I thought I was very helpful, so I hope at the end I was very useful to your company.

Every day I tried my best and the whole time in the internship was a very good experience for me. Thank you for giving me a lot of different projects to work on. This was very good and has built on my experiences.

I wish I could stay longer in your company because it was a really good time for me. I really liked this internship. This was the best internship I’ve ever had (seriously!).

In the past the other internships were not as good as here, because the atmosphere was not as good….a couple of my bosses were uptight and not good-humoured like you and your team are.

It was a great time at Top Left Design for me!”
——————-

We will miss Maja too!
She was hard working, showed great talent, was quick to learn and helpful. We wish her luck in her future career – keep in touch!