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

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/

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.

Outsourcing Website Design Work

Sometimes, you don’t have the expertise to complete certain website design tasks – PHP/ASP is an example. The option is outsourcing this website work overseas.

If you take a bus in India, it deposits you almost inevitably at your destination on a spot of sand at the edge of the road, from whence you fight with tuktuk drivers to get the best price into town.

durban web designers - outsourcing to  technosoftI was waiting for a bus in Jodphur to take me to Pushkar on said patch of sand. I had about 45 minutes until the bus arrived and I looked around and right next to me was a small two storey office  building with the words ‘Technosoft – Website Developers‘.

Ha!

I have time to go in and chew the fat. It turned out they also had offices in Delhi and Baltimore. A couple of years later I had need to get a member login system and contacted them. They were very reasonable and after one  bit of editing got it right in about a week. I was impressed.

I got the client to deal with them directly and I just added the code.

Outsourcing to PHP Jabbers

durban web designers - outsourcing to jabbersA few years ago I came across PHPJabbers. They sell PHP scripts and will install the whole thing for you at no charge if you want. They’re based in Bulgaria.

Their selling point is their support and over the years, there have been plenty of tickets. They will come back to you typically within an hour – very efficient.

I have bought some scripts for myself to try and for clients. The scripts are just the hook because although they are standalone, they will inevitably need some modification which they are pleased to do. The modification rate is very reasonable.

They will also design a whole website around the script which is a little expensive, apart from the to-ing and fro-ing necessary to finish it.

Simple CMS

They also have free scripts. One of these used to be a Simple CMS.

This is a fantastic little system. It’s not a full architecture but can be bolted on to any part of any page. It uses a MySQL database and the FCK editor so the backend is like WordPress’s. Now, they charge $28 for it.

cmsMost of their scripts have two licensing levels – User, for a single application and Developer for up to five applications. The Developer licence is about three times the user licence.

© Durban Web Designers 2013