Now, I’m not some twitter addict or nerd, well I am, but that’s by the by.

Some people just don’t get twitter and its those people that I don’t get. I’ve recently returned from future of web design conference and without twitter, it don’t think it would exist.

Twitter is one of those things that it’s hard to explain, and it’s hard to see the benefits when you are an an outsider, but when you come inside, to the warmth of followers and the glowing fire of your mates it’s amazing.

You can ask for help, and people will help, you can ask for advice, and people will advise, you can ask for attendance and people will attend – the list goes on and it’s bloody brilliant.

Still not convinced?

A case study:

I run an event called points. You may know of this event, you may not. But it’s a mini-conference. It was held last Tuesday, 8th may. I only promoted it on twitter and 25 people came. That’s 25 people whom I may or may not know, who found out about the event on twitter. It was raising money for a charity, Tia’s trees, set up by Remy sharp, who I met through twitter. How is that for a case study?

At the fowd conf, I met up with people who I know on twitter, and I met people who I now follow on twitter, because emailing them is too formal and the conversation is forced if you email. But with twitter, you can tell them what you’re up to, or show off you latest projects without looking like a dick.

Twitter also allows you to realise that people are just that, people. That amazing web guy, or celebrity you love? Follow them on twitter and you realise that they get cramp, or spots, or colds and it makes you love the more, because they’re human. Its also a portal to start a conversation with said mega-star and who knows, you might become friends.

So love twitter, and I would love to hear your twitter experiences. In fact, croydon creatives is perfect example of some good twitters.

As it was my event, I’m not really in a position to give an impartial view about it (despite it being a huge success and amazingly brilliant). So instead, i’ll leave it to others to review:

• Good Developer Conferences by Amber Weinberg
• Points Mean Pixels by Adam Onishi
• Points Brighton – Points mean Pixels by Anthony Killeen

If you have a blog post of your own – let me know!

All that is left is the thanks yous and the credits – so bear with me.

Speakers

Firstly, the reason everyone was there. The speakers. The presentations were fantastic, diverse and informative. Perfect really!

• Amber Weinberg  stepped up first talking about ‘Mobile Development‘ (she kindly stepped in for the afflicted Paul Mist )
• Next was James Seymour-Lock  discussing ‘How To Achieve Your Clients Goals Through Effective Design‘ (Slides)
• After, Krystian Szastok, stepped up to the plate to show off his knowledge on ‘The Principle Of Factor Sparsity And Seo‘ (Slides)
• and finally finishing off the evening was David Pomfret  who told us all about ‘Making Type Right’ (Slides)

They all did brilliantly and based on the tweets, were all well recieved.

Sponsors

The amount of generous people out there is phenominal and there was no exception when it came to Points. We had books and t-shirts from No Starch Press, books from A Book Apart, t-shirts from Belong, several copies of Introducing HTML5 by Remy Sharp and Bruce Lawson, a book on mobile development from Tipsy & Tumbler and books and t-shirts from 5 Simple Steps.

We also had some beautiful postcards designed and printed by Hatched and T/OD. The alcohol and drinks were provided by Bozboz and the venue kindly donated by The Skiff.

Massive thanks to anyone who sponsored the event.

People Who Made It Happen

As with any event, there are always the unsung heroes. The people who really make the event happen and help ease the pressure.

• Toby Howarth – who designed the beautiful site.
• Adam Onishi – who made Toby’s dreams a reality
• Clive Walker – who helped set up and lock up
• The clickers – who wlciked for our wonderful presenters
• The attendees. Without whom, I could not have raised over £300 for Tia’s Trees. Thank you.

Keep an eye out for the next one!

For ease of reading, this post will follow a traditional approach with a modern twist: Who, What, How Much, Where, When, Speakers, Sponsors Why.

Who?

Points, is me. I am Points.

What?

For those that know of me and my ventures,  you will be familiar with the event I put on near the end of last year (13th October to be precise) at the Brighton Media Centre. This event was an informal, free ‘conference’. It allowed people who had never spoken before to speak and was aimed at all web related folk. To be honest, it was open to everyone, but non-web people would have been bored.

Last time Paul Davis, Alex Sexton, Kris Noble and Anthony Killeen all spoke. Several people were kind enough to blog about the event, and you can read the opinions of Kris Noble, Anthony Killeen and Mr Clive Walker on the event.

So, now that you are all clued up on what Points is all about, let me show you why I am blogging about this age-old event.

Evening ladies and gents. After a warm, gentle winter the points beast awakens for the spring. Keep April free!

— Points (@PointsBrighton) February 25, 2012

So there we have it – Points returns in the springiest month of the year.

How Much?

