Stirling Grand Responsive Template

Hello :-) This is a brand new responsive template package released free to the zen cart community. I have built this using the Responsive DIY Template Default for v1.5.x by rbarbour. I cannot thank you enough for putting together the Responsive DIY Template Default package :smile: This template ha a very minimal design with a clean layout. The main page is a single column layout with 2 columns for the inner pages.



See the live demo here:

Stirling Grand Free Responsive Zen Cart Template Demo

Template Features:

• Super flexible design perfect for all types of ecommerce stores--the possibilites are endless!

• Responsive 2 column display--single column home page layout

• Optimized Drop Navigation for hand held devices

• Matching icons included

• CSS Buttons for easier multi language implementation

• Responsive Home Page slideshow included

• Add your slide show images, set their links, enable/disable images/links, and set open in new window easily using the admin banner manager.

• Home page carousel for Featured Products

• Add This social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, Pinterest Pin it button, and 300+ Sharing Services)

• Custom footer featuring a footer menu with customer service, and useful links (ez pages), integrated, and links to your Facebook, Twitter, Youtube, Pinterest, Google Plus, and blog.

• Customized product info page layout with expandable content areas for handheld devices

• Cross Browser tested using Firefox, IE10, IE9, IE8, Google Chrome, Opera, and Safari.

• Tested on the iPhone 5 with Mobile Safari 6.0; iPad 4 with Mobile Safari 6.0; Windows Phone 8 with IE10 Mobile; Blackberry Bold 9900 with Blackberry Browser 9900; and Android Nexus 4 with Chrome Mobile 18, Dolphin Mobile 9.3, Firefox Mobile 19, Marathon Mobile 4, Opera Mobile 12, Sleipnir Mobile 2.9

• W3C Valid XHTML and CSS

• Custom header including shopping cart totals (item count and dollar amount), checkout link, search, and welcome message

• Comes with the following modules installed: Column Layout Grid, About Us Page, Back to Top, Responsive Slides JS, Carousel Featured Products

• Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.

• Fully compatible with versions 1.3.8x, 1.3.9s, 1.5x. Would probably work with lower versions although it has not been tested.

Please post feedback here and if you find any bugs!

Be sure to read the readme.html file before installation because it is different than the non responsive templates.

Oh Anne how am I ever going to decide which of your awesome templates to settle for? :hug:

picandnix:

Oh Anne how am I ever going to decide which of your awesome templates to settle for? :hug:

I am happy that you have a choice ;) Let me know if you find any bugs!

Thanks,

Anne

picandnix:

Oh Anne how am I ever going to decide which of your awesome templates to settle for? :hug:

Yes, you are becoming like me!

SPH:

Yes, you are becoming like me!

Lol, I almost cited you but didn't want you to feel bullied :wink:

picaflor-azul:

I am happy that you have a choice ;) Let me know if you find any bugs!

Thanks,

Anne

Hi Anne
it's trivial but I thought you'd wanna know anyway... slight overlap in shopping cart when viewed on phone

picandnix:

Hi Anne
it's trivial but I thought you'd wanna know anyway... slight overlap in shopping cart when viewed on phone

Thanks for posting ;) Which phone are you using?

Thanks,

Anne

picaflor-azul:

Thanks for posting ;) Which phone are you using?

Thanks,

Anne

Samsung Galaxy S4

Can I throw in an 'observation' please... it applies to Carlisle Fresh too. The magnifying glass/search icon isn't 'clickable' unlike on your other templates.
Petty I know but you can bet your bottom dollar it'll make some customers scratch their head right? :wink:

picandnix:

Can I throw in an 'observation' please... it applies to Carlisle Fresh too. The magnifying glass/search icon isn't 'clickable' unlike on your other templates.
Petty I know but you can bet your bottom dollar it'll make some customers scratch their head right? :wink:

No, I appreciate any input :) The look is much cleaner without the button and I am assuming that most users will not be confused by just hitting enter after they type their search terms, but I do see your point. If you want the button back, you can add it to the includes/templates/stirling_grand/sideboxes/tpl_search_header.php file. Just grab the code from the template_default file ;)

Thanks,

Anne

I know you have worked hard to put these responsive template together and it is difficult to anticipate every possible scenereo. Nice look Anne from desktop computers. I finally got tired of futzing around with Resp Shefield Blue and Resp AB and thought to try this one, which seemed fitting since most of our sales are Sterling.

Stirling installed without a hitch, I have yet to obtain a good functional install of the other 2.

There seems to be an issue with the Header buttons on my touch devices. Everything works as expected (so far) on desktop with a mouse. The Shop button functions as expected only every other time on my Window8 Pro tablet/FireFox 23.0.1. Just updated to FireFox 24.0 and functionality is different and worse (about the same as on my SurfaceRT). Sometimes the flyout disappears before I can get my finger to the next button. On the WindowsRT tablet, the header menu may as well not exist because there is no functionality at all.

