What are the options for creating Typographic styles as menu links?

[alexthejohnojohnson]

I have a challenge of creating this poster for a homepage for a client. He wants to make each word a link but I’m struggling to see how this can be created using the correct markup in css and with the ability of being mobile friendly.

I know I could probably do this using hotspots but that just seems like old school web design to me. Any thoughts?

Much appreciated.

[Paulie_D]

SVG would be about the only option I can reasonably see being used.

Not sure what you mean by ‘proper markup’…a print poster such at that is not going to lend itself to established ‘rectangular’ elements such as we have access to currently.

[Senff]

It’s going to be a lot of work, but it can be done. Each word (or phrase) can be a link and have its own color.

I would just take a DIV with that image as the background (just for reference) to start with, and position it relative.
Then inside that DIV, place all the links, positioned absolute. Every individual link has a left/top position, size properties, and a color.

Once you have all the links placed properly, remove the background image.

Here’s a start (without the proper font, so spacing is a little off, but you get the idea):

http://codepen.io/senff/pen/dPVbVK

As for being mobile-friendly…That’ll take more work cause obviously this is not going to fit on a small screen, so you might have to do it twice or three times for various screen sizes.
Perhaps it can be done using percentages instead of pixels….but you’ll have to try.

[alexthejohnojohnson]

This is great thanks Senff. My only concern is making it responsive. Would you just align all the links to the left to keep them neat?

[Senff]

Personally, I would just get rid of that layout on mobile. It’s too complex and probably doesn’t really work well on a small screen.

[Author]

Posts