- Dec 18, 2010
- 2,638
- 2,393
You should know by now that I love coding people's PSDs, well I've recently found another brilliant one by a designer called Ugur Balkaya, the specific PSD can be found at
The design is responsive and should fit nicely to any device (I think? It works on my iPhone and iPad anyway!)
It's desktop-first coded as I didn't have a mobile layout to work off, so I've coded the desktop version first and then scaled it down.
The trickiest part was getting the world map sorted properly. It looked fine on desktop, then as it scaled down, it started to break due to the actual map being a background and having no fixed height, the faces would stick in their positions because they are absolute-positioned so the only way to fix that on mobile was to get rid of the faces after a certain breakpoint. This meant that the map would collapse as the only thing giving it height was the container holding the faces and once that was hidden, it would collapse the map. So instead, I placed an image of the map inside the container and hidden it on desktops, but displayed it on mobile devices whilst hiding the background-image of the map in the main container and the faces. Confusing? I know. I tried so many different possibilities to get it right and nothing worked.
Anyway, if you fancy viewing the layout, you can do so at
You must be registered for see links
The design is responsive and should fit nicely to any device (I think? It works on my iPhone and iPad anyway!)
It's desktop-first coded as I didn't have a mobile layout to work off, so I've coded the desktop version first and then scaled it down.
The trickiest part was getting the world map sorted properly. It looked fine on desktop, then as it scaled down, it started to break due to the actual map being a background and having no fixed height, the faces would stick in their positions because they are absolute-positioned so the only way to fix that on mobile was to get rid of the faces after a certain breakpoint. This meant that the map would collapse as the only thing giving it height was the container holding the faces and once that was hidden, it would collapse the map. So instead, I placed an image of the map inside the container and hidden it on desktops, but displayed it on mobile devices whilst hiding the background-image of the map in the main container and the faces. Confusing? I know. I tried so many different possibilities to get it right and nothing worked.
Anyway, if you fancy viewing the layout, you can do so at
You must be registered for see links