As I mentioned, the last Points was free. However, I learnt my lesson and because of the basic human instinct, the natural emotion of getting free things the last event sold out. Now I bet your wondering 2 things:

a) how can a free event sell out and
b) whats wrong with that?

A free event can sell out if I say I have 50 seats and 50 people say that they’re coming. The problem with that is that 20 people turned up. They were 20 wonderful people who made the event spectacular, but the sponsor providing the drinks catered for 50 people unnecessarily.

This was because of the freeness – nature educates us to get free things, so people booked a place and then could decide later if they’re coming.

So, because of this, the next points will be a small amount of £5. £5, I feel, is enough for people to make sure they want to come and means I can pay the speakers their bus fare home.

To make you feel a bit better, when all the money is in, costs will be covered and the profits will got to a charity. Maybe that will convince you to spend that £5, if not, a little more.

Where?

This is the first question I cannot answer. I am after a small space, preferably with Wifi and a projector. It also, really, needs to be in Brighton. If you know of a suitable place, please let me know! I am open to any suggestions and will consider anything

When?

At the moment I am considering mid/end of April, but this is completely down to the venue. I will keep you posted though!

Speakers

Speakers are the easiest to find. Everyone wants to talk and would love the opportunity to give it ago. I’ve (hopefully) already got the speakers lined up. The subjects i’ve got in store for you are range from SEO to Typography and a couple of other winners!

Sponsors

Where speakers are the easiest to find, sponsors are the hardest. All you have to do is ask, but a lot of people say no. So if you would like to be kind and sponsor Points, then please email me. 

I will also be running a raffle, so if you have any prizes (big or small), then please drop me an email.

Why?

The hardest question out of this list to answer. There are not enough cheap conferences, there are not enough reasons to meet up and learn. Meet ups are great and this is just another reason to talk face-to-face about anything nerdy without feeling guilty. The thing I love about this industry is that everyone wants to share. You spend weeks developing something and the next day give it out for free. I love it and I want to give something back. Because of that, Points was born.

With books come magazines. The .net magazine is my bible. I will sit and read it from cover to cover, soaking in the news, the stories, the interviews and the hints and tips. I just love being able to open a page and turn it to my developer. My .net mag gets whored around like a lady of the night in my office and thats because its easy to read and easy to digest. Its not like sitting in front of a computer reading a long article. Web articles never look pretty. Books and magazines look stunning.

The irony is not lost on me that I am writing a blog post about how good books are. I have not lost the fact that I am writing a long piece of ugly text for you to sit and read. The fact i’m merely typing is because I cannot afford to publish my blog posts.

Anyway, I digress. The purpose of my boast was not to ramble on about the greatness of books, but to recommend a few. I would like to start some sort of #bookstobuy club. The idea being that you list your favourite 5 books, or recent web related book or magazine purchases and you explain in a few words why its a good book. Write a blog about it and put the link in the comments. Hopefully this will be good to the world. So onto my list:

Just a note – you’ll find the title of the book and a link, followed by the [publisher] and the {topics} of the book. All I ask is that you follow suit.

1. .net magazine {HTML, CSS, PHP, General Knowledge} - It goes without saying that this magazine has taught me an astonishing amount of things. The greatness it brings to life is good.
2. jQuery – Novice to Ninja [Sitepoint] {Javascript, jQuery} – this book, on its own, got me into jQuery. Made me realise the most complex of animations and effects are just a .animate() away.
3. The CSS Anthology [Sitepoint] {CSS} – A brilliant book that gives you the low down on all the CSS selectors and what they do and cover. An amazing reference book
4. HTML5 and CSS3 for the real world [Sitepoint] {HTML5, CSS3, Semantics} – (seeing a trend here?) This book educated me into the wonders of HTML5. It is what I have built this site and written this blog post. The things I learnt from the book have put me in good stead for the next few years.
5. The Smashing Magazine Books [Smashing Magazine] {Everything} – (I know strictly this is numbers 5 & 6, but they were a bundle!) I bought the bundle (books one and two) and they are absolutely fantastic. Brilliant. They cover tons of topics and give you a good overview of so many topics. I have, in fact, just ordered the third book despite not even being halfway through the first. They are just teasers of topics, which allows you to gauge what that subject is and what you’re interests are.

They are my favourite 5 books – what are yours?

or

elements.

