New Year, New Decisions

Just two:

Only check email once a day.

Unsubscribe from everything that is of no use.

Prospects – What to Take to the Meeting

Don’t get caught having to ask the prospect for a pen – or directions to the loo.

Computer

I see young web designers always carry a laptop/tablet to meetings. What for?

I have loaded my portfolio onto a laptop with the idea that prospects will be able to browse through them. Or, I can quickly lay my hands on a specific example of the sort of website they might be wanting.

It doesn’t work. However, I still take the netbook to show that I am something to do with computers. There is simply not the time to fire up the Internet and scratch about for the site you think they may be interested in.  They’re usually not, after 5 minutes of frantic searching. Then the battery goes flat.

Murphy’s Law will also ensure that if you want to show the prospect one of your sites, there will be a great big error on the page you choose. Even worse, a 404.

Portfolio

I used to print screengrabs of my portfolio and put them in transparent pockets. The screengrabs were printed on coated paper for colour density and simply glued on the page.

DSCN1355

Lately, I upgraded the folder. I either printed my own postcard sized screengrabs or got them done at a Postnet. And stuck them on black card. And bought a plastic comb binder. And put a transparent sheet as the front and back cover.

Now they look presentable. I also made sure that the visually appealing sites were at the front. As new sites arrive, I can print grabs and add them.The folder of screengrabs always gets attention if you remember to leave it out on the table. And you can still lay your hands on that site.

Company Profile

What else? A company profile is worth putting together and leaving behind. One thing that is useful is a file of AWStats printouts to show the prospect what he can expect both in terms of traffic and general information.

Emails

Also take any relevant emails – they’re more useful than you think.

Stationery

bagsI also take an exercise book and couple of pencils. I bought a very fancy plain paper, leather bound book in India. Very striking. I usually make notes in it and prospects do remember that book. It’s got a huge clasp on the front that presents a massive lump that is almost impossible to write on. But they remember that book.

Business Cards

bcardEasily forgotten. Have one ready to produce in your top pocket. Don’t rummage around in your wallet for some filthy, dog eared scrap.

Hundreds of books have been written on card design.  Mine is simple but unique.

Your Bag

As long as it’s not shabby and unprofessional, anything will do – even an old leather briefcase. I use a black nylon laptop bag that will take the laptop and also has a bunch of pockets for things like a laser pointer, the cellphone (ALWAYS turn it OFF) and car keys (don’t have them bulging out of your pocket). I also have a simpler document bag, also black and nylon for short non-prospect meetings. In both bags is a supply of business cards. I also put my wallet in the bag and try not to look like a refugee from a shoplifting trip.

OK, You’re cool and out the car. Carry your bag in your left hand. You’re going  to shake hands. Prospects will not like to shake hands with something that’s hot and very sweaty.

Your Cellphone

SWITCH IT OFF! Before the meeting. Not even on silent. SWITCH IT OFF.

Checklist

  1. Business cards
  2. Portfolio folder
  3. Empty bladder
  4. Computer – perhaps
  5. Pen/pencil
  6. Notebook
  7. Email correspondence
  8. Critique of his present website if any
  9. Suitable bag
  10. Quotation – if you’ve already quoted
  11. Company profile
  12. Phone (switched off)

 

Meetings 2 – What to Take

Documents

I see young web designers always carry a laptop/tablet to meetings. What for?

I have loaded my portfolio onto a laptop with the idea that prospects will be able to browse through them. Or, I can quickly lay my hands on a specific example of the sort of website they might be wanting.

It doesn’t work. However, I still take the netbook to show that I am something to do with computers.

I used to print screengrabs of my portfolio and put them in transparent pockets. The screengrabs were printed on coated paper for colour density and simply glued on the page.

The folder of screengrabs always gets attention if you remember to leave it out on the table. And you can still lay your hands on that site.

Pic FolderDSCN1355

Lately, I upgraded the folder. I either printed my own postcard sized screengrabs or got them done at a Postnet. And stuck them on black card. And bought a plastic comb binder. And put a transparent sheet as the front and back cover.

Now they look presentable. I also made sure that the visually appealing sites were at the front. As new sites arrive, I can print grabs and add them.

What else? A company profile is worth putting together and leaving behind. One thing that is useful is a file of AWStats printouts to show the prospect what he can expect both in terms of traffic and general information.

Also take any relevant emails – they’re more useful than you think.

I also take an exercise book and couple of pencils. I bought a very fancy plain paper, leather bound book in India. Very striking. I usually make notes in it and prospects do remember that book. It’s got a huge clasp on the front that presents a massive lump that is almost impossible to write on. But they remember that book.

Pic Books

Your Bag

