Evans Custom Amplifiers

[nyandres]

http://evansamps.com

Why its cool! The entire website content is dynamic, and comes from the products catalog mainly.

When the window is too small to fit the large image for the products, hovering over the image brings the image into view.

The cable that hangs on the rightside, will take the user through the individual sections of a page. Best seen on "/products" page or the media page.

Anyways, would love to hear your feedback

Here is an article regarding the last time I did the redesign. The new redesign takes lots of ideas from one of the concepts that were to be used on previous redesign. http://andresgallo.com/2011/02/09/evans ... -redesign/

These are some of the modules used together to bring various interactions, along with various UI Hooks for ajaxifying the way it works


FileManager
FrontEndUsers
Products
Cart
Orders
PaypalGateway
youtubeplayer
Forum
SelfRegistration
CGFeedback
CGFeedMaker
CGSmartImage (This plugin helped make my live way easier)
FormBuilder
SEOTools2
CGBlog

[polodesign]

Brilliant site Andres! Cool design...I love the dropdown products menu and all the little details like the image hover effect on smaller screens and the slide-in video. One thing - it looks like there are a couple of test items in the forum.

Great work and an excellent example of what can be done with CMSMS!

Cheers,
Penny

[nyandres]

Thanks

I have also removed the sample forum postings by the way, thanks for the heads up.

Phase II will be making it responsive I suppose.

[polodesign]

You're welcome. Glad to help.

Personally I prefer starting from a responsive approach rather than trying to retrofit a non-responsive site. You might look into Foundation by Zurb (http://foundation.zurb.com/). I've been using it for the past year and it helps take some of the pain out of building responsive sites. I haven't tried Bootstrap but I hear it's good as well.

I use a handy little bookmarklet from this site for testing responsive designs. http://www.benjaminkeen.com/open-source ... okmarklet/

Cheers,
Penny

[nyandres]

Awesome tools thx.

As for the responsive mobile first approach I agree indeed. Just in case I kept most of the pieces in their own modules so it will be easy to make responsive. Except for the menu NOOOOoooo hehe

[polodesign]

I found this cool technique from Chris Coyier to switch a menu to a dropdown based on an @media query.

http://css-tricks.com/convert-menu-to-dropdown/

I also use Goran's suggestion for mobile device detection UDT here http://www.i-do-this.com/blog/14/Make-y ... bile-ready to show or hide items in your page template. It doesn't seem to work from within a module template but you can use it to call various module templates with different layouts.

[nyandres]

By the way, do you know if the cart/paypal gateway combination, has some kind of way to allow me to bypass the checkout page. I'd like users to go directly to paypal instead of to checkout. In otherwords everytime they add to cart they'd be redirected to the cart page, and from there directly to paypal.

This would be awesome.

[elkman]

Interesting site. I really like the layout. In Firefox the Follow Us dropdown moves to the left to far to reach when using the Responsive Design View. Is this normal or does this happen on a mobile phone too?

I have been having a hard time wrapping my mind around converting a standard CMSMS menu to a responsive menu using the <Select> option vs Bootstrap.. Your CSS tricks link appears to be a great way to go. Would you be able to share the basic components and code you used to convert whichever CMSMS menu used to become responsive?

I have spent many hours trying to figure this out and just lack the skills to understand how it is done. Since I am a visual learner, I am hoping to see the basics of how you converted a CMSMS menu to use the CSS-Tricks <Select> conversion technique.

Thanks for any help you have time to offer!
Elkman

[nyandres]

It is done on purpose. However, the website was never fully responsive optimized.

The best way to do it, is through having nested lists, With the top level Li tags being the icons.

Anyways, the concept is through css and media queries you can show the sub lists "ontouchstart", or show all on them on larger screens. It can be more complex of course, but for a simple nav, that should get you there.

[elkman]

Thanks for such a quick reply. What I can't figure out is how to dynamically create the CSS-Tricks Select menu for use with CMSMS menus. I don't know how to create the appropriate CMSMS menu code.

[Dr.CSS]

Look in the source for...

<__script__ type="text/javascript" src="uploads/jq/superfish.js"></__script>
<__script__ type="text/javascript" src="/uploads/jq/selectmenu.js"></__script>

Then read the selectmenu.js code, this uses the default cssmenu template with slight changes...

http://www.staceyjaswad.com/

[elkman]

Thank you Dr!