- This topic is empty.
March 25, 2011 at 1:49 pm #32134
Hey jdleblanc, my first inclination is to ask, “why side-scrolling?” I’m just wondering. I think its okay for a personal site or a portfolio site – depending on what you want that site to accomplish. What kind of work do you hope to attract? Or is this just for fun? If you’re looking for corporate-type clients, I’d advise against side-scrolling. Anyways, just know that your portfolio needs to match the needs of future clients.
The best minimal side-scrolling portfolio I’ve seen is Jon Contino’s. http://joncontino.com/selected-works
(aaronsilber) – A side scrolling site seems appropriate for a portfolio. A portfolio is traditionally in book format; you turn pages right to left. I guess it’s slightly counterintuitive because we’ve become accustom to vertical-ness on the web, but I don’t see it hindering anyone’s user experience if it’s done well. Thanks for the link. That’s what I’m trying to accomplish.March 25, 2011 at 3:15 pm #53605
You’re right @jdleblanc – it just depends on what your portfolio is of. If it’s there to display your web design skills, you may not want to use a side-scrolling layout. Illustrations, photography, and images of work all seem appropriate.
A layout like the one I linked to is easy enough to accomplish in an hour. Do you need any help? The most obvious way you could implement CSS3 would be to use a box-shadow on your images.March 25, 2011 at 4:50 pm #53742
If you were to add images to the list, the container will automatically expand to fit them, so you wouldn’t ever have to give the container an explicit width (or height actually). I used images with different heights to show you how they would look, and that they would not break the layout.
I didn’t really comment my code, so if you have any questions, please ask. This was fun!
P.S. – anyone wondering where all the cats came from. Its a super-awesome service called ‘placekitten’. I use it for all my layout needs (and it brightens my day!).March 25, 2011 at 8:51 pm #53615
Haha. The kittens are hilarious. Good job whipping out a side scrolling site in no time. I thought of just using an unordered list like that, but then it became complicated in my brain when I thought about adding text. Some times the simple stuff gets me.March 25, 2011 at 9:08 pm #53616
Thanks Aaron. This has been really helpful. I’m feeling the effects of having not even thought about code for the past few years. I’m very rusty.March 25, 2011 at 9:19 pm #53584mixxmacMember
Great job @aaronsilber! And, thanks for the kittens link.March 25, 2011 at 10:01 pm #53556
I didn’t even know there was such a thing as the white-space property. That was the key!March 25, 2011 at 11:02 pm #53558
@mixxmac @jdleblanc – hey thanks guys! There are quite a few tricks in there that make this possible, white-space being a biggie. Notice also that the img tags within the portfolio ul are styled with “vertical-align: top;” Without that, they would all be aligned at the bottom, and it wouldn’t look very nice. Again, any questions, just drop me a line.March 26, 2011 at 10:43 am #53563JohnnybMember
One usability pro I like about vertically scrolling sites is that I use the wheel on my mouse to navigate the page up and down when I browse, I rarely use the actual scrollbar. But I would be unable to do that with a horizontally scrolling site. I don’t know if that’s an issue for most users, but it is for me, and I think it’s one of the reasons why a lot of sites are vertically layed out like you say.March 26, 2011 at 11:01 am #53552
Very good point about the wheel. That didn’t even cross my mind. I have the Mac mouse with the wheel that works any direction.March 26, 2011 at 6:29 pm #53480soapParticipant
ive seen very cool sites with not necessarily side scrolling but where everything is actually on one page and certain anchors move elements around creating “new” pages.
nothing wrong with this :)
- The forum ‘CSS’ is closed to new topics and replies.