div.slicknav_menu {display:none;}
        .nav { border-bottom: 0; margin: 0; background-color: #0CF; }
        .nav li a { display: block; text-decoration: none; padding: 0.75em; }
        .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 30px; }
        .nav { border: 0; }
        .nav ul { background: #0CF; margin-top: 0; list-style: none; padding-left: 0px; }
        .nav li { float: left; position: relative; }
        .nav li a { border-bottom: 0; }
        .nav li a:hover, .nav li a:focus { color: white; text-decoration: underline; }
        .nav li ul.sub-menu, .nav li ul.children { margin-top: 0; border: 1px solid #ccc; border-top: 0; position: absolute; visibility: hidden; z-index: 8999; }
        .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 10px; border-right: 0; display: block; width: 180px; border-bottom: 1px solid #ccc; }
         .nav li ul.sub-menu li ul, .nav li ul.children li ul { top: 0; left: 100%; }
        .nav li:hover > ul { top: auto; visibility: visible; }
        /* ########################
        Content styles
        ######################## */
        main#main img { max-width: 100%; height: auto; }
        img.alignright { float: right; margin: 0 0 1em 1em; }
        img.alignleft { float: left; margin: 0 1em 1em 0; }
        img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
        .alignright { float: right; }
        .alignleft { float: left; }
        .aligncenter { display: block; margin-left: auto; margin-right: auto; }


/*==================== Nav ====================*/
    .nav { float: right; background: none; margin-top: 30px; }
    .nav ul { background: none; }
    .nav ul a { color: #000; }
    .nav ul a:hover { color: #000; }
    .nav ul li:last-of-type a { padding-right: 0px; }

/*==================== Body ====================*/
    .wp-block-image figcaption { color: #888888; margin-bottom: 30px; }
    .wp-block-image.size-full { margin-bottom: 30px; padding: 5px; background-color: #00aade; }
    .wp-block-image.size-full figcaption { text-align: center; color: #fff; margin-bottom: 10px; }
    .article-header img { padding-bottom: 1.5em; }



/*==================== Home Page ====================*/
    .blog-grid { justify-content: space-between; }
    .blog-grid .d-1of3 { width: 30%; flex-basis: 30%; }
    .blog-grid h3 { font-size: 1.1em; line-height: 1.3em; padding-bottom: 0px; }
    .blog-grid p.post-date { padding-bottom: 5px; font-size: 0.8em; }
    .blog-grid p.post-excerpt { font-size: 0.8em; }

    .blackOverlay { background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; display: block; position: absolute; top: 0px; z-index: 1; }

/*==================== Pagination ====================*/
    .pagination, #content .pagination { text-align: center; width: 100%; clear: both; padding: 20px 0px; }
    .pagination ul, #content .pagination ul {display: inline-block;background-color: white;white-space: nowrap;padding: 0;margin: 0;clear: both;border-radius: 3px;}
    .pagination li, #content .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; }
    .pagination a, .pagination span, #content .pagination a, #content .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 14px; font-size: 14px; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #2592E9; }
    .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #2592E9 !important; color: white !important; }
    .pagination .current, #content .pagination .current { cursor: default; color: #fff !important; background-color: #2592E9; }
    .pagination .current:hover, .pagination .current:focus { background-color: #2592E9; color: white !important; }


Get your website ready for mobile visitors with responsive website design

How to optimize websites for mobile devices (tablets and mobiles)

This post will look at what you can do to optimize your website for mobile visitors, mobile visitors are users who are accessing your website via a mobile device such as a tablet (iPad) or a mobile phone (iPhone). The number of users accessing the web via a mobile device has dramatically increased in recent years mainly due to the improvements in technology that make it possible to do nearly everything you do on a desktop on a mobile device.

Mobile phone web access has grown dramatically in recent years, rising from 0.2% of all UK web traffic in 2009 to 15% in 2011 Source

With this rise in mobile visitors set to continue it is more important then ever to ensure you are catering to the mobile market, in this post we will look at what you can do to make mobile visitors enjoy the experience they get while on your website.

Do nothing

The first mobile visitor strategy we will look at is doing nothing, this may sound a strange way to to approach the problem however in some cases it may be the best option, the creators of mobile devices such as Apple with their iPad and iPhone know that the web is full of content that has not been optimized for the smaller screens and have built into their devices the capability to render full size websites and automatically adjust some features to make them more mobile friendly, an example of this on the iPhone is the auto linking of phone numbers – the iPhone will automatically link any numbers so when a user clicks on them they will automatically call the number.

This means that most websites will be usable on mobile devices already the important thing here is to try it out and see how the devices deal with your website, some can work well especially on the tablet devices and may not need any further input but others do not transfer well onto the mobile platform – those that rely on hover over effects that can’t be duplicated on touch screens for example or content that is created using flash (see below)

 Remove Flash content

The majority of mobile devices do not support flash this means that a website using it will not display correctly when being viewed on a mobile device, if the content being deployed via flash is not vital to the websites structure or the rest of the page content it may not be a problem however many sites deploy flash to power features such as their navigation with the end result being mobile visitors can’t browse past the home page of your website. The solution? to remove flash content from your website or provide alternatives for devices that do not support flash content,  if you are unsure on how to do this contact your website developer for more information. Modern websites make use of JavaScript to achieve the same effects that older website deploy flash to achieve and with the rising popularity of JQuery a JavaScript framework there are large numbers of freely available plugins to achieve the effects without needing to know how to program in JavaScript.

Responsive website design

The biggest limitation of mobile devices is the small screen size, this means that websites need to make the most of the screen real estate that is on offer, the best way of doing this is to upgrade your website so that is is responsive simply put what this will do is let your website adjust its layout automatically to the different screen sizes your visitors are using to view the website. To learn more about responsive website design check out this blog post.

Other options

To create a truly mobile device optimized experience there is other options that may need your needs better however they will both require creating a separate version of your website which may not be the most efficient method as it will require separate updates.

Native App

This option will involve creating a native application for all of the device operating systems you wish to target, the native app will then be distributed via the devices authorized software store – for example the Apple App Store. Creating a native application will give you access to the devices features such as the camera and GPS that the other options will not, the downside being for each device platform you wish to target you will need to produce a separate native app. For example if you wanted to target Apple, Blackberry, Windows and Android  you would need to create 4 different native apps.

Web App

An alternative to creating native apps for each mobile platform is to create a single web app, this would mean that apart from only needing to create a single app in the start when you update the content of your app you will only have one app to update. A web app is essentially a website that uses a JavaScript frame work such as JQuery Mobile to give the appearance it is running as a native app. What this means is users can add the app to their home screens and unlike websites the app can run in full screen making it look just like a native app. To learn more about web apps check out this blog post.

What to do next?

The next step is to review your site looking at it on the mobile platforms you wish to target and decide on which route to take, if your website works well and does not contain flash content you may not need to do anything but if you want the best performance and access to the GPS and camera you will need to go down the native app route. The majority of websites that need to do something will end up creating a responsive website as this is the most effective option from both an end users view point as it scales to fit different screen sizes but also for the owner of the website as it will be cheaper to implement then the other options but also because there will only be a single ‘system’ to update.

If you are still unsure what to do or would like to get some help with your specific project please feel free to contact me or leave a comment below