Moving to a responsive web design

We’ve been looking for a while now at a content management system (CMS) that would suit our needs, alas to no avail. Some have come close however there always seems to something that would stop us.

As we couldn’t find one we’ve decided to hand code our site in the same manner that our original site was built.

We have been taking on board html5 snippets for a while now and the html5boilerplate site has proved a good source as has .net magazine.

Given we wanted a good design that was responsive this we found a was a good starting point and so far has proved to be a good grounding.

Issues we’ve found to date surround the monetization of the site in the google Adsense do not do responsive ad units that can be used and we’ve got issues with directing people to other websites that may not have responsive pages.

Adding VPASP ecommerce store to Facebook

We’ve been using VPASP ecommerce software for a number of years, it is open source and uses active server pages (asp) as its software language, this language is very mature and hence knowledge is widely available.

With the emergence of social media and Facebook becoming the dominant social media channel we were looking at how to increase our presence in this channel, if you read the facebook integration help sections it all seems quite daughting whereas in fact it is quite simple to get a very basic integration up and running, here is how we did it.

We subscribe to the .NET magazine, an excellent publication that has a lot of useful snippets; one of these from the Feb 2011 edition covered how to integrate a web page with Facebook, following this guide we worked out that the simplist way to achieve putting our store on facebook was to use the iframe integration.

Facebook use the term Canvas instead of iframe and hence once you register for app development you would set up your apps canvas page to point to your desired store URL.

I should state at this point that we use the deluxe version 7 of VPASP (with service pac applied) and hence have access to all of VPASP’s facilities so lesser versions may restrict this capability and we have not tested any to see if they will.

You cannot merely use an iframe to display your current store front as the iframe on facebook is limited to 758 pixels wide at a maximum and you would end up with users having to use scroll bars to see the entire page width, a very poor user experience.

Our solution to this was to copy the entire web site to a sub directory, set up an additional store in VPASP configuration and use the default 2 column layout that comes with Version 7.

This almost worked ‘straight out of the box’ however the width was just over so we then adjust the #wrap width in this sub-directory to be 740px wide in CSS (file:layout.css of the relevant template folder being used). With this set up we used the URL to this sub directory as the Canvas page URL and set the status within the apps directory to live.

The additional benefit of using a sub-directory is your SSL certificates will remain valid thus allow the complete checkout cycle to be available to be managed in the Facebook page.

I must stress this is a basic integration, I’m working on the autocheckout side of it to see if we can take user details for auto filling in the address details/email etc. The site may need a further tweak also as to embed the site into a page (fan page etc.) you are limited to a width of 520pixels

I’ve added a Robots.txt file to exclude all spidering as effectively the site would be virtually the same as your main site so to avoid duplication issues it’s easyiest  to exclude the facebook site.