Android ver 98.15.66, Motorola RazR-M . Display is about 4 screens wide in the portrait position instead of the width of the mobile device.

I am having trouble finding a "HOME" button on secondary pages other than the breadcrumbs and my fingers are too big to use that. No problems finding the Home button on the Home page.

To rule out the possibility of install issues, the above observations were made using your demo site instead of my install, though it was nearly identical.

Minor issues are alignment which does not affect functionality.

I could use any pointers that you may have.... OOPS.... internet connection seems to be dying......

For anyone interested, I have a live install of Stirling Grand at www. tkdrevision .com
I too installed several of Anne's awesome responsive templates, I think I've settled for this one though...

Rixstix I don't have any of the hardware examples you are using to test out so I'd be interested to know how my site measures up for you please.

RixStix:

I know you have worked hard to put these responsive template together and it is difficult to anticipate every possible scenereo. Nice look Anne from desktop computers. I finally got tired of futzing around with Resp Shefield Blue and Resp AB and thought to try this one, which seemed fitting since most of our sales are Sterling.

Stirling installed without a hitch, I have yet to obtain a good functional install of the other 2.

There seems to be an issue with the Header buttons on my touch devices. Everything works as expected (so far) on desktop with a mouse. The Shop button functions as expected only every other time on my Window8 Pro tablet/FireFox 23.0.1. Just updated to FireFox 24.0 and functionality is different and worse (about the same as on my SurfaceRT). Sometimes the flyout disappears before I can get my finger to the next button. On the WindowsRT tablet, the header menu may as well not exist because there is no functionality at all.

Android ver 98.15.66, Motorola RazR-M . Display is about 4 screens wide in the portrait position instead of the width of the mobile device.

I am having trouble finding a "HOME" button on secondary pages other than the breadcrumbs and my fingers are too big to use that. No problems finding the Home button on the Home page.

To rule out the possibility of install issues, the above observations were made using your demo site instead of my install, though it was nearly identical.

Minor issues are alignment which does not affect functionality.

I could use any pointers that you may have.... OOPS.... internet connection seems to be dying......

What screen resolution is your windows tablet? If it is greater than 1024 pixels wide then you will see the full size version which uses the css mega menu. The css mega menu is not touch friendly. You would have to either change the menu or convert the mega menu to be touch friendly.

I have tested on the following: iPhone 5 with Mobile Safari 6.0; iPad 4 with Mobile Safari 6.0; Windows Phone 8 with IE10 Mobile; Blackberry Bold 9900 with Blackberry Browser 9900; and Android Nexus 4 with Chrome Mobile 18, Dolphin Mobile 9.3, Firefox Mobile 19, Marathon Mobile 4, Opera Mobile 12, Sleipnir Mobile 2.9. If you are viewing on a different device then it has not been tested. This is a free template and while I will do my best to always improve it, I would be surprised if it were perfect on every mobile device ever created ;)


Thanks,

Anne

Please, don't get me wrong, I love your templates and know that you spend a lot of time working through them. I know that it is impossible to test every possible combination of hardware/software. It is even more difficult when users start futzing around on their own and then asking how to fix their mistakes.

I'm sorry that I was confused because I was thinking the responsive templates were mobile device friendly/touch device friendly and didn't know that the menu bar was not intended to be touch friendly.

Both Windows 8 Pro tablet and Windows RT tablets are 1368 x 768 or 768 x 1368 resolution.
RazR-M resolution is 540 x 960

picandnix
Your site is setup a bit differently since it has sidebars on each side of the homepage. Screenprints of Windows 8 Pro tablet attached of HomePage both portrait and landscape. Login page portrait. I forgot to powerdown the RT and it's dead this morning.

Your install has a button to get back to the homepage where the demo does not.

picandnix...

because you asked, below is a picture of your homepage on a Win 8 pro tablet(HP) and a SurfaceRT tablet (MSFT).
Screen resolution is the same on both.

Top Menu buttons seem to be functional on the PRO tablet using FF24
Top Menu buttons NOT functional on the PRO tablet using IE10
Top Menu buttons NOT functional on RT tablet using IE10


Windows 8 RT (MSFT Surface)
IE 10
768 x 1366 px
No Sideboxes HomePage


Windows 8 Pro (HP-EnvyX2)
FF 24
768 x 1366 px
Left/Right Sideboxes on HomePage

RixStix:

picandnix...

because you asked, below is a picture of your homepage on a Win 8 pro tablet(HP) and a SurfaceRT tablet (MSFT).
Screen resolution is the same on both.

Top Menu buttons seem to be functional on the PRO tablet using FF24
Top Menu buttons NOT functional on the PRO tablet using IE10
Top Menu buttons NOT functional on RT tablet using IE10