So this post is not ground breaking, its not amazing. Its just a summary of changes to the HTML spec in English I understand and can refer back to. Its also to pass to my back end developer so he knows what’s what. [I'm also posting it incomplete - post a comment if you have an additions/suggestions].

Before you can use any of these elements – you should really use the HTML5 Shiv – found in  my basic HTML5 Template.

If you get stuck – HTML5 Doctor created this simply amazing flowchart

,

&

are all self explanatory

- This is content which is related to one another. I.e. a ‘section’ of quotes, sections of a tabbed interface.

- Should be a self contained piece of content

 - Should be something that is tangible to the content, or something like a sidebar or ad space. It should not contain main content.

- These can appear more than once on a page and should be within context of where it is. I.e. you should be able to remove the parent and everything to still be correctly titled. Each

should have one.

&

- perfect for an image and caption. Would be marked up like:

<figure>
<figcaption> An image</figcaption>
<img src="" alt="">
</figure>

- can be used to make something bold, without it being significant – e.g. showing a change in a lump of code

- for use in the case that you want italics, but not for emphasis – e.g. “Hello” he said

can still be used to show text that is smaller, than the rest – e.g.

- can now be around block elements!

Now, I understand why you should. It helps you focus and means that the content is all the content you need. If you do mobile first, you’re not tempted to slide in the odd random graphic here or there. But i’ve been thinking. Why should we have to do it this way?

I’ve always been of the mindset that with the web, as long as its accessible and semantic and it makes sense, its perfectly acceptable. There are hundreds of different ways to skin a cat and as long as you get a clean website at the end, who cares how you got there? (People even have prejudices against certain bits of software…).

I often get annoyed on the web when people tell me I have to do something a certain way. I prefer to be nudged in a general direction than having a certain technique forced upon me. For example, I have recently read a couple of Sitepoint books – jQuery: Novice to Ninja and HTML5 & CSS3 for the Real World. They are fantastic books (highly recommended for people starting out in jQuery and HTML5).

The thing I like about the books is that they imply that there are several ways to do things. The code examples in the book are starting points  that give you a nudge in the right direction. Before I read the jQuery book – I was under the impression that it was really complex, but the book showed me how simple things were and from that I have evolved into a jQuery Deputy Master.

So next time you read a technique, or tutorial, remember that it is not the only way and no matter what operating system, software or method people are using, please be nice and accept their working process – you might be surprised and realise they’re doing it better.

1) Sign up for a test account everywhere. Gmail, Yahoo and Hotmail are the biggies, but make sure you also have access to Outlook, Thunderbird and Apple Mail (and if possible – Outlook Express).* This is, of course, unless you know everyone you are going to email reads their emails in a certain email client

2) Use tables for EVERYTHING. As much as it hurts to read that, it’s the only way to achieve a consistent layout. If you don’t know how to use tables for layout – it’s easy. (an outdated resource but handy for those who came in after the table era: http://www.ironspider.ca/webdesign102/tables4layout2.htm)

3)  Be a bird – nest! If you can’t get that initial layout using the rows and columns you already have, nest a table inside of that table (but don’t overdo it – too many tables is confusing  for you as a designer and slows load times)

4)  Background images can be used but not relied upon. Certain email clients do not show background images – you can only have them tiled or not at all, so make sure you have a repeating pattern, also don’t rely on a body background for your email – the table can have a background but not

5) Span out! Don’t be afraid of colspan and rowspan (although they do sometimes have adverse effects if overused – especially in Outlook!). use  <span> tags for colouring and font styles

6) Style everything twice. If you want your table or table cell to have a background color or w idth or a height,  then make sure you define it twice. For example: a bgcolor and a style. E.g. bgcolor=”f2f2f2″ style=”background: #f2f2f2;” – It may give you a lot of code but at least you know it’ll work right!

7) Inline – Any CSS styles you apply pretty much need to be inline. Any links need to have their own styling, including colours applied (unless you want that default blue colour!). Again, apply twice if you want to be sure that vital colour comes through on your email in all the clients available.

8 ) Online Version – don’t forget to include an online version of your email for those with text enabled email clients or for those accounts you didn’t quite check!

9) Content Counts – Please make sure that the content has been spell checked and proof read by several people – nothing is more embarrassing than sending an email with a typo or an empty href. Include a target=”_blank” to make sure you don’t take anyone away from their emails and, more importantly, your email.

10) Images Matter – If your email contains images, make sure they are hosted somewhere on the internet and have an absolute path. People are not going to be able to access your ‘My Documents’ or the /images/ folder to view that all important logo. Also make sure all images contain ALT, WIDTH and HEIGHT tags.

11)  Test. My testing procedure is usually to send a test to an email address rigged up to Outlook – as this seems to handle the worst*. Once looking good in Outlook I then send it to all my other test accounts to see how they cope. There are a few things I’ve found:

• By far – Yahoo is the best at rendering HTML emails correctly
• Hotmail won’t center the email nor will it apply body background colors or images to the whole email, only to the bit where there is content.
• Gmail will center, but not display background images or colour

