Finding Resources

[foxfirefey]

Class Notes

Class has still been pretty quiet on the CSS learning front, but it's time to move on.

You can always look at the syllabus to see where we are. Our previous class was the second part of the lesson HTML and CSS overview; Examining with browser developer tools. Next week, we will review the foundation of core2 layouts.

Lesson Readings

So, this week I want you to find some resources you might want to use for your layout. There's a list started here:

Style Making Resources

Feel free to suggest your favorites--for instance, I'm not sure what the landscape of image hosting is currently like since I have my own webhost.

Exercises

I want you to think about the following:

• The color scheme for your layout. You'll need foregrounds (for text), backgrounds, and accent colors for things like links. If you are making an S2 layout, I recommend two sets of color schemes: one dark on light and one light on dark, to give you the best base to work from.
• Graphics you might want to use--backgrounds, accents, etc
• The positioning of layout elements you want to aim for--sidebars, no sidebars? What's in the header?

I totally recommend you chatter in comments about things you're thinking about and what you find that you like, along with giving your favorite resource recommendations.

Comments

[tyger]

OKAY I'LL GO FIRST WITH THE TL;DR.

I'm thinking of making a Sora•Heartless (aka Antisora) layout - see icon - but so I don't make it hella dingy and hard to read, like my last attempt I'm thinking black on white, kind of minimalist. (Though if alternate colours are good for S2 it's not really hard to reverse!)

Will probably be making crappy header drawing myself, assuming I can find my tablet pen - I have this thing about using other people's fanart, and none of the official stuff is suitable for headers. =/ If I can't find my tablet pen Iono what I'll do. Maybe change what I'm working on. *laughs* Might have to do that anyway, depending on the suckitude of my drawing, but, you know. That's the plan.

I really like the left-sidebar navlinks-in-header format I've got right now, so I'm not anticipating changing that up too much. Maybe the calendar in the footer, if I can make it look pretty. (I like the concept of two-sidebars, but I browse with a narrow enough window that's not practical, and I am doing this mainly for me, so.)
Might have some patterns or semi-transperant .pngs for colour in places, but I'll see what it looks like when it gets that far. *kind of just going with it, here*

[ninetydegrees]

The wiki is down for me at the moment. As part of http://dw-dev.dreamwidth.org/87045.html maybe.

Back now. I guess it was just me. :)

[baggyeyes]

This entry by mark explains the dropout.

[foxfirefey]

Actually, the wiki is on a machine of mine, so any drop out is unrelated and would need to be looked in separately!

[baggyeyes]

Totally forgot that bit. My bad.

[sunrisetr]

I'm so glad we're going small step by small step at this. It discourages the laziness in me.

I'll definitely be thinking of how I want my layout to look like.

[tree]

i confess i haven't made much headway into the last two lessons for lots of reasons. but i know exactly what i want my layout to look like. i basically want to recreate the layout of gilliananderson except without having it be a custom layer ported from lj. i figure that will be good for learning the basics and then i'll try to branch out from there.

one source of colour palettes i like is design seeds. i've set up a feed at designseeds_feed.

the image host i use when i'm too lazy to open an ftp client and upload to my own server is imgur.com.

picnik offers some interesting and fun options for image editing online.

[ninetydegrees]

Oh Design Seeds is awesome. I've added it to the list. Thanks!

[kristin]

Thanks for setting up that designseeds feed!

[lurksnomore]

Oh, Design Seeds is amazing! I have trouble making colors/shades/stuff like that work together, and wow. Thanks for the feed!

[foxfirefey]

If there's anything I can do to help you with those last two lessons, let me know. Design Seeds is really awesome, thanks for that and your other suggestions!

[kristin]

For color, I love love love the Colorzilla add-on for FF. You can find out the codes for any colors etc.

Hmmm, right now for the layout I want to make I am considering fixed-width vs. percentages as I already have a pretty good idea of what I want it to look like, and have started mocking up a design to slice in PS.

[boundbooks]

I just wanted to say thank you for doing this! I'd be commenting/participating, but I'm in the middle of finals right now, so I'm going to use these posts as a reference to come back to later. :)

[foxfirefey]

Oh man oh man, good luck with finals!

[onyxlynx]

