Archive for August, 2014

SEO and Responsive, Mobile-Friendly Designs

I have always been someone who thinks beyond the task at hand and to the larger impact of decisions and the things created. Recently, I did a little project for my buddy Pierre who works at a local electronic repair shop – www.LandMelectronics.net. This little website has been a great test environment for me. This time the job took about a day. This morning, with a fresh browser I observed the effects of the website changes had on SEO.


landmthumb


Their old site was a clunky thing that I did in 2006 so they really needed an upgrade. This time I choose a WordPress, Bootstap 3.0 enabled theme that of course is responsive (meaning mobile-friendly). I implemented Google maps, made sure they where set up with SEO friends urls, description META tags all good, titles just right, etc. I then moved the site to my account on BlueHost which simply ROCKS!

Before the site change, I noticed that L&M Electronics had fallen off the search results of Google. A week after the site launched, they now come up on the first page for all kinds of search terms – ‘san francisco receiver repair’, ‘san Francisco autio repair’, ‘stereo repair sf.’ As well as simply “L and M Electronics.”

While Google states it does not take into account responsive designs into SEO and that it does not hurt.

http://www.webpronews.com/matt-cutts-talks-responsive-design-impact-on-seo-2013-11#disqus_thread

From my anecdotal trial, I have a feeling that Google prefers responsive design. Google is in the business of serving up quality search results. It makes them look good when your website looks good on all devices. Even though the content on this website was exactly the same, it helps to make a new website. Google likes current information and a new website gives them the impression that the site is being maintained.

If you need to upgrade your small business website, just call or email. Here to help out.

Using LESS with WordPress Twenty Fourteen Theme and a Child Theme

I have been diving into CSS preprocessors this last month. Even though WordPress has adopted SASS as the preprocessor for the admin (see: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor), I used LESS in a little project to manage the child theme of my Twenty Fourteen blog website. The concept of child themes – http://codex.wordpress.org/Child_Themes is best practices.

For my project I needed to control the background colors for the menus. By default, these menus  they green. In order to change these you really have to dig through many instances of this green color(s) in the CSS. I found a plugin called Fourteen Colors http://celloexpressions.com/plugins/fourteen-colors/. This plugin overwrites the CSS with an internal style sheet. This style sheet is generated from the Fourteen Colors plugin settings in the admin. If you simply want to change the colors of your Twenty Fourteen theme, this is your best option. This post is really about exploring WordPress development with .less.

Default Theme Colors

 green

LESS Generated Colors

blue

01

The concept was to use .less and have it generate my child theme style.css file which would change the green menu to blue. I already had node.js installed. I was using an IDE called WebStorm which with the feature called File Watcher that can prepossess the css. I chose to put all the .less files in a folder call src with the path being
s\wp-content\themes\twentyfourteen-child\src (see above). This way the dependencies would all be in one place.

02

And presto it works. You have a LESS preprocessor dev environment and everything is production ready as WordPress will always just look at the compiled .css file. This can be extended and have the .less files incorporate other features of the theme.

For the final results see http://www.pelicancafe.net a blog site where I have some fun and write about San Francisco, Music and other topics. The github link  is https://github.com/pelicanpaul/twentyfourteen-childless. Of course, at the pelicancafe.net site you are simply seeing the compled css file.