classic and responsive together

[hammer]

Hello,

We have a shopsite store with custom templates. We want to also add a responsive design, but are reluctant to abandon our custom templates and our classic web site. Is there a way to use both our custom templates AND one of the new Shopsite Responsive designs. We would like customers to come to the web site and one of two things happen. A customer on ipad, iphone, android would automatically go to the responsive design, or we we could show them a button were they could select go to mobile webs site with the responsive design.

The question is would this be possible in ShopSite to have two sets of pages; one classic AND one responsive? Would they be able to operate under the same license?

Thank you.

[ShopSite Lauren]

Yes and no. Responsive design is about keeping users on the same page and having the page change depending on the browser width. However, if you are wanting to detect if a customer is on a mobile device and redirect them somewhere else, I would suggest to use ShopSite Mobile CGI feature. This will add javascript to your website to detect if a visitor is on a mobile device. If they are, the visitor will be redirected to a dynamically generated CGI page. This makes it so that you don't have 2 sets of static pages (bad for SEO) and don't have to keep 2 sets of pages updated, but you still have the benefit of having a page specific for mobile devices.
http://shopsite.com/mobile-commerce-support.html

[koryb1]

Hi Lauren. Happy New Year.

I've made it a resolution this year to finally offer a mobile version of our site (www.dancesupplies.com). While I think I understand the differences between a responsive design and the Mobile CGI feature, before I make the plunge I'd like to be certain which is approach is best for me.

I see that responsive design is more robust and preferable in many ways. However, my site has thousands of fixed size images and I'm worried that this makes responsive design really tough in terms of re-creating them all with varying sizes. I also started with a ShopSite theme and over the years I've made a good number of edits. While I know enough to have figured these out on my own and with some help (from you for example ) , by no means am I an expert and to be honest if I went the responsive route I'd probably need a lot of outside help.

As it pertains to the Mobile CGI feature, I'm actually happy with how my site looks on tablets. Is it possible to have the CGI pages appear only for cell phone users and not tablet users?

Do you have a general opinion of which approach may be better for someone like me? Are there other help pages or resources I can look at to better understand the different approaches and how to implement the one I choose?

Thanks in advance!

[ShopSite Lauren]

I'm going to ramble for a minute ..

It sounds like you have a pretty good understanding. I wrote a blog post (from 2013, but the differences are still the same) that talks about the differences between Responsive Design and ShopSite's Mobile CGI.
http://laurenhillsdesign.blogspot.com/2013/02/responsive-design-vs-mobile-cgis.html

Mainly, the Mobile CGI is a great solution to quickly turn your website into a mobile friendly website. However, long term, Responsive Design is typically the way to go. You could use the mobile CGI, and start working on creating (or choosing) a responsive design template, and release that template when you are ready. The reason Responsive Design is typically better in the long run is exactly what you mentioned "over the years I've made a good number of edits". With Responsive Design, making those edits will apply to all versions of your website, desktop, tablet and mobile. With the Mobile CGI, you have 2 sets of templates, so if you make custom settings or use custom fields in your template, you will need to make those edits in both sets of templates.

ShopSite does have some Responsive Design templates that are built into the software, and many more that are being added in the about-to-be-released version. Of the soon-to-be-released templates, there is one called "Trace Colored" that has a very similar layout to what you have now, so it would be a pretty good option to switch to if you wanted to switch your website to use a built in theme that is already Responsive. It would take quite a bit of work to turn your existing template into a responsive template because responsive templates typically have at least 3 layouts built into 1, so at least 2 more layouts would need to be built into/added into your templates.

With the "fixed size images", does this mean that they are actually a different, larger size, and you use code to make the image smaller ( see you do this with the color swatches in your product descriptions, but those swatches are all the same size and small, so there would be an easy work around for those)? If this is the case, then is the image on its own line or is it left or right aligned with text wrapping around? If your images are mostly all on their own lines (like how your products are laid out, where you have the product image on its own line, then the product name description and price are displayed below), then you can do responsive design. It looks like the images have a more complex layout on your home page (as most sites do), so those images and their layout would likely need to be setup for responsive design specific for that home page (and any other pages that have an image layout similar to your home page).

[koryb1]

Thank you Lauren for the helpful reply.