I created what seems to be a real (but empty! that is, I won't be using it for anything but this) account and then pooped out, but will be getting back to it since my brain has decided it wants to stretch out.

[baggyeyes]

Ditto. My brain just imploded.

[foxfirefey]

That reminds me, I should totally make an entry that people can pop into test styling accounts with bunches of different HTML to be aware of. Also, maybe at some point I could run a "comment on people's style journals so they have good long thread references, etc, pagination"-a-thon at some point.

[fulminata]

I highly recommend ColourLovers for layout palette ideas. I've gone to them many many times over the years.

[foxfirefey]

ColourLovers is ♥

Image hosting

[phoenix]

This site has a useful-looking database of free image hosts. Warning if you're browsing without adblock: site has quite a few ads. The content does seem useful, though, and it lets you filter to hosts that allow hotlinking, a necessity for layout images.

One prominent host that I'd recommend against is Imageshack. It's blocked large geographical areas in the past couple of months - everywhere outside the US, everywhere outside primarily-English-speaking locations... To my knowledge it *currently* doesn't use geographical blocking, but I would not trust it.

Re: Image hosting

[ninetydegrees]

One prominent host that I'd recommend against is Imageshack. It's blocked large geographical areas in the past couple of months - everywhere outside the US, everywhere outside primarily-English-speaking locations... To my knowledge it *currently* doesn't use geographical blocking, but I would not trust it.

TinyPic, which is owned by Photobucket, did the exact same thing last year. They reversed the change but I wouldn't trust either of these now. I didn't know Imageshack had done that. Thanks for the info.

Re: Image hosting

[phoenix]

Sorry, I think I mixed up Tinypic and Imageshack there! But yeah, I agree - both are trouble.

Re: Image hosting

[afuna]

*raises hand* I can't see anything from Imageshack any more. All I ever see is a frog and something about an unregistered host.

[kitters]

I use Photobucket as my primary image-hosting site.

I still don't know what I want my layout to look like. >>

[erika]

I use picasa as my primary image hosting site and it's worked out well.

I really liked my last layout but now I'm bored & kind of tempted to port over my livejournal layout. >_>

[erika]

ooh ooh I also like this image very very much

[marahmarie]

OK, it's time to break out of lurking mode, I guess. I've read but not "participated" in the lessons because so far, I'm familiar with most of the ground covered. I'm waiting for something that completely throws me for a loop (which is going to happen) so I can go "Oh wait, what" in the comments until I get it.

So this is my CSS issue (well, this is one of two): I can edit and write CSS but I don't have and don't know how to use Photoshop - but I have another image program that's pretty much identical to Paint.NET and I love it, but how do I use it the way most people use Photoshop to position a layout background? I get lost on how to do a mockup (in any image program at all), then translate that into an actual CSS layout with proper positioning.

My other issue is I can edit anybody's layout to do almost anything but I don't know enough about positioning to write my own layout from scratch. I've looked everywhere for help, but most design sites seem to advocate not bothering - they suggest using pre-made grids that are already available online, or including basic CSS resets (where all paddings and margins have been zeroed out for you).

I want to write my own basic grids/do my own resets so I know how to do them, but to do that I guess I'd need to know how to position basic page elements across a variety (or at least one or two) Dreamwidth styles. I don't really know where to start with that.

I have an idea for a layout for a poetry-type DW community that would have a big rose that breaks through from entry-body over and across the sidebar from somewhere in the middle of the page, so I'm hoping to be able to do that layout without ganking someone's else's style sheet as the base by the time I'm done with the courses here.

Oh, and for those here looking for image hosting? I use a free account on Wordpress.com that also hosts a blog of mine. They give you 2GB free storage space which is more than adequate for my current image needs and (in my experience) the images load much, much faster than they used to load from Photobucket, ImageShack, TinyPic, etc.

[ninetydegrees]

how do I use it the way most people use Photoshop to position a layout background? I get lost on how to do a mockup (in any image program at all), then translate that into an actual CSS layout with proper positioning.

Marahmarie, can you clarify what you mean here by 'use Photoshop to position a layout background'? Also do you have problems creating the mockup in a photo editing program or just the part where you translate that into CSS?

As for resets, well, it depends on what your start with. Do you make your own layout layer, use an existing one but don't use its stylesheet or use the layout and its stylesheet and work from there?

[marahmarie]

I've seen some layout makers kind of uncover the process they go through to make a layout, and for some of them, that starts with throwing a mockup of how it will look together in PS (but I'd be using another imaging program, like Paint.NET or a clone). I can't even get my mind around how to do that. So, let's say I visit a pattern site and see one lovely pattern and go, "Ooh, shiny," so I download the pattern, open it in Paint.NET - then what? My mind just goes blank. I'm lost from that moment on. Is it necessary to use an imaging program for the layout's pre-construction, or is it possible to do just do all the positioning in your head and then translate that to CSS somehow? If so, I can't figure it out too well that way, either. That's why I wind up ganking other people's layouts and just completely re-writing them if I have to (because at least that way I know where basic elements are supposed to go to start off with). :)

Do you make your own layout layer, ****use an existing one but don't use its stylesheet***** or use the layout and its stylesheet and work from there?

I'd only want to use a pre-existing layer. No base style sheet. I think it's easier that way. :)