Windows 8 RT (MSFT Surface)
IE 10
768 x 1366 px
No Sideboxes HomePage


Windows 8 Pro (HP-EnvyX2)
FF 24
768 x 1366 px
Left/Right Sideboxes on HomePage

Very much appreciated. It'll possibly support any future developments for Picaflor templates.

RixStix:

picandnix...

because you asked, below is a picture of your homepage on a Win 8 pro tablet(HP) and a SurfaceRT tablet (MSFT).
Screen resolution is the same on both.

Top Menu buttons seem to be functional on the PRO tablet using FF24
Top Menu buttons NOT functional on the PRO tablet using IE10
Top Menu buttons NOT functional on RT tablet using IE10


Windows 8 RT (MSFT Surface)
IE 10
768 x 1366 px
No Sideboxes HomePage


Windows 8 Pro (HP-EnvyX2)
FF 24
768 x 1366 px
Left/Right Sideboxes on HomePage

That is really strange! It is showing the full size layout with the mobile menu. This should not be happening. The menu has jquery that switches it over from the drop down menu to the mobile menu at certain screen resolutions.

Thanks,

Anne

RixStix:

There seems to be an issue with the Header buttons on my touch devices. Everything works as expected (so far) on desktop with a mouse. The Shop button functions as expected only every other time on my Window8 Pro tablet/FireFox 23.0.1. Just updated to FireFox 24.0 and functionality is different and worse (about the same as on my SurfaceRT). Sometimes the flyout disappears before I can get my finger to the next button. On the WindowsRT tablet, the header menu may as well not exist because there is no functionality at all.

Android ver 98.15.66, Motorola RazR-M . Display is about 4 screens wide in the portrait position instead of the width of the mobile device.

I am having trouble finding a "HOME" button on secondary pages other than the breadcrumbs and my fingers are too big to use that. No problems finding the Home button on the Home page.

To rule out the possibility of install issues, the above observations were made using your demo site instead of my install, though it was nearly identical.

Minor issues are alignment which does not affect functionality.

I could use any pointers that you may have.... OOPS.... internet connection seems to be dying......

I have the same issue with the mega menu on my phones and tablets. The biggest issue is that there is no such thing as an "onhover" or "onmouseover" event for touchscreen devices.. To remedy this, when I use this template (hoping to do so soon), I'm thinking that I'm gonna swap the included mega menu out with a responsive megamenu which supports "onclick". This will work well for both desktops and larger touchscreen devices..

DivaVocals:

I have the same issue with the mega menu on my phones and tablets. The biggest issue is that there is no such thing as an "onhover" or "onmouseover" event for touchscreen devices.. To remedy this, when I use this template (hoping to do so soon), I'm thinking that I'm gonna swap the included mega menu out with a responsive megamenu which supports "onclick". This will work well for both desktops and larger touchscreen devices..

Which responsive mega menu will you be using?

There is already a responsive drop down menu included in the template package. You could just remove the call for the css mega menu in tpl_header.php and then remove the display:none; for the mobile menu in the stylesheet.css file. You may have to do some styling at the larger screen size.

Thanks,

Anne

Boy this whole responsive thing is a LOT of work.. :laugh: Lots of stuff to take into consideration.. I'm having to re-examine ALL the appearance mods I normally use.. Especially all the mods which have actions (like on hover) which are not supported by mobile devices..

picaflor-azul:

Which responsive mega menu will you be using?

I'm still researching and narrowing down the menu I will use.. I will totally share with you when I find something suitable..:smile:

picaflor-azul:

There is already a responsive drop down menu included in the template package. You could just remove the call for the css mega menu in tpl_header.php and then remove the display:none; for the mobile menu in the stylesheet.css file. You may have to do some styling at the larger screen size.

The issue with that Anne is the larger touchscreen devices which may have the SAME screen resolution as a desktop computer (like my Netbook or Surface device, and even my Android tablet).. I don't necessarily want to replace the mega menu with the responsive drop menu for all devices.. I rather like the mega menu.:smile: I think the solution for me will be a mega menu presented on larger mobile/touchscreen devices which supports onClick versus onHover actions.

Basically I'm looking for a responsive mega menu similar to the one you are currently using, but I need one that does more than simply use media queries to detect screen resolution.. I would prefer that the menu also detect whether or not the viewing device is a mobile/touchcreen device and present an alternate version of the mega menu which supports onClick actions. That kind of functionality requires some javascript or jQuery magic to make it work.

Ideally this would mean that if the device detected is a mobile/touchscreen device, and IF this device is one of the larger mobile/touchscreen devices (meaning that it will not hit one of the media queries which presents the responsive drop menu), THEN present a mega menu which the action for the menu will be an onClick action versus onHover.