We do get a large number of mobile users (Google Analytics over the last 6 months shows 52% desktop, 33% mobile, and 15% tablet). I don't now how that compares to industry averages but 1 out of every 3 visitors seems pretty high. So, I think it's become a top priority for us to offer a "real" mobile site.

I think responsive design is the correct route, but it's just so daunting. There is no way I have the know-how to turn our current templates into responsive ones. I suspected the upcoming ShopSite updates would offer new responsive templates, so I think I'll wait until those are released. Question - is there a good way to work with these without publishing them in place of our current site? Would I be changing my whole theme, or just be able to create some test pages with non-obvious page names that aren't linked to in my site? I obviously don't want my store to change at all until the new templates are fully tested privately.

As far as images, aside from my home page that uses tables with fixed image sizes, on all of my product category pages I have images at the top (710 x 200 each). They're on their own line without wrapped text; I just don't understand responsive design enough to know why that matters. I also have some other pages with brand logos (such as http://www.dancesupplies.com/sizing-charts.html); again I don't understand how a page like this might be transformed via responsive design into a mobile version.

In your blog post you mention that responsive design may be better for smaller sites, as with responsive design all pages including more information pages should be double-checked. My site has about 800 pages.

Thanks again,

Kory

[koryb1]

As follow-up, I spoke with my ShopSite host (Lexiconn - I highly recommend!), and my question about testing was answered. They're setting up a demo ShopSite account for me which I'll use to get my "future" site working until it's ready to be transferred over to my live account. I'm actually going to go ahead and do this now, experimenting with the currently available responsive themes. I suspect the included themes in the upcoming release will be better and I won't get married to the current ones, but even working with the current ones I think will help me better understand how it all works.

Kory

[ShopSite Lauren]

Kory, in responsive design, there is most commonly some CSS that sets images to a max-width of 100%. This means that your banner images that are around 700 pixels wide. When the page and space provided gets more narrow, those images will be 'squished' into the space provided. If you don't include regular pixel dimensions, then as the image is squished, the height will be squished too so the image will stay proportionate.

img {max-width: 100%;}

For the "better for smaller sites" I guess I should probably amend that to include or database driven sites. I have seen many websites where nearly every page has a custom table hard coded into the text fields. In those cases, the pages all need to be manually changed to NOT include tables because tables don't work well in responsive design (tables naturally can stretch, but they can't be squished, so as the page shrinks, the tables will not shrink). For sites (large or small) that have a lot of hard coding, you will want to check every page. For pages that don't have much hard coding and are database driven for layout, then you would really only need to make sure a couple pages work and the rest should be fine.

[koryb1]

Thanks Lauren. I have been experimenting with the responsive themes today using my new demo store, and you've really nailed the two big issues I am seeing:

1. Image re-sizing. I can see the negative results of fixed image dimensions. For example, on all my category pages I have a banner-type graphic.

As an example see http://www.dancesupplies.com/shirts-tops.html.

I accomplish this by entering the following in that page's Text 1 field: <div align="center"><img src="http://www.dancesupplies.com/media/headers/Dance-Shirts-And-Tops.jpg" width="710" height="200" alt="Dance Shirts and Dance Tops from Capezio, Eurotard" /></div>

Using a demo responsive design template, on my iPhone that image has become stretched vertically and distorted so it can fit width-wise on my screen. How would I prevent this from happening?

2. Tables - the big Uh Oh. As you refer to, my site has tables on 95% of my More Info pages. This is where I include the product description, sizing info, available colors, etc. As an example see http://www.dancesupplies.com/Body-Wrappers-507-Lyrical-Tank-Pullover.html.

I also use a big table on my home page, and a big one too that makes up my entire footer. I've always been afraid that the table approach wasn't the best one and it would come back to bite me, but I didn't know a better way. What would be the alternative approach to this?

Thanks again,

Kory

[ShopSite Lauren]

1. remove the dimensions, that way the CSS can resize the image:
<div align="center"><img src="http://www.dancesupplies.com/media/headers/Dance-Shirts-And-Tops.jpg" alt="Dance Shirts and Dance Tops from Capezio, Eurotard" /></div>

2. I would suggest to start modifying product information and dividing that information into extra product fields. Then in your custom template you can call those product fields to be used in a similar but more flexible format. For example, go to Preferences > Extra Fields, and name the first 2 product fields the following:
extra product field 1 - Available Sizes
extra product field 2 - Available Colors