Edit: Just to be clear, I have a problem with both: creating the mockup and translating it to CSS. If I could create the mockup that would be half the battle; I can't get that far, though, so I have no idea how to translate the mockup successfully to CSS.

[seleneheart]

I don't know if this will help you or not, re: the question about using graphics software to help with a layout. And I use paint.net for my stuff at work -- it's a good little program. Anyway, this is my process for the Photoshop part of it.

When I'm doing a layout CSS from 'scratch' I usually gather a lot of pictures of things that have elements that go well together. Like pictures of dresses, or pillows, or interior design. Advertisements. Anything to give me a place to start visually.

For instance this picture which I just now grabbed from google:


It has some great colors, some that can work for the background, something that can work for text. It has a few patterns, like the drapes and the pillows. I think I want a subtle green on green stripe for the body background like the drapes show. So I make a webpage sized canvas in photoshop, and cover it with the green stripe.

Then I like the blue pillows with the white leaves as maybe the pattern for the container that holds the entries. Or maybe the sidebar if I pull the transparency down. Anyway, I either hunt for a similar pattern using some of the resources above, or I try sketching something. Then I use the marque tool to apply it above my stripe.

After that I use the color picker to grab colors for the various elements of the layout. Like maybe the couch color for the entry background and the coffee table color for the font, and maybe the plain blue pillow color for links. I put all those elements on the canvas, using layers and the marque tool to control where things go.

The important thing is to test how well they work together, because sometimes colors react to each other in weird ways.

I suggest you find your rose picture and use it as your inspiration. Make a canvas and then make the elements you'd want on the layout. Use the marque tool and move the boxes around until you like it. I find it's usually easier to write the CSS if I have a clear idea what I want it to look like.

Okay, that was really long.

I kinda like that pic . . .

[marahmarie]

It will help immensely - what an incredible way to break it all down - thank you for going to the trouble of explaining this in a way that I can (miraculously) understand.

[ninetydegrees]

It is absolutely not necessary to create a mockup. I do it because I need something concrete and it might be useful if you ask for somebody else's input but everybody has their own thinking and designing process. You mention using a pattern to base a design on; well, I could never do that. I need to have the basic layout of the design, which I generally sketch on paper first, before I can think about the rest. Do you feel you need something concrete like a pencil sketch, a collage or a digital image or do you feel you don't necessarily? And if you do, maybe it only needs to be a draft, not the final design.

If you base your design on an existing layer, the question is are the elements in the right order for you in the first place? If manipulating CSS with floats or absolute positioning or elaborate margins to significantly move things around is an issue maybe changing the order of the elements in the source would work better for you (which, ok, means S2 editing which sounds difficult but isn't much at this level). Not that I want to discourage from using CSS. It's just a thought. :)

[marahmarie]

If manipulating CSS with floats or absolute positioning or elaborate margins to significantly move things around is an issue

It's absolutely not an issue. I sort of enjoy messing with default positioning (here's an example of me changing a right-floated #primary div to float left using pure CSS, which I did just for fun and because, well...I like entries to float left). It doesn't matter where elements are to begin with because I know how to move them even where they're not supposed to move. I just don't know where to put them to begin with, if that makes sense (in other words, with no existing layer to work with, I'm lost, as in, "Um, where does stuff go?").

But seleneheart has given me a great framework for taking new-style editing out of Web Dev's CSS editing panel and into some sort of imaging program to start with instead (which long-term, I think is going to be much more productive for me) and for that I'm very grateful. Thanks for your thoughts on this, too. :)

[lexicalcrow]

Delurking because I had totally forgotten about this and finally had an idea of what I wanted to make last night. XD I've been reading along, and I did muck about wih the customisation wizard on one of my RP journals too, just to get some practice in. It's been nice to refresh my memory and get a better handle on CSS. At least I already understood the syntax, I'm just not that practiced at it yet.

Anyway, the layout I want to make is basically purple and clouds. Or sommat. I may need to spend some time fiddling about with graphix and such when I don't have six million assignments due in the next three weeks. Not sure it'll be a layout for anyone but me though. It's kind of based on an album cover I rather like. (I had to look for one that had the right shade of purple; some versions were a little washed out or too blue. I plan to scan my CD cover anyway and use that as it'll be hi-res enough to work with and it's the right shade of purple. /pedant) IDK, I just like the colours and whatnot. I could probably do a more generic one if it turns out okay though.

I haven't got anything past 'purple and clouds' though. But maybe a header and one column? Maybe not a big header though. But purples and whites and maybe pink? IDK. I'll see how it all comes together. At least I have an idea now. There's plenty of time to work on this in June when I'm not so busy.

As for resources, I used to use dA stock images as a resource, but since I deleted my account there for various reasons, I just skim Google Images for anything I can use now, making sure it's stock art or free to use or whatnot. I tend to upload things to tinypic for layouts. It's easier to handle than LJ's scrapbook (especially as I don't have a paid LJ anymore) and I found img.ur too clunky and slow-loading.

