Convert com.balsamiq.mockups::LinkBar as a ul with each item wrapped by li and a tags

  • Idea
  • Updated 6 years ago
Hi,

Usually a navigation group, whether horizontal or vertical (it's just CSS after all) is marked up using an unordered list (except an A to Z or pagination control which should use an ol). Is it possible to output com.balsamiq.mockups::LinkBar as a ul with each item wrapped by li and a tags?

Regards, Karl
Photo of Karl Dawson

Karl Dawson

  • 7 Posts
  • 0 Reply Likes
  • confident

Posted 6 years ago

  • 4
Photo of Enrico Berti

Enrico Berti, One man band

  • 262 Posts
  • 13 Reply Likes
Hi Karl,
thanks for the idea!
It actually makes sense :)

Let me post this thread on twitter and let's see what the others think about it.

cheers,
enrico
Photo of codecraigC

codecraig

  • 2 Posts
  • 0 Reply Likes
i replied on twitter, but I think this makes sense.
Photo of Enrico Berti

Enrico Berti, One man band

  • 262 Posts
  • 13 Reply Likes
How does this look? Do you like it?

This is what it generates

HTML



CSS

#nap12{
left:60px;
top:412px;
z-index:11;
margin:0;
padding:0;
font-size: 13px;
font-style:normal;
font-weight:normal;
text-decoration:none;
color:#000000;
border:1px solid #FFC;
}
#nap12 li
{
display: inline;
list-style-type: none;
padding-right: 12px;
padding-left: 12px;
padding-top: 3px;
padding-bottom: 3px;
border:1px solid #000;
}
Photo of Cristian Pascu

Cristian Pascu

  • 2 Posts
  • 1 Reply Like
I think you need negative margin for all buttons except first, or something like this, to avoid the double border on inner buttons. Looks good otherwise..

Although this looks more like a buttons bar and not a linkbar. Is the title of this issue misleading? :-)
Photo of Enrico Berti

Enrico Berti, One man band

  • 262 Posts
  • 13 Reply Likes
Yes, I was thinking about linkbar but I modified the buttonbar in the meanwhile, post to follow!
Photo of Enrico Berti

Enrico Berti, One man band

  • 262 Posts
  • 13 Reply Likes
This is the screenshot

Photo of Karl Dawson

Karl Dawson

  • 7 Posts
  • 0 Reply Likes
Hi,

Yep, that's great, would be cool if pre and code worked with HTML though lol. Something for getsatisfaction to work on ;-)

As to the CSS, ID and classes I'm not too fussed as I would want to use my own depending on the context.

I might add "class="nav" to the ul tag as a nod towards the HTML 5 nav element but would definitely add role="navigation" to support WAI-ARIA landmark roles (http://is.gd/2y01R).

Thanks Enrico!

Regards, Karl
Photo of Enrico Berti

Enrico Berti, One man band

  • 262 Posts
  • 13 Reply Likes
Hi Karl,
getSatisfaction renders our html snippets... can you send it to me via email? enrico@napkee.com

Thanks!
Photo of Pascal GeronimiPG

Pascal Geronimi

  • 1 Post
  • 0 Reply Likes
perfect. Thanks a lot!!
Photo of codecraigC

codecraig

  • 2 Posts
  • 0 Reply Likes
looks good
Photo of Enrico Berti

Enrico Berti, One man band

  • 262 Posts
  • 13 Reply Likes
Are you guys happy with this? :)



At the end I changed both the ButtonBar and the LinkBar.

You can try it out: http://www.napkee.com/next
Photo of Karl Dawson

Karl Dawson

  • 7 Posts
  • 0 Reply Likes
The CSS didn't come through for ButtonBar but the markup is fine for both examples. Are you happy that they are the same though? ButtonBar was originally outputting form buttons.

The CSS didn't come through for ButtonBar but the markup is fine for both examples. Are you happy that they are the same though? ButtonBar was originally outputting form buttons.

It's interesting because Balsamiq has a single button element (which should be treated as an input control) yet the "ButtonBar / TabBar" element suggests it should be the same markup as LinkBar (because you wouldn't implement tab buttons as form buttons) but just style it differently. I think the word TabBar could be dropped to save the confusion here.

Regards, Karl
Photo of Karl Dawson

Karl Dawson

  • 7 Posts
  • 0 Reply Likes
Hmm, my cut and paste skills late at night are not so sharp. Try to ignore the 2nd (repeated) paragraph :)

I went through all the similar Balsamiq components and there are just 2 more that I would change to use ul / li tags - BreadCrumbs and MediaControls. I wouldn't add role="navigation" to the MediaControl though it is appropriate for breadcrumbs.

Just as soon as I get local admin back on my laptop I'll test the latest build.

Regards, Karl
Photo of Enrico Berti

Enrico Berti, One man band

  • 262 Posts
  • 13 Reply Likes
Hi Karl,
I think that Peldi, when designing Mockups, had more the Flex components in mind other than a possible web translation of them.
For instance, the ButtonBar in Flex is "ToggleButtonBar".
I'm quite happy with the latest release since the ButtonBar rendering is way better then the previous one.

BreadCrumbs and MediaControls you say?
I agree on the first one but I have to think a bit more about the second one...
Do you propose to do a sort of
< UL >
< LI > < SEEK BACK IMAGE>
[..]
?

Thanks for your collaboration!
cheers, e
Photo of Karl Dawson

Karl Dawson

  • 7 Posts
  • 0 Reply Likes
Hi,

I can appreciate the core direction of both these apps, no probs. As a front-end designer/developer I leave all the twiddly bits to the guys with wizard hats :) The larger issue here is that an app delivered via a web browser is still output in HTML and because you're no longer getting the OS accessibility hooks that traditional apps enjoy, that HTML has to be considered carefully so that assistive technology (or us front-end guys) can fill the gap. That's why the WAI-ARIA (Accessible Rich Internet Application) recommendations are important. Anyway, I digress slightly.

For MediaControls the skeleton markup could be:

< button type="">< img src="back.png" alt="Rewind" / > < /button >

Might be beneficial to wrap those controls in a div for styling.

The other thing I like about semantic markup is there's less of it - much easier to read / maintain.

Particletree wrote a great article on buttons, with Dave Shea providing an incremental update.

Hope this helps! Even if there is a development emphasis for Flex, both apps are already very useful to me, thank you.

Regards, Karl