Then for that product, in the more information text field you would leave ONLY:

Code: Select all

Reversible contrast double layer chiffon drapey tank pullover. Use one primary color for one performance and then reverse to the second primary color the next! Presents as a classy, soft, and elegant piece that looks lovely on stage. Made of 100% Nylon Chiffon.

In the extra product field 1 you would have:

Code: Select all

<p>Available in Child sizes 6X-14 and Adult sizes X-Small to 3X. Please note price variances for Child and Plus sizes. See "Size" dropdown menu above for details.</p>

<div align="left"><a href="http://www.dancesupplies.com/sizing/Body-Wrappers-Bodywear-Sizing-Chart.pdf" target="Sizing"><img src="http://www.dancesupplies.com/media/Tape_Measure.gif" height="25" width="55"></a><a href="http://www.dancesupplies.com/sizing/Body-Wrappers-Bodywear-Sizing-Chart.pdf" target="_new">Click to view Body Wrappers Sizing Chart</a></div>

In the extra product field 2 you would want to move the code and change it from a table format to a div/span format. I would propose the following:

Code: Select all

<div>
  <span><img src="http://www.dancesupplies.com/media/colors/black.gif" alt="" height="25" width="25">
  <img src="http://www.dancesupplies.com/media/colors/white.gif" alt="" height="25" width="25"></span>
  <span>Black/White</span>
</div>
<div>
  <span><img src="http://www.dancesupplies.com/media/colors/lilac.gif" alt="" height="25" width="25"><img src="http://www.dancesupplies.com/media/colors/lt_mint.gif" alt="" height="25" width="25"></span>
  <span>Lilac/Mint</span>
</div>
<div>
  <span><img src="http://www.dancesupplies.com/media/colors/purple.gif" alt="" height="25" width="25"><img src="http://www.dancesupplies.com/media/colors/lilac.gif" alt="" height="25" width="25"></span>
  <span>Purple/Lilac</span>
</div>
<div>
  <span><img src="http://www.dancesupplies.com/media/colors/rasberry.gif" alt="" height="25" width="25"><img src="http://www.dancesupplies.com/media/colors/balletpink.gif" alt="" height="25" width="25"></span>
  <span>Rasberry/Light Pink</span>
</div>
<div>
  <span><img src="http://www.dancesupplies.com/media/colors/scarlet.gif" alt="" height="25" width="25"><img src="http://www.dancesupplies.com/media/colors/white.gif" alt="" height="25" width="25"></span>
  <span>Scarlet/White</span>
</div>

Then, in your template, you could replace [-- PRODUCT.MoreInformationText --] with the following code that uses the product more information text field and the 2 new extra product fields:

Code: Select all

<div class="half">[-- PRODUCT.MoreInformationText --]</div>
<div class="half">
[-- IF PRODUCT.Field1 --]
  <div class="pad sizedesc">
    <span class="title">[-- STORE.ProductField1 --]</span>
    [-- PRODUCT.Field1 --]
  </div>
[-- END_IF --]
[-- IF PRODUCT.Field2 --]
  <div class="pad colordesc">
    <span class="title">[-- STORE.ProductField2 --]</span>
    [-- PRODUCT.Field2 --]
  </div>
[-- END_IF --]
</div>
<div class="clear"></div>

Last, now that you don't have tables, you need to make sure that you have CSS to format your divs/spans the way you want. Below is some CSS that I would use. Note, some of the CSS classes that I am using, such as class="clear", class="half" and class="title" are in most responsive design sites/css already, so you normally wouldn't need to add those to your CSS.

Code: Select all

.clear {clear: both;}
.half {width: 50%; text-align: left; padding: 0px; margin: 0px; float: left; clear: none;}
.pad {padding: 0px 10px 20px 10px; margin: 0px;}
.title {display: block; clear: both; background: #991A36; color: #FFFFFF; padding: 3px 0px; text-align: center;}
div.colordesc div span {display: inline-block; vertical-align: middle; height: 100%; text-align: left; padding: 2px 4px;}
div.colordesc div span:before {content: ''; display: inline-block; vertical-align: middle; height: 100%;}

[koryb1]

Wow Lauren thank you so much. This is a huge help and it gives me a lot to work on. As I said it seems daunting but I've already learned a lot today and am starting to feel that there is hope.

Thanks again!