On Tue, Jan 31, 2012 at 10:31 AM, David Laakso <laakso.davi...@gmail.com> wrote:
> First pass: <http://ccstudi.com/site/portfolio/w/>
> Constructive comments and suggestions are always appreciated.
> Thanks.
Giving it the benefit of the doubt, I'll call it a "mobile first"
design. It looks pretty good on a mobile screen, but I have to scroll
to see the pic of the naked lady with the full body tattoo (Ms April).
If there were a full 12 months there, it would probably be more
scrolling up and down than I'd want to do to see all of the pics.
For this layout, I'd recommend moving the nav closer to the top as the
first child of the article element and make it horizontal. Then put
the contact information on the right. You might want to consider
horizontal month tabs, too.
So, now what are you going to do with media queries to adapt the
design to wider screens?
For wider layouts, I'd recommend putting the nav on the left
(vertically, like it is now). Also put the month tabs on the side
vertically and change their display so that the active one has an
inverse white bg and #99a7b4 letters and maybe give it an arrow-like
end to point at the container. So, left would be the nav. Then the
month tabs in a narrow vertical strip on either side of the container.
div#container in the middle, and contact info farthest right.
Here's a CSS-only arrow-type thing that might inspire you:
ul#tabs li a.tab {
padding-left: 1em;
}
ul#tabs li a.tab.active {
background-color: white;
border: 0 none !important;
color: #99A7B4 !important;
height: 1.9em !important;
line-height: 1.9em !important;
padding: 0;
}
ul#tabs li a.tab.active:before {
border-bottom: 0.97em solid #99A7B4;
border-right: 1em solid white;
border-top: 0.97em solid #99A7B4;
content: "";
display: block;
float: left;
overflow: hidden;
}
Note that the !importants are in there to override the !importants in
the site's current code.
If you really like the narrow layout, consider complementing it with
some kind of
tileable abstract background for the div.page which contains the
article. Or you could do something neat with gradients.
DISCLAIMER: I'm a coder. I've never been accused of being a designer :)
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
> Best,
> ~d
>
> --
> Chelsea Creek Studio
> http://ccstudi.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
