Welcome to this First Post

Featured

This blog simply relates aspects of being a freelance website designer. The challenges, frustrations and occasional successes. Whether the actions and opinions are right or wrong is unimportant. They are simply responses to frequently encountered situations.

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.

A Website Designer’s Opinion

After 20 years of website design 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.

A Website Designer’s Opinion

After 20 years of website design 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.

Featured Website 01: Hill Billys

[vc_row][vc_column][vc_column_text]

In the competitive tourism industry, website design has to be first class, particularly in the area of usability. Visitors have to be presented with a comprehensive amount of information of information on the home page without cramming. Continue reading

Featured Website Design: Tudor House Inn

One of the first commissions in 1997 was an accommodation website for St. Lucia Wetlands Guest House and over the years, many similar websites have been designed but none in Durban.  Until a commission for Tudor House Inn website on Umhlanga Rocks Drive.

Continue reading

Featured Website Design : EeziPumps

Our client sells a variety of water pumps – pressure booster pumps, swimming pool pumps, sewage pumps and borehole pumps. This site is their third and focuses on the submersible pump range which includes sewage pumps, stainless steel dirty water pumps, borehole pumps and sewage lift stations.

water-booster-pumps.co.za and swimming-pool-pumps.co.za are some years old and, while they follow a Dynamic Drive CSS based layout, are not designed from the ground up to be responsive. The new website submersible-pumps.co.za uses a responsive grid  based on skeleton grid system. The system is very lightweight and easy to use unless you want nested cells where it battles. It seems to be eminently responsive insofar as it has been tested on small devices.submersible2

Its two other concessions to current web design practice are a slider using LayerSlider and a megamenu. I have yet to find a more flexible slider than LayerSlider although the implementation in this case is fairly straightforward. The megamenu is one from Code Canyon and is not really required with any degree of complexity.

Short descriptions of the various pumps help the visitor to decide on the one which will be best suited. Another nice feature is the built-in contact form – simple but enough for most uses. I love font-awesome but battled to find pump-type icons.

submersible3Like all our recent websites, the full contact details appear on every page, in this case in the left sidepanel but can also appear in the header. I’ve always disliked the ‘Contact Us’ page – one extra click on to a page that might or might not be understandable.

 

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 <li> 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.