As long as it’s not shabby and unprofessional, anything will do – even an old leather briefcase. I use a black nylon laptop bag that will take the laptop and also has a bunch of pockets for things like a laser pointer, the cellphone (ALWAYS turn it OFF) and car keys (don’t have them bulging out of your pocket). I also have a simpler document bag, also black and nylon for short non-prospect meetings. In both bags is a supply of business cards. I also put one in my shirt pocket so that it can be produced with a flourish.

Pic Bag

OK, You’re cool and out the car. Carry your bag in your left hand. You’re going  to shake hands. Prospects will not like to shake hands with something that’s hot and very sweaty.

Meetings – What to Take

Documents

I see young web designers always carry a laptop/tablet to meetings. What for?

I have loaded my portfolio onto a laptop with the idea that prospects will be able to browse through them. Or, I can quickly lay my hands on a specific example of the sort of website they might be wanting.

It doesn’t work. However, I still take the netbook to show that I am something to do with computers.

I used to print screengrabs of my portfolio and put them in transparent pockets. The screengrabs were printed on coated paper for colour density and simply glued on the page.

The folder of screengrabs always gets attention if you remember to leave it out on the table. And you can still lay your hands on that site.

DSCN1355Pic Folder

Lately, I upgraded the folder. I either printed my own postcard sized screengrabs or got them done at a Postnet. And stuck them on black card. And bought a plastic comb binder. And put a transparent sheet as the front and back cover.

Now they look presentable. I also made sure that the visually appealing sites were at the front. As new sites arrive, I can print grabs and add them.

What else? A company profile is worth putting together and leaving behind. One thing that is useful is a file of AWStats printouts to show the prospect what he can expect both in terms of traffic and general information.

Also take any relevant emails – they’re more useful than you think.

I also take an exercise book and couple of pencils. I bought a very fancy plain paper, leather bound book in India. Very striking. I usually make notes in it and prospects do remember that book. It’s got a huge clasp on the front that presents a massive lump that is almost impossible to write on. But they remember that book.

Pic Books

Your Bag

As long as it’s not shabby and unprofessional, anything will do – even an old leather briefcase. I use a black nylon laptop bag that will take the laptop and also has a bunch of pockets for things like a laser pointer, the cellphone (ALWAYS turn it OFF) and car keys (don’t have them bulging out of your pocket). I also have a simpler document bag, also black and nylon for short non-prospect meetings. In both bags is a supply of business cards. I also put one in my shirt pocket so that it can be produced with a flourish.

Pic Bag

OK, You’re cool and out the car. Carry your bag in your left hand. You’re going  to shake hands. Prospects will not like to shake hands with something that’s hot and very sweaty.

An Opinion

After years of designing websites I have reached a conclusion, at least one for the time being.

Having been self-taught in HTML from 1995 I have tried Joomla, ModX and a variety of other CMSs  before settling on WordPress. It’s pretty good now, having started as a clunky web-blog like all its contemporaries.

However, having gone through dozens of themes and plugins over the last few years, WP does have its drawbacks. Anything related to the blog aspect it is unsurpassed but to web pages, it still holds no candle to HTML code. I cannot count the times I have tried to customise some aspect of a web page using WP and come away – hours later in some cases – completely frustrated. Frustrated because what I wanted to do would have been accomplished in a few minutes with a straight HTML site.

I have taught HTML to a number of students over the years and some have gone on to take up web design as a career. Their environments have dictated other software such as Dreamweaver. To a man, they have all reverted to driving the code with straight HTML even though it may have eventually imported into Dreamweaver.

I think that more effects are possible through standard jQuery plugins than through WP plugins. To implement an effect using one takes a few minutes and to customize it takes a few more. A WP plugin can also be implemented quickly – though not as quickly – but to customize one means CSS mining at best. At worst, the customization may not be possible, at the end of struggling for a couple of hours. It is no wonder that jQuery plugin authors design for jQuery first and then – maybe – for WP.

Further, HTML sites have one tenth the code of WP sites and load very much more quickly and their content therefore is far more visible to search engines.

So, I would say that for websites that do not need updating frequently, use HTML. If the client wants a blog then tack one on.

Meetings 3 – Pace Yourself

Get yourself informed about the prospect and what he expects before you start the pitch. You can then deliver a much more measured delivery.


carsalesman1The ‘running off at the mouth’ that is often employed by web designers both at web design meetings and on their websites is meant to impress upon the audience how much they know.  All it does is impress the audience how disorganized (and sloppy and illiterate) they often are.

Continue Reading

Meetings 1 or Why You Were Invited

Less than ideally, and usually, the web developer meeting  takes place after you have submitted the website quotation. In other words, your prospect has shuffled a bunch of quotes from other web developers together and for reasons unknown, you have ended up on his little pile of web developers.

Why You Are There