12) Adjust – make necessary changes to your HTML email so it looks good

13) Repeat Steps 11 & 12

14) Spam Check – Send it off for a spam check. The best I’ve found so far is sitesells:

• Send a copy of your HTML email to: spamcheck@sitesell.net
• Make sure the subject starts with TEST
• You’ll get a report back – ignore the top section. The bit you want to focus on is the score and the feedback. Anything below 5 is good, anything below 1 is excellent.
• Adjust your content/code until you get as low as score as possible

15) Repeat Steps 11 & 12 – Try sending it to friends and/or family to see how it looks on their system (and don’t get to alter the online version if you change any text/links/content/typos!)

16) Send! – Pick up any hair you may have pulled out and pray nothing blows up

Let me know how you get on or if you have any more tips on how to create the perfect HTML email.

Don’t be afraid of having a fair bit of code, as proved by Linkedin:

Linkedin sends me updates every now and then so I thought I would have a look at one of their emails to see if I could pick up any tips. I’ve attached it for your reference. Look at how the email is displayed and imagine how little code it would require to make a web page like that, then look at the source.

linkedin email

I’ll let it speak for itself!

*Statistics from Fingerprint show that in Feb 2010 – 43% of people we using a derivative of Outlook to view their emails. So it important to get it looking right!

They offered me a part-time job, allowing me to leave the shop I was working at and start earning money for a hobby, which I enjoyed. Once I had completed my degree (getting a 2:1 thank you) they offered me a full time job and here I am. I’ve only been there for two months but already I have learned so much! My very very basic knowledge of PHP has now developed into just basic PHP wisdom – but i’m getting there. Since being there my CSS and HTML skills have improved ten-fold. Things that I would have thought impossible before I started (layouts, designs etc.) I now feel confident creating.

When I am designing and developing websites for myself, planning the, i’ll create them for my skills, sometimes creating blocky sometimes basic designs. While at BozBoz however, we have a separate designer who pushes our skills to the limits and sometimes further! It is not just the designer who pushes my ‘talent’ but also our PHP/Javascript developer. Working with him we teach each other several things a day and sometimes dare each other to new limits.

Anyway – this isn’t about me blowing my own trumpet. Actually I lie. It is. I just thought I would keep you updated with my goings on!

Tim Healey

DJ Tim Healey approached me wanting a MySpace redesign for both his personal account and the one set up for his label – Surfer Rosa Records. It was a brand new concept to design for MySpace and had to go against all my instincts and code CSS like an amateur. However, I’m really pleased with the finished results and it doesn’t really look like a MySpace page at all!

They can be found at the following URLs:

myspace.com/djtimhealey

myspace.com/surferrosarecords

SusSAR

The ever on-going project of Sussex Search and Rescue is under new development. I am working with the afore mentioned PHP developer to create a custom login allowing news to be posted easier. The whole backend is generally having a full revamp, making it easier to update and change the layout or the pages. Watch this space for when it goes live.

Drink in Brighton and Skint

At BozBoz we’ve had two of the most biggest projects we’ve done go live in the space of a week. Skint Entertainment is the home of artists such as FatBoy Slim and the Freemasons. Check out the BozBoz portfolio for the full update.

We’ve also been developing a website for pub chain; Drink In Brighton. Owning over 40 pubs, this website collates the News and Events of the hottest pubs, clubs and bars in Brighton. We’ve been working on this website for a few months and Suday night was the night where it all went into the big wide world. The site includes custom templates for various venues and several funky features, including a flash map and a carousel. Again see the Portfolio for more details!

HTML Emails

One last thing – since working at BozBoz I seem to have become somewhat of a ‘pro’ at creating HTML emails suitable for email marketing. I am creating them for some well known people – but must keep it a secret! Sorry! On that note, however, I will be making a blog post on how to make that perfect HTML email!

Instead I created a WordPress Page template with the soundcloud code at the top, underneath I then included the code which inserts the posts from that category.

First create a new WordPress Page Template.

Next, copy and paste the following code into your php page

Replace the line of code

With the sound cloud, or youtube code you wish to appear on the page before the posts .

Change the category number ($cat=4; and $category = 4; in the exampple provided) and the number of posts you wish to appear ($post_per_page = 5)

Upload, select it in your page settings and hey presto! Your page is dual functioning!

Create a new php page in your favorite text editor and at the top place:

Done!

On your new page you can do things such as including posts from a certain category, have a static html page or even combine the two!
You may wish to start off by including your header, sidebar and footer

If you include the header, make sure you follow suit with the other pages and make sure you <body> and <html> tags are closed correctly