• Toll-free  888-665-8637
  • International  +1 717-220-0012
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error
Pros and Cons to a Tabbed Layout
Options Go to last post Go to first unread
Previous Topic Next Topic
sternyy
#1 Posted : Thursday, February 14, 2008 6:15:18 PM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
I was fooling around with a few expanding text scripts. I was looking at the site design Noah did above in the other forum section and liked the idea of the tabbed layout. So I was thinking on how I could implement it on my site. This is what I came up with after a few minutes fooling around:
http://www.medsupplier.com/Products/Ritter-204-Manual-Examination-Table__4443-204.aspx



I used to have the Ordering Info like this:

http://www.medsupplier.com/Products/Midmark-604-Manual-Examination-Table__4443-604.aspx



I thought, why not put all the specials, ordering info, color charts and shipping info all in a tabbed format. You can imagine how far down you would have to scroll just to get to the product information if i have the specials and shipping information up top ;)



Pros, Cons?



Bryan
MitchA
#2 Posted : Thursday, February 14, 2008 6:39:47 PM(UTC)
MitchA

Rank: Member

Joined: 3/3/2006(UTC)
Posts: 1,737
If you get this working reliably, I'll hire you to make a template for me. I've got to do something else:

http://www.missionfurnis...ne-Cabinet__MAS751S.aspx
Optimists invent airplanes,
Pessimists buy parachutes.
HPros
#3 Posted : Thursday, February 14, 2008 7:04:29 PM(UTC)
HPros

Rank: Member

Joined: 1/30/2008(UTC)
Posts: 215
What are the pro/cons in terms of indexing in the search engines?


Mitch, a drop down list with images would be perfect for you. There are commercial products available that do this, if you can figure out how to integrate it, I think it would work great for you.
MitchA
#4 Posted : Thursday, February 14, 2008 7:50:35 PM(UTC)
MitchA

Rank: Member

Joined: 3/3/2006(UTC)
Posts: 1,737
I'm having enough fun for now, thanks. My next big re-design will come after a reach for the wallet.
Optimists invent airplanes,
Pessimists buy parachutes.
Dan @ Wolfe
#5 Posted : Thursday, February 14, 2008 10:17:32 PM(UTC)
Dan @ Wolfe

Rank: Member

Joined: 8/8/2007(UTC)
Posts: 298
I like the application. I think the look is much cleaner.

I would be interested in doing something like that, but that is beyond my ability right now.
Dan
sternyy
#6 Posted : Friday, February 15, 2008 12:05:55 PM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
It is so simple to do and its all in divs... (looking at SEO, its all layed out in DIV and LI)

This is basically the layout, and then the javascript does what the end user sees:

<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"> Tab 1 Content </div>
<div class="TabbedPanelsContent"> Tab 2 Content </div>
<div class="TabbedPanelsContent"> Tab 3Content </div>
<div class="TabbedPanelsContent"> Tab 4 Content</div>
</div>
</div>

I found it here:
http://labs.adobe.com/technologies/spry/articles/tabbed_panel/


Id really like to see what some "coders" say about the javascript it uses, if its bad or good. I have no clue. I was searching for a script that would expand my text down, and ran across this yesterday. I was then looking at other BV sites and came across what Resposio did and saw the tabbed content. Thought it might work... :)
Cliff
#7 Posted : Friday, February 15, 2008 9:50:38 PM(UTC)
Cliff

Rank: Member

Joined: 5/24/2004(UTC)
Posts: 4,147
I set up tabs using a mix of controls and content columns on http://www.plumeriabay.com/Prod...-Down-Comforters-lq.aspx. It's been well over a year, and I haven't looked into newer tab script options too much since then, but it's using http://digitarald.de/playground/tabs.html (with the MooTools library). I'll probably look into the options again once SP4 comes around and the theme is revisited.

I like this tabbing method than others I've seen because you don't start with nesting a bunch of DIVs and have a list of tab links going nowhere, which doesn't give the search engines and non-javascriptin' visitors as much as you could. The script actually takes a structural layout and turns the headings into the tabs (view with javascript disabled for an example). In my case, H3s are turned to tabs and the tabbed structure is built by the script. I think this method works better all around.

I have reservations about Spry, but I really haven't looked at it since beta and can't say for sure whether it's ideal to use.
sternyy
#8 Posted : Saturday, February 16, 2008 10:40:57 AM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
Cliff,

Thanks for the input. I had no clue where to even look for this and came upon it looking for a (and yours) expander text javascript. I have only used the spry on one product just to test it out. Im going to take a look at the above link. Ive wanted to do this for some time now but never got around to it. We are a tthe point on our site where there is so much information to be displayed before the customer clicks add to cart that i didnt know how to display it.

Thanks!
sternyy
#9 Posted : Saturday, February 16, 2008 10:45:46 AM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
took a look at it, i think im going to use the digitarald.de/playground/tabs.html one... your are exactly right. More user friendly for non-java and search engines...
sternyy
#10 Posted : Sunday, February 17, 2008 11:46:08 PM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
i cant get the digitarald.de/playground/tabs.html tabs to work at all... anything i need to know about installing them?
sternyy
#11 Posted : Monday, February 18, 2008 12:27:36 AM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
nevermind... didnt know you had to get a build of MooTools... everything works now ;)
sternyy
#12 Posted : Monday, February 18, 2008 11:24:10 AM(UTC)
sternyy

Rank: Member

Joined: 1/10/2005(UTC)
Posts: 714

Thanks: 14 times
Was thanked: 1 time(s) in 1 post(s)
I took it a step further:


Instead of putting the whole tabbed layout in one product property, I edited the ProductTypeDisplay.ascx.vb to allow each product type be a tab now. So now every tab is its own product type. The product type name is the tab name, and the product type vaule is the content of the tab.



What does this allow? Instead of putting all your tab code in one product type, its all seperated now. A lot easier to edit and have different products with different default tabs.



I wish I tried this earlier ;)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF | YAF © 2003-2024, Yet Another Forum.NET
©2024 Develisys. All rights reserved.
  • Toll-free  888-665-8637
  • International  +1 717-220-0012