Tag Archives: responsive

Avoid a Google Mobile Ranking Demotion with responsive design

aeoncadamy mobile site - iphoneSo Google just announced a new algorithm for search rankings that will actively demote sites that are not mobile friendly. The word “Mobilegeddon” is being bandied about.

This is because your users want a mobile site according to Google 75 % of consumers want a mobile friendly site, So its not just affecting your search rankings its loosing you business.

So what can you do to avoid being demoted by the google mobile ranking algorithm ?What can be done?

Check & Test
Pick up your smartphone and go to your website.

  • How long does it take to load? (over 3 seconds is too long)
  • Does it look good ( does the content scale well can you still read the text ?
    remarkably simple i know but you’d be surprised how many sites fail this test.
  • Is it easy to navigate ?
  • googles own mobile test : /webmasters/tools/mobile-friendly/

So what can be done?  If your site isn’t mobile friendly it was probably made several years ago anyhow and its time for an overhaul.

Responsive design

Responsive design is making a site that scales to fit any device so one site reshuffles and scales to fit smaller screens like smartphones and tablets. If your site is responsive and fast it will adhere to google’s new rules and avoid demotion.  It just takes some CSS and Javascript magic but its can be done and is remarkably easy. If your using WordPress most of the basic templates like twenty fourteen and twenty thirteen will scale to fit most standard devices so you don’t need to worry.

The image on the side is a WordPress site running a customized twenty forteen theme as seen on a mobile (Iphone) This did not take hours, just a few tests and a little code. Most of the sites I have made in the last 4 years have been responsive and optimized for mobiles.

Speed testing

We also like to speed test sites speed of loading is hugely important and will impact on whether your customers stay on your site or even get to it. Face it there is nothing more annoying or rage inducing than a slow site. Some of the tools we use are :

Some solutions to page speed are really quite simple they may include:

  • optimize all images
  • reduce garbage code (CSS and Javascript )
  • allow caching

If your worried about loosing Google rankings and loosing customers due to a  poor or no mobile site give us a call we are happy to help.

Tribal& Trance Festival – a clean modern website design

It’s a new year and a new look. My brief for this was a modern & clean website for
Tribal & Trance Festival

screenshot

I moved the site over to wordPress so its not just a reskin – the previous site was joomla –
And so far the client seems really happy getting around wordPress. We wanted the site to be easy to navigate and as simple as possible.

Tools used :

Photoshop,Dreamweaver, wordpress, html ,css, php.

Process:

We used a standard theme (twenty thirteen) as a good solid base. and customize it  by making a child theme, this means when the original theme is updated it wont override our theme. Having set that up we started to customize. My aim was for it to be done with a minimum fuss and with future maintenance in mind.

plugins
Pluggins in wordpress are great, however you want to have a minimum amount of plugins on any site for several reasons. Firstly updates can kill you, yes that’s right inconspicuous update may cause a clash with other plugins causing it to fail or sometimes break other things. So I’m try and keep my plugin habit to a minimum.

Bare basics
Disable comments – I dont know what id do without this plugin , its simple but it does a might job. Often clients dont want comments on their sites, Even if they have time to moderate the comments most of them are spam anyhow, and really its a chore. To avoid security issues and spam violations this is a gem.

Some sort of backup !
Rule 1 of multimedia always have a backup. You can restore a site from a backup, make clones and sleep somewhat soundly. Knowing that if the server fails, if the site gets hacked if you need ot move it in a hurry  you have a plan.

Special functionality
I’m always trying new things  I looked around at a few “event” plugins and picked one , although I could have built a directory of events with a pay pal link from scratch its sometimes faster and cheaper to grab a plugin and style it . the one I picked had extra features like  csv export  (exporting all the bookings to an exel file) , Ical integration and google maps.  Its not to bad if your running an event based site so ill give them a plug  its called event organizer pro.

Budget responsiveness
Whats responsiveness? its how your site looks on a mobile and a tablet eg  smaller screens.   Twenty Thirteen is fairly responsive..but it did require a few tweeks. As I was using  the main header section for the logo and for some reason.. (dont ask me why) The header doesn’t scale the image !

Ok well there’s a few ways to tackle that.. you can write your own function , hack the header.php file and general spend a great deal of time messing about and testing  or…
you can do it with CSS (cascading style sheets).

Here’s my fix for what its worth – load smaller headers  in the media query.  It sort works ,I don’ttf mobilet consider it beautiful. I made two smaller versions  of the header.

A tiny but mighty one at 400 pixels for mobiles  and a slightly larger one for the tablet at 600 pixels. For me that’s great, load time will be faster, the logo is scaled correctly – a little under whats available just to be safe . ttf_header_tablet

 

 

 

Then you have to load them in the CSS (cascading style sheet)  here’s an example:

@media (max-width: 480px  or what ever your target) {

     .site-header {
    background: url(images/load a much smaller header! );
    background-repeat:no-repeat ; (unless you want an ugly tile..)
    max-width: however wide the image is;
    max-height: the image hight;
    background-size: 400px Auto !important;
            }
}