Thursday 20 December 2012

Single Page Websites (Capturing Specific Searches)

There are a number of cases where single page websites are suitable for a business.

For example, where you want to target a specific Google search for a service or product or where there isn't much you need to say about your business and / or you just want the site as a reference to point potential customers to that you have gained elsewhere.

It is all depends on the number of keywords and phrases you want to appear in a Google search for. The more products or services you offer and the greater the competition in your target area, the more web pages you will need.

Specific Keyword Sites


The following three stand-alone sites are examples of capturing very specific searches with links to direct potential customers to the main website:


Holding Websites


A single page website featuring your logo, business name, address and telephone numbers can also be useful as a holding page for an email address or domain registration where you want to reserve a domain name, but aren't ready to create a website yet.

Friday 14 December 2012

Code Tip #2 - Rounded borders on images in CSS3 without putting them in background (or using overflow:hidden;)

It's been a long time coming, but this is our second coding offering. It was discovered after trawling through the internet and not finding quite the right solution for a problem.

The scenario is a familiar one. You want to add a rounded border and perhaps a drop shadow to an image, but the required CSS3 isn't supported in all browsers.

There are a number of solutions out there that put the image in the background to solve the problem, but our images were part of the page content and we wanted them to be easily available for printing. Another solution uses overflow:hidden;, but we found that was not reliable across all browsers.

The Problem


Just to recap, this is the code that we would expect to be supported, but isn't:

    .image_rounded_shadow {
        margin: 5px 5px 5px 5px;
        padding: 10px 10px 10px 10px;
        border: solid 1px #BDBED9;
        background-color:#F5F5F8;
        box-shadow: 1px 1px 6px #888888;
        -webkit-box-shadow: 1px 1px 6px #888888;
        -moz-box-shadow: 1px 1px 6px #888888;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;

    }
  


    <img class="image_rounded_shadow" src="[Your Image]"/>

Which produces the following result:


The Solution



After trying a number of solutions suggested on-line, we hit upon using a span and effectively applying the border-radius twice, which seemed to work nicely.

    .image_rounded_shadow {
        display: inline-block;
        margin: 5px 5px 5px 5px;
        padding: 10px 10px 10px 10px;
        border: solid 1px #BDBED9;
        background-color:#F5F5F8;
        box-shadow: 1px 1px 6px #888888;
        -webkit-box-shadow: 1px 1px 6px #888888;
        -moz-box-shadow: 1px 1px 6px #888888;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
    }

    .image_rounded_shadow img {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
    }

    <span class="image_rounded_shadow"><img src="[Your Image]"/></span>

Which produces the desired result:

Notes


Take note that the border-radius for the img tag is smaller in relation to the border-radius being applied to the span. You will need to experiment if you wish to use a different radius.

No doubt, this post will not be relevant forever as browsers catch up, but for now this appears to work in IE, Firefox, Opera, Chrome, Safari and all the mobile browsers we tried.

Questions


If it works for you, spread the word and perhaps add a link somewhere back to this page.

If you have any questions, submit them below, but please make sure you've read the whole post before asking for assistance.

For Interest


The building pictured is Angkor Wat (minus scaffolding) in Cambodia, probably one of the most impressive driveways in the world.

Wednesday 12 December 2012

Blog Authoring

As well as web design, EasierThan Website Design also offer blog authoring and other social media management services, for example for Facebook and Twitter.

These can be provided as a stand-alone service or as part of a wider search engine optimisation package.

Example Blogs


Take a look at the following blogs for examples of our work:


Improved Google Rankings


A well maintained blog with interesting articles can help to improve your Google rankings.

If you would like to maintain a blog for your business, but don't have the time or inclination to do it yourself, why not give us a call?

Website Revamps

EasierThan Website Design can revamp your exisiting website to attract a wider audience and take advantage of newer web technologies (such as CSS3).

Take a look at our recent work done for Centurion Blast Cleaning Ltd of Leyand.

Before


After


Whether you're an existing customer or a new one, give us a call to review your website.