The reasons could be a low price (ugh!) or, you hope, the professional web design service you offer. Or anything else. But, you need to go into this meeting with a good mental picture of what you quoted for and the amount you quoted for the website commission. Take any emails because for sure, he will have them. Look through the correspondence in relation to the quote. Have I missed something?

angrymanIn most cases it’s the price that got you there and not your fancy quote form so expect some horsetrading.

At the meeting, additional website functionality/pages will be brought up either by your prospect (to squeeze the quote) or yourself  (to increase the quote).

The Curve Ball

He has had the chance to look at several web design quotes and thought to himself – “Hmm, didn’t think of that!”, “Ooh, I want LOTS of those!’ or “That would be nice”.

He will try and get you to commit your price to this additional functionality, which may be significant – (“Oh, we thought we’d have a database driving those extra 20 pages”).

Continue Reading

durban-website-designers.co.za Revamp

Now, I quite like this ‘hippy’ website. You’d be surprised how much searching went on to find a real hippy. Created during my last ‘reversed out text’ period, it contained some experiments with CSS3. The ‘fan transition’ of the nerd pic on the home page was courtesy of Stu Nicholls and the gradient filled title text was courtesy of – I think – NetTutsPlus.

bwd

Things move on however and a brighter phase to my design period – but mainly a chance to try some new scripts. The new site has quite a number, mainly from CodeCanyon but the layout isn’t one of those.

I usually use a layout template of my own or go to CSS Portal or Dynamic Drive to get a bulletproof template. However, as some fuss has been made of grid layouts I thought I would give one a try. I looked at a number, not really knowing a good one from a bad one. Mainly, they had to be as cross browser as possible, responsive and easy for a duffer like me to use.

I eventually alighted upon responsivegridlayout???? from a web designer in Newcastle in the UK. He uses it all the time. Easy peasy, 12 columns, not much code, a kakhouse of CSS files.  And, easy to understand and mix and match columns on the same page. For what it’s worth I settled on 4 columns – three for the content and one for the sidebar.

The second ‘new’ thing was not new but nearly new. Layerslider is another product of Envato and was stress tested on warthog.co.za. It is a lovely piece of work because there seems to be little limit to what it can do. It eve does parallax effects, but not, I think, Ken Burns.

This time, the slider was restricted to half a dozen slides with simple animation and transition. Rather, the emphasis was on the words. It’s a bit bare so I might work on it a bit more but still keep the slide number down.

d-w-d-2014

 

The third Envato tryout was a tab script. Again, dozens to go for. What I do to narrow the search and save time is to list the scripts by sales. If they like it, I like it.

Eventually, Sky Tabs was chosen, and, I have to say, works well with some really interesting transitions and layout flexibility.

Tryout number four was not Envato but (Ithink) from CSS Tricks. Custom scrollbars in CSS3. Now, I have tried these years ago for IE only. I had real fun – one I did was a scrollbar of threaded rod with the moveable portion being two nuts that slid up and down. Fun but took a bunch of Javascript.

The current ones of course do NOT work in IE but can have the full CSS3 arsenal applied – colours, shadows and radii.

Nearly forgot – the menu. I chose one of the many CodeCanyon megamenus and again, like the tabs, is really good. And again, like the scrollbars (and tabs for that matter) I had used the same effects years ago. This megamenu can have anything thrown at it and even comes with a functioning contact form so there is really no need for a contact page – the menu dropdown is the page.

Tryout six was a couple of pricing tables to use in one of the tabs to list the fees.

Also in one of the tabs were a few screenshots. I looked around for a script that would enlarge them on either click or mouseover and went back to an old favourite – Visual Light Box. Strange, although this is years old, I couldn’t find a script to beat it.

You can choose the thumbnail size, column number, onClick or onMouseover, start a slide show or not… Then a bunch of skins for the thumbnails and the enlarged slides. The only problem was that onMouseover tended to open a browser tab with the pic on it – i.e. it didn’t work at all.

If I used onClick, it seemed to work. I thought it was Chrome but the same thing happened on other browsers. I have a Chrome extension that clears a bunch ot things – typically the cache – with a single click. If I set it to delete ‘PlugIns’ too, that also cleared the problem up. A second, minor problem that is fixable is that the semi-opaque overlay only comes half way down the screen.

Finally, some social buttons to round things off.

The home page has all of this junk on – the internal pages are pretty standard. Now, the rub – how cross browser is this lot?

The answer would be ‘fair’ I suppose. As usual, the Mozilla browsers and IE 9/10 are perfectly OK. IE8 is a different story – at least for the home page. Looking at the browser compatibility of the  scripts themselves (and others on the Envato site), whilst some will work on IE7, most start at IE8 or even IE9.

