Category Archives: Site Development

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.

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/

A New Website – African Vision Trust

avisionThey seem to take longer and longer. This one, a development time of about six months.

This is a simple 5-pager for what used to be the KZN Eye Care Coalition, now called Africa Vision and at avision.org.za.

The client offers free removal of cataracts and so, with the assumption that those who read it might be sufferers, the font is large Lato. I can recommend Lato if you’re using a font-face kit. I liked it when it first arrived. It’s easy to read, bold is a real bold and it has around a dozen flavours.

The only problem I’ve seen is with Chrome that doesn’t render certain sizes of Lato properly and makes ‘t’s the same size as ‘a’s and truncates some descenders.

Copyright © 2018. Powered by WordPress & Romangie Theme.

%d bloggers like this: