Web Design and Web Development Blog from Webilicious in Tasmania

The latest website created by Webilicious® is for Stewarts Bay Lodge standard and deluxe self-contained accommodation including Gabriel's on the Bay Restaurant and Function Centre, Port Arthur's only waterside restaurant. Stewarts Bay Lodge is ideally placed for a holiday exploring Port Arthur and the rest of the attractions on the Tasman Peninsula such as the Tasmanian Devil Conservation Park and Pennicott's Tasman Island Cruises. The 22 acre (9 hectare) property is in a stunning bush location fronting on to Stewarts Bay with access to the beach and within walking distance of the Port Arthur Historic Site.

Web Design

The website is built with Joomla 3.x and a customised RocketTheme template, "Osmosis". I chose Osmosis because I wanted a full width or "fluid" template. The styling has been updated quite extensively and the Stewarts Bay Lodge website looks quite different to the Osmosis demonstration page on the RocketTheme website.

Customisations include (for example):

• simplification of backgrounds
• the menu font size and spacing has been optimised for each responsive screen width
• the main content background has been made transparent to help show off a background image at the bottom of the page
• a full width slideshow on the home page with a shorter height version on the tablet version of the website and which is not displayed at all on the mobile version of the website
• amended font styles and colours to match client's paper based marketing material

The website works well responsively with sets of images and information boxes scaling as the screen width varies. On the mobile version of the website, images and information boxes are set to stack vertically one on top of the other at full width.

Web Development

Apart from the standard extensions such as Akeeba Backup and Akeeba Admin Tools that I install on every website, I have installed "AllVideos" plug-in, "Event Gallery", "jPanel", "Noo Google Map" and "Slideshow CK"  which are all free or have free versions.

Event Gallery

This gallery from professional photographer Sven Blüge works well responsively and excels at displaying rows of mixed portrait and landscape images very well together. Social sharing buttons have been enabled so that any image can easily be shared to various social networks.

jPanel Sliding Module

The jPanel module has been selected to display promotions on the website. I feel this is a better option for promotions compared to an intrusive pop-up or similar as the tab is displayed out of the way when the page initially loads but is still obvious to website visitors who may be interested in the latest special offer. The module displays the contents of another module or (as in this case) the contents of a particular article. It is easy for website owners to update the article and to publish or unpublish the module via Module Manager.

Up until the end of November 2014, mention when booking that you saw the special on the website and you can have a free breakfast for 2 people if you book 2 or more nights!

Noo Google Map

Noo Google Map has been used as the location map on the contact page. It works well responsively, looks great and is easy to set up.

Slideshow CK

Used on many of the other websites I have built, Slideshow CK is a favourite because it works well responsively, is W3C compliant and uses lazy loading so that only the first image is loaded when the page loads initially.

The latest Joomla 3.x website created by Webilicious® is for The Eco-Hamlet, Greenmount. The Eco-Hamlet is a property development in the Perth foothills where there is a focus on community and sustainable development. The property is just under an acre with an existing dwelling and zoning for another seven dwellings at an average of 450 sqm each.

Web Design

As usual, I have used a RocketTheme template, this time "Anacron" which has a nice scrolling feature on the header where it scrolls out of view as you scroll down the page, providing the maximum page view. The header pops back into view when you scroll up.

I have made various customisations to the template such as:

• the main content background has been made transparent to help show off the background slideshow
• the menu font size and spacing has been optimised for each responsive screen width

Web Development

Apart from the standard extensions such as Akeeba Backup and Akeeba Admin Tools that I install on every website, I have discovered and installed the misnamed but excellent "Event Gallery", "Noo Google Map" and "PRI Background Slideshow" which are all free or have free versions.

Event Gallery

This is a very nice looking gallery from professional photographer Sven Blüge that has nothing at all to do with events except that you might take a set of photos at a particular event. "Event" can be better interpreted as "Folder" in this case. Apart from the misleading name, this is an excellent responsive gallery which displays images of different proportions very well together. Captions and image e-commerce options are available but were not needed for this particular website.

Noo Google Map

My preferred Google Maps extension has always been the plug-in from Mike Reumer but I wanted something that would work better with a responsive template and found the "Noo Google Map" module which is also free. It is very easy to configure and looks great. You need to work out the latitude and longitude of the target destination but this is fairly easy to do by entering the address on a free geo-coding website such as "NAC Locator" or similar.

PRI Background Slideshow

Full screen background images and slideshows seem to be quite popular now and it's easy to see why. I mistakenly believed that this functionality would need to be built into the template but found a couple of free background slideshow modules that proved me wrong. "PRI Background Slideshow" and "Fun Supersized" are both excellent. I chose "PRI Background Slideshow" in this case because I found it slightly easier to set up and because it seemed to load a little bit faster. The "Fun Supersized" background slideshow has more options if you need them but I just wanted something simple for this website.

The background slideshow needs to be anchored to a particular CSS element. body is selected by default and this worked fine on the RocketTheme template.

I installed the module to the "debug" module position but had to add #rt-debug {display: none;} to my custom CSS file to prevent the default module padding and margins creating unwanted space on the page.

10,000 favicon / Apple Launcher icon sets have been created by users since iconifier.net launched six months ago! :)

After the initial six months, page one Google search results achieved include:

• free apple icon generator
• free apple icon creator
• free online icon generator
• free online icon creator
• free online favicon generator
• free online favicon creator
• free icon generator

Thanks for all the support and positive feedback!