From GIMP to xHTML and CSS

[15:01] == woutercox_ [54c36866@gateway/web/freenode/ip.84.195.104.102] has joined #p2pu-webcraft/gimp-xhtml-and-css
[15:01] <woutercox_> sorry, had a small problem, back now.
[15:01] <aram123> word to your caffeine addiction
[15:01] <aram123> : ]
[15:02] <Zilla-Mama> (mumbling) manna from the gods....
[15:02] <woutercox_> it's like fuel for your body... haha
[15:02] <aram123> lol, nice one
[15:03] <woutercox_> Did any of you had trouble with the previous assignment?
[15:03] <cmarx> No trouble, but was there anything we needed to send you?
[15:04] <aram123> not really, although I do have a question
[15:04] <woutercox_> well, it's not obligatory, but I do prefer if you send me the image files (and later, html and css files), so I can take a look
[15:04] <woutercox_> okay
[15:04] <Zilla-Mama> a little - not much.  Mostly I wanted a concise list of each of the elements' sizes.  That way I could recreate them quickly without watching all the videos - I'm working in Photoshop, so....
[15:04] <aram123> is there a "practical" size to make mock ups like in the videos ?
[15:04] <absent> Quick question: is anyone able to log this for the others?
[15:05] <aram123> I read somewhere that one should design for 960 pixels
[15:05] <thorstenboeck> I have tried to use a photo (instead of a drawing) to make the header, but when I try to 'extend' the photo to the right with the pattern fill it does not look very well. Is that a general problem when using photos?
[15:05] <aram123> I think it was a css framework
[15:05] <aram123> not really sure
[15:05] <woutercox_> ah yes
[15:05] <woutercox_> Well, okay
[15:05] <woutercox_> Let's officially start today's session then
[15:06] <woutercox_> First, aram123's question
[15:06] <woutercox_> 960 pixels is a common size, for several reasons
[15:07] <woutercox_> The first one is, that it's a little smaller than the 1024x768 resolution which a lot of people use as the mimimal (or optimal) screen resolution
[15:07] <woutercox_> since it's smaller, there is also some room at the edges you can use (for borders, images, ...)
[15:07] <woutercox_> the second reason is, 960 can be easily divided by different numbers
[15:08] <woutercox_> for example, let's say you want to create 2 colums.
[15:08] <woutercox_> 960/2=480, which is an equal number
[15:08] <woutercox_> then, 960/3=320
[15:09] <woutercox_> 960/4=240 and 960/5=192
[15:09] <woutercox_> So let's say within that area of 960 pixels you want 4 columns, then you can just create 4 columns of 240 pixels
[15:10] <woutercox_> And the framework you are talking about is the 960 CSS framework
[15:10] <Zilla-Mama> That sounds nice, but what about spacing between columns?  Is there a standard amount or is it just eyeballed?
[15:11] <aram123> oh, I get it now
[15:11] <aram123> thanks woutecox
[15:11] <Zilla-Mama> Is that calculated into the 240 pixels (example) size?
[15:11] <senex> http://960.gs/ for reference, though you probably don't want to delve into it too much until after your knowledge of html/css is a bit better.
[15:11] <woutercox_> Zilla-Mama: I don't understand your question?
[15:12] <woutercox_> what is calculated?
[15:12] <Rodney5Weis> If a column is 240 px wide, padding can increase this dimension and ruin a layout - is that what you're getting at, Zilla-Mama?
[15:12] <Zilla-Mama> When dividing 960 into columns, how much space (margin) do you typically add to your columns?
[15:12] <Zilla-Mama> Yes
[15:13] <woutercox_> well, you can use your intuition or you can use more 'scientific' methods, such as the golden ratio or rule of thirds
[15:13] <Zilla-Mama> So, do you calculated the padding into the 240 px wide dimension?
[15:13] <woutercox_> As for spacing between columns, you just substract that from the with you already have
[15:14] <woutercox_> Then you have for example a 220px wide column with 20px of padding to the right
[15:14] <woutercox_> we will also see that when coding our page
[15:15] <woutercox_> You should understand width as 'total width of my block'
[15:15] <Zilla-Mama> perfect.  That's what I wanted to know.
[15:15] <woutercox_> including padding and margins
[15:16] <woutercox_> let's see, other question
[15:17] <thorstenboeck> Here is my question again. I have tried to use a photo (instead of a drawing) to make the header, but when I try to 'extend' the photo to the right with the pattern fill it does not look very well. Is that a general problem when using photos?
[15:17] <woutercox_> thorstenboeck: I showed you that trick because it can come in handy when you have artwork that doesn't 'fit' the area you want to put it in
[15:18] <woutercox_> For example, the P2PU logo was not wide enough, so I was able to use the part on the right, repeat it and make it look like it belonged together
[15:18] <woutercox_> for photographs it will be more difficult
[15:18] <thorstenboeck> Thanks. OK, that was what I thought. I should probably try with a drawing instead.
[15:18] <thorstenboeck> Thanks!
[15:18] <woutercox_> or  you could use stamp cloning, for example if you have a photo with grass you could clone the grass and fill the empty area
[15:19] <Zilla-Mama> A drawing will have the same problem
[15:19] <woutercox_> yeah, it might
[15:19] <woutercox_> you could also try to crop a part of the photograph so it fits
[15:20] <Zilla-Mama> That 'trick' is great for gradiants, areas that are easy to repeat, like grass, but not for making an entire image larger
[15:20] <thorstenboeck> ah, ok, so no real golden rule, but more about trying out different things
[15:20] <woutercox_> yeah, this was a trick I wanted to show you that will sometimes work, but certainly not all of the time
[15:20] <Zilla-Mama> It's much easier to make a too large picture smaller to fit.
[15:21] <senex> I try to avoid scaling up at all if possible.
[15:21] <Zilla-Mama> Yes
[15:21] <woutercox_> yes, that's advisable
[15:21] <Rodney5Weis> Agreed, senex
[15:21] <woutercox_> I started from a logo that's too small, but if you create a logo yourself or let someone create it for you, you can give them the exact measurements
[15:21] <woutercox_> you'd say "give me a logo 960px wide by 204px high"
[15:22] <thorstenboeck> is the 204 also a 'standard' size?
[15:22] <woutercox_> No, not really
[15:22] <woutercox_> There are no 'standard' sizes, just sizes that are often used
[15:23] <woutercox_> You should use whatever you think will look and work well
[15:23] <Zilla-Mama> Are you finding that there are newer more 'standard' measurements because of tablets like the iPad?
[15:24] <Zilla-Mama> I know I've been reading that navigation has changed because sites now want to design with 'fingers' in mind.
[15:24] <Zilla-Mama> No tiny nav buttons anymore (if you want it on a tablet)
[15:25] <francy> that's interesting
[15:25] <woutercox_> Those new devices can change the way you design, yes. Supposing you're targeting the iPad.
[15:25] <woutercox_> Some might be interested and some may not. Best thing you can do is test your design on those devices while you are working on them.
[15:25] <Zilla-Mama> If you're not selling to the iPad, does it make sense to still design for it?
[15:26] <senex> If you don't, you'd be cutting out a potential market.
[15:26] <woutercox_> Sure it might.
[15:26] <Zilla-Mama> True, that's what I'm wondering about, the market share.
[15:26] <senex>  I'm sure it's a bit of a balance, That'd be an interesting statistic to find.
[15:26] <Zilla-Mama> Is it worth keeping in mind the limitations of tablets like the iPad?
[15:27] <Zilla-Mama> Exactly.
[15:27] <woutercox_> Yes, I think so.
[15:27] <Zilla-Mama> Thanks, good to know.
[15:27] <absent> I'm pretty sure you can target both traditional browsers and tablets with the same page, using some CSS.
[15:27] <woutercox_> Not only iPads, but smartphones, ... too
[15:27] <woutercox_> yeah, absent, you can
[15:27] <woutercox_> you can also offer a different styleshoot to mobile devices
[15:27] <Zilla-Mama> yes, I'm not limiting it to the iPad, just that it's universally known.
[15:27] <woutercox_> sorry, stylesheet
[15:27] <woutercox_> There's a good read here: http://webdesign.tutsplus.com/articles/design-theory/designing-for-the-n...
[15:28] <Zilla-Mama> Ooooohhh.  Thanks!
[15:29] <francy> I have seen the same website use different styles for mobile devices, is it easy to change a website designed for a computer to one that is simplier for the mobile devices?
[15:30] <woutercox_> That really depends on the website. Using xhtml and css like we are going to do, it shouldn't be too hard
[15:30] <woutercox_> for example, if you would look at the page we are going to create in a smartphone that does not support any stylesheets, it will still be understandable
[15:31] <woutercox_> for more advanced smartphones, tablets, etc. you can offer a seperate stylesheet
[15:31] <aram123> maybe it would be a good idea if at the end of the course, we design a different css of the same page for mobile devices
[15:31] <francy> I like that idea
[15:32] <woutercox_> aram123: we could do that if there is time left
[15:32] <Zilla-Mama> That would actually be fun.  Is there any resource you know of that deeply delves into xhtml strict?  I can find a lot on xhtml transitional, but not strict.
[15:32] <woutercox_> I'd think most books or articles teaching xhtml would mention that?
[15:33] <woutercox_> I'm going to write that down for next week and see what I can find
[15:33] <woutercox_> But anyhow, I'd like to close this question so we can get on with the rest.
[15:33] <Zilla-Mama> Not really, most are transitional, not strict.  They touch on it but don't go into it really well.
[15:33] <Zilla-Mama> Sorry.
[15:34] <woutercox_> I'll try to have an explanation ready by next week.
[15:34] <Zilla-Mama> Thanks.
[15:35] <senex> Looks like the next ipad model is going to run a resolution of 2048x1536, so that won't have any troubles displaying normal websites. Also, the iphone 4g currently runs 640x960, so it can handle a 960 grid system, though not long websites well without ample scrolling. I'm not sure of android resolutions.
[15:36] <woutercox_> senex: it's a wilderness ;)
[15:36] <senex> haha
[15:36] <woutercox_> Okay, so, assignment for next week
[15:38] <woutercox_> For next week I'd like you to watch videos 6 up to 11 and create the images. I know it's a lot, so do what you encan. We'll discuss it next week, then you have another week to work on the images you couldn't finish.
[15:38] <woutercox_> Then we'll start coding the page
[15:39] <Zilla-Mama> Do you have a list of the exact measurements of each element?  I'd love to just recreate everything with my own images without having to watch the videos over and over again.
[15:39] <woutercox_> Okay, I'll do that and put them it in the course material.
[15:40] <Zilla-Mama> Thank you! =D
[15:40] <woutercox_> So to recap: videos 6-12, next week we'll discuss that in the chat. Then you have another week to finish up your design and in the chat for that week, we will start with coding the page.
[15:40] <woutercox_> I hope that's clear?
[15:41] <aram123> crystal clear
[15:41] <Zilla-Mama> Yes, thank you, again.
[15:41] <woutercox_> And I'll come back to today's questions.
[15:41] <cmarx> yes
[15:42] <woutercox_> 1. smartphones and tablets, 2. xhtml strict and  3. provice a list of the image dimensions
[15:42] <woutercox_> Okay, that was it for this week.