I've used some of these background images in layouts before as well. Very useful cos they're smaller graphics and they tile nicely.

[cimorene]

I'm in the weird position of just wanting to learn to make a layout for fun/skills, and not to use. My current dw layout, put together through trial and error, is basically perfect for me and has been for a couple of years now. I just want to learn how to do it the proper way, with a good foundation, instead of the 'find a layout that works, copy a piece of it, and then figure out how to stick it in and modify it' method. But since I've taken my personal journal preference out of the equation, I've got a blank canvas! Maybe I'll make a layout for a community. Or just try to find something tricky to do for the challenge of it...

[foxfirefey]

I think that's an awesome reason to make a layout! I just want people to have a general idea of what they want to do with the layout they're making--warning them now gives them a few more weeks before they actually have to start coding on it!

[snakeling]

I want to port this WP layout to DW. I like that it's different :)

A lot of the design decisions have been made for me, ha! I'm going to try and make it as flexible as I can, though.

[foxfirefey]

That looks like an interesting challenge! I look forward to seeing your project.

[melyanna]

Huh. Is it possible to do drop-down menus in LJ or DW layouts? I'd sort of assumed it wasn't.

(I'd actually love to be able to hide sidebar modules in drop-down menus – there's utility in having them right there on the page, but I find them visually distracting. Probably just me, though.)

[seleneheart]

I have my tags on my LJ in a drop down menu on the sidebar, so I'm sure the other elements could be done the same way on the theme layer.

[ninetydegrees]

If I remember well it's something like:

.module-content {
height: 5em;
overflow: auto;
}

[seleneheart]

Doesn't that turn it into a scroll rather than a drop down? Or I could be confused.

[ninetydegrees]

*facepalm* You're right! I'm the one who was confused. :)

[phoenix]

It's possible - search for 'css dropdown menus' and look for those that don't use any Javascript or Flash. It's not a well supported technique in older browsers (IE6 or earlier), but for your own journal you mostly need care about the browser(s) you use.

Image and font resource

[phoenix]

I just today came across the free section at Veer. There are only a couple of photos and illustrations provided free at a time, but they're provided under a broad licence and lovely-looking - that greenery illustration would look beautiful in a spring layout.

[liv]

Colourscheme: I want to fix up my current layout so that it actually matches my background image, rather than just being vaguely dark red and dark green. Of course, having deliberately dimmed the colours of my image so that it wouldn't dominate the page too much, I now can't find the original anywhere on the internet *sigh* But I think the actual journal colours would need to be a bit more intense than what's in my picture, because otherwise there won't be enough contrast to make it readable. Something like this palette, maybe?

Graphics: I don't want to go overboard with the graphics but I keep trying to make journal layouts where the entries themselves are in a decorated frame. This is a bit difficult because obviously entries can vary in height and width. It may be that I need something with a fairly small repeat unit to achieve this? If I could make my entries look something like this illustration that would be ultimately awesome. As in, title in the top semicircle, metadata and links where the address is in that example, and main body text in the large bit in the middle.

Anyway, I'm still working on poking around for graphics, it doesn't absolutely have to be Kate Greenaway but something a bit nostalgic from the turn of the 20^th century, but not excessively floral / sentimental 19^th century stuff. NB Kate Greenaway's original illustrations are out of copyright, but the particular scans of them I've linked to may not be; I am not pernickety about that but the graphics may not be suitable for use as a public layout.

Positioning: to avoid making the page too busy I should probably get rid of the sidebars and move everything to the footer.

Style Making Resources - Accessiblity & Compatibility

[stellastars]

RL has been keeping me busy and I haven't had as much time to devote to this as I would like... I'm in the middle of catching up on several lessons! In looking over this lesson, I remembered I had some resources regarding accessibility & browser compatibility. I thought they might be useful to others.

Accessibility
Colour Contrast Check Helps you make sure background/foreground colors will have enough contrast to be legible.
Vischeck.com Simulates how your style would look to an individual with color deficient vision.
Webaim.org article on fonts List of ideas to keep in mind with the goal of making your text as legible as possible. (Also, just kinda interesting about fonts.)

Browser Compatibility
Browsershots.org I haven't used this site yet, but supposedly it will simulate how your site will look in various browsers.

Re: Style Making Resources - Accessiblity & Compatibility

[foxfirefey]

Oh, thank you! I have made sure to add these to the list.

(I, too, am behind due to too much RL at the moment.)

Re: Style Making Resources - Accessiblity & Compatibility

[charlottetoolan]

Oh, the list of accessibility links is excellent! This is something that I wanted to look for, so I'll bookmark your finds.