So, a look at the SA browser share for IE and it turns out that around 20% of the locals use IE8 (less than 1% for IE7). Microsoft is discontinuing support for IE8 shortly so perhaps it is time to ignore it and put a dropdown on the home page where IE8 is detected suggesting an upgrade.

A pig’s dinner. So, the usual detective work begins but because there is so much new stuff I will have to construct simple pages each only containing the new item and gradually combine them into one page until everything breaks. I suspect the slider or the tabs.

When it’s finished, the elements can be used on other sites – in fact, the whole layout can be used as a template.

Scripts used:

Layout: http://www.responsivegridsystem.com/

Megamenu: http://codecanyon.net/item/css3-mega-drop-down-menu/126387?WT.ac=category_thumb&WT.z_author=Pixelworkshop

Slider: http://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100

Tabs: http://codecanyon.net/item/sky-tabs/5808594?WT.ac=category_thumb&WT.z_author=voky

Visual Light Box: http://visuallightbox.com/

Scrollbars: http://css-tricks.com/custom-scrollbars-in-webkit/

web-designers.co.za

I had forgotten I had this domain. I had just let website-designers.co.za lapse. This domain had a 301 redirect to warthog.co.za.

When I disabled it to see what was underneath, an early version of the warthog website appeared that relied on imported content so I could safely delete the lot.

I uploaded the search-optimizers.co.za site and had to modify the content in case Google thought the two were identical sites. As usual in these matters one sees all sorts of improvements in the words. There’s always a push to shorten and shorten without losing the meaning.

Still, it gave me a chance to look at the website again. It doesn’t look bad. I was determined that, unlike various other web design websites I’d done, it wasn’t going to exceed ten pages. There’s always the temptation to add extra pages that nobody visits.

search-optimizers.co.za

I thought this domain might bring some business but over  the five years or so it’s been up, nary a thing. I would have deleted it but several sites sit under it so I renew it every year. When it went up it used several new CSS3 tricks and I was quite happy with it but now it looks like a porn site. My experience is that prospects don’t look for search optimizers.  The few requests that I have had to do search optimization on existing websites have come through the warthog.co.za site. Invariably I decline the job – no-one likes messing with someone else’s code.

So, being un-busy I did what I usually do and spring cleaned the server and redesigned a website of mine – search-optimizers in this case. I also take the opportunity to try out some new code. I am a visitor to Hotscripts, PHPJabbers and CodeCanyon and it was the latter I wandered about.

Before that however, I thought I would ditch my usual site template in favour of a grid based layout and try it out. I found a very good one too – responsive and easy to use.

For the last few months, I also took the opportunity to play with some sliders. I am not a fond lover of these things. Not because of what they are but because of the way they are abused. So many designers have no design ability but feel compelled to have a slider. So, they take a bunch of happy clip art and add some banal marketing text. How boring can that be? What a waste of pixels.

I first bought WowSlider which comes with a GUI.  It’s a bit limited but is a good start. Then NivoSlider simply in order to get text on the side of the slide like the BBC rather than at the bottom. I thought it was overrated and only used it once.

I then came to CodeCanyon and RevoSlider which I used on warthog.co.za/primatecare. I was impressed until I chanced upon LayerSlider. This thing can do just about everything so I stress tested it on warthog.co.za and had real fun.

So, this was the slider of choice for the new website. In contrast to the frenetic Warthog slider, I was going to make this one more refined and subdued. In addition to the new layout and slider I bought a megamenu script. Now, I used these things way back in about 2000. There was no jquery then but they worked.

Another element that’s very useful in containing a lot of content in a small space is tabs. Since CSS3, there have been quite a few. Nowadays, they are very sophisticated and versatile so I ended up with SkyTabs.

Responsive Grid System: www.grahamrobertsonmiller.co.uk

MegaMenu: pixelworkshop

LayerSlider: kreatura

SkyTabs: voky

So, the new site was going to be challenge. It was and I spent more than a week at it. It all dovetailed nicely together and the only grit in the Vaseline was the width of the tab content. I used up most of a day trying to find the suspect code and eventually it was some CSS for a

  • element that was stopping the tab content box from being resized. Other than that, I found the scripts very well done, nicely commented with an understandable CSS and very good value for money. I spent a lot of time on the second slide on the Warthog site – it had over 50 layers to simulate a shotgun of websites and I couldn’t neglect so I had to include just that one slide on one of the pages.

    One more new thing on the site – font awesome for the icon fonts on the menu and visual light box for the screenshots.

     

    I was used to working with a single CSS stylesheet but now I have twenty.

    Image5

    Incidentally, PHPJabbers have some new free scripts – single long web page with sticky header, ‘To Page Top’ script and an infinite scroll (Facebook) script.

  • Copyright © 2019. Powered by WordPress & Romangie Theme.

    %d bloggers like this: