Client has asked for me to code the attached design. It’s a bit chaotic. Is this possible to do with straight up HTML/CSS and, if so, how difficult is it?
It depends on how those elements are supposed to be responsive. How is that supposed to scale down into tablet/mobile? The web isn’t simply a picture.
Coding that picture wouldn’t be a problem. Coding it so it fits into every browser/screen size…that might be a bit more complicated.
I don’t see how that will translate to mobile/tablet so I’m assuming this is a bad idea; another graphic designer who clearly doesn’t know how the web works.
I tried a similar sort of design a few years ago but the main problem at the time was the lack support for transparent png images.
I assume one big image would be responsive but it would take a while to load. Alternativly the cork board could be a background image and the notes etc. could be another image with a transparent background which may load a bit quicker?
I know you do not want to use php but you might find this old example of mine interesting: Imagemap with php
Thanks guys. My gut felt it was a bad idea but I just wanted to make sure I wasn’t mis-advising the client.
That would be very challenging to make responsive and accessible.
The rotated text and images can be done in CSS for modern browsers using transforms For smaller screens you would want to pull those blocks into vertical positions and in the right order.
The dotted line joining the numbers isn’t feasible unless you code it in js to match wherever the elements are placed. You could have the dotted line visible at wide screen and hidden at smaller screens but still would not be exact depending on the users setting etc.
It would be possible to get close to that design but would probably take all week instead of a couple of hours:)
It would be an interesting exercise if anyone has a few days to spare 
3 Likes
If i was going to do something like this i would probably break it down into columns as mentioned above and think about how the elements would move relative to one another as the screen got smaller. Might have to move a few of the elements to make it easier so they aren’t overlapping so much. And as above lose some of the bits like joining lines. Could probably find a repeating cork background image so it wouldn’t be a huge image.
I’ve done this http://www.goodbeachguide.co.uk/beach/bovisand-bay#beachwildlife where the post-it notes at the bottom are the same background image and just tilted with css. I still need to work on the mobile side of it but i am quite pleased with how it is working at the moment (i’m sure it could be improved - in hindsight could probably have done the post-its with css and shadows rather than image).
For me the greatest challenge would be the maintenance of the page. If it needs to be changed every week it’s going to be time consuming and not a cms based solution.
If he gave the visiion of how he expects this to go into mobile, I wouldn’t mind trying this evening. I need a break after my code fiasco I had last night with my personal project 
.
(w/o delving into responsive/readabilty and small screen accessibility), I would think the dotted line would be feasible, but require some maths. Making this so is compatible with legacy browsers THAT would be a pain. This lay out begs for AP and CSS transforms.
You could do mobile-first, so that on smaller screens you just have the text/background color and perhaps the numbers in pentagons as carry over elements from the “full layout”
From the point of view of art and creative direction, however, the layout is a travesty not particularly effective. Why the corckboard/sticky note metaphor? Does it re-enforce or support a meaning of a message? It may be late in the process, but maybe the metaphor could be reconsidered or at least restructured to be more congruent with the delivery media? The web is not print, and when doing digital art direction, one should never tie a concept to a specific fixed dimensions and , when possible, not even to a fixed proportion.
I think it could be broken down into the 5 groups and then the parts of each group.
Like Paul said, at some point a media query could centre the 5 groups vertically on top of each other.
For even smaller screens you can then do the same with the parts of the groups. At that point I would lose the tilts to waste less space.
To deal with overlapping, you could apply a hover state to the single items to straighten, enlarge and increase z-depth.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.