WordPress Website Redesign – Responsive, Parallax, CSS3, HTML5, and Jquery

When I first built my site I was going to just blog, then I started adding services and needed a place to showcase them.  I made a huge mistake and built a whole new separate site.  I have since shut that down, and little by little creating a services site around the blog I had.  Finally I have done a complete WordPress Website Redesign

It is Responsive, uses, Parallax, CSS3, HTML5, and Jquery… and quite attractive

I am not quite complete, so do be easy on me… but I would love to hear your thoughts!

WordPress Website Redesign

I had been using the Studiopress Genesis Framework* for my blog and stuck with that for my redesign.  I love the Genesis system because of its ease to use, flexibility, SEO optimization, clean code, and continuous updates.  I already owned this but normally it is $59.95

I decided to use the new Epik Theme* for the paint job, while it does not come in my developer account it was only an extra $18.  I love the the way the theme allowed for so much flexibility and just the simple beauty of the design.  In addition it is a Responsive Theme.

Responsive is a manner of designing a website where you consider the design of the site on mobile devices and work your way out to screens. 

Responsive websites are the alternative to a mobile site and automatically fit your site to every size screen.

The Epik Theme recommends that you use the Genesis Slider for your site, but I wanted something with some Pizzaz.  For my website redesign I wanted to use a technique called Parallax.

Parallax uses layers and motion to create a 3d like effect.  Sites with huge budgets use this technology to create a virtual moving site and it can get pretty amazing…. but for my needs a simple slider does the trick.  This allows me to create a visual show, and still maximize my site with content for SEO.

Parallax is a good alternative to Flash.

In order to display some Parallax and still stay Responsive I used the LayerSlider Parallax Slider Plugin*.  It is an amazing plugin and quite a bargain at $15.  

Purchased some cool Internet Marketing Icons* from graphic river. only $7.

For my jquery sliding “Register” Drawer I used the WordPress Sliding Drawer plugin*.  Free.

To display my pricing as beautifully and eye catching as possible and still maintain the integrity of my Responsive design I used the CSS3 Responsive Web Pricing Tables Grids For WordPress* plugin.  Only $15.

Other Plugins I Use:

(* I am an affiliate for these products and make a small commission if you buy one)

You do need to be careful how many plugins you use and how much jQuery, HTML, Javascript, and CSS you are using.  The more bling you throw on the more likely it is your site will load slowly.  A slow loading site will do more harm than any piece of coding can do good.

I also run my site through Cloudflare and have upgraded to the pro version.  Cloudflare acts like a CDN and takes my Javascript, HTML, CSS, and images and loads them on a separate server for faster load times.

As always the engine is Worpdress 3.5.2!

 

 

By |2014-05-25T22:32:44+00:00July 9th, 2013|

About the Author:

Jason Fox - Real Estate Marketing Business: We build WordPress Real Estate Websites with IDX Me: #GoHawks, #BringBackTheSonics, #MaybeNextYearMariners, #ILoveMyKids #SeattleSunLover #SeattleWaterLover #BFF Blog: Focuses on Wordpress Websites, Content Management, SEO Services, SEM Campaigns, Social Media Marketing, Email Marketing, Beautiful Design, IDX, and more.

3 Comments

  1. Walter July 9, 2013 at 7:37 am - Reply

    Your header doesn’t show up correctly on a 1900px wide resolution. FYI.

  2. ZEE CHEN September 8, 2013 at 9:36 am - Reply

    Your site is very cluttered and overwhelming, pop ups, pop ins, arrows. I bounce off sites like this fast. I wanted so see a sample of what you described in this post but there is no url or anything I see where I can see what you explained.

We would love to hear from you...

Pin
Share
Tweet
+1
Share