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.

Not Taking My Own Advice

I always advise others never to discount their services. We have a certain skill set that has a value attached to it. I offer very discounted rates to a very few friends but I always invoice them the full amount less the discount – even if the discount is 90%. They then know the full value of what they’re getting.

Problems arise when discounts are given to clients unknown to yourself. I have a number of clients in a small area so when I was approached by one of their own, I offered a 10% site discount. THe quote was in November and the client only replied in March when the quote was well out of date. I could have requoted at a highert rate, particularly as the new year had started, but didn’t.

In addition to more than R1,000 off, I quoted only at 50% of the rate for a logo he wanted. Now, I hate doing logos. There’s no money in them and I made the cardinal mistake of not quoting an hourly rate.

This logo very quickly became two logos but I didn’t requote and it then did what all logo jobs do. It went back and forth. The client couldn’t make up his mind. They never can and after a couple of weeks and several drafts ended up pretty near where we were at the beginning of the job.

He also then wanted – an unquoted – business card. As I had done the logo, I did one. Then he wanted another just for himself. As the two were similar I did that too.

Complicating all of this was the inability of the client to express clearly what he wanted. Worse, he tried to give  long complicated instructions over the phone. This is a recipe for disaster and despite me cutting him off, the next call would again come with instructions.

The website itself went off with very few changes. Except the bloody photos.

Having asked for, and been given, and inserted photos, I was then told that a whole lot of new ones had been taken. A DVD appeared that not only had new pics but also all the old ones mixed up.

All of these things of course make an unpleasant job even longer and more frustrating. Half way through the job he asks “Now how are we with the brochure?” What brochure? It was never asked for nor quoted for but I agree to do a simple layout if I have the time.

Then we get to the hosting package. Yes he wants the package and he wants to transfer to my ISP. And already he has a list of substantial additions to the site. But first, when I tell him how much it will be monthly he asks if that’s the best I can do. I remind him that he’s had R1,000 off the the site, two logos for half the price of one, two free business cards and if I can, I’ll do a brochure draft – and you still want me to discount the hosting? At which point he he backs down.

He asks for a written invoice but before he gets that, the additions he wants arrive in the mail.

Hang on – the cart has just got in front of the horse. Pay first and transfer the site and then the addition – up to thirty minutes only

At this point, I write up a schedule of what actually the package consists of – including the 30 minutes only of attention to his website monthly.

Moral – NEVER discount your rate to a stranger.