chartfieldconsultants
26-06-07, 14:05
All the technical coding jiggery-pokery involved in ShopWindow makes my head hurt - I'm generally all at sea when it comes to scripting languages and stuff like that.
But in terms of making it pretty, that's what I do know a bit about - that's what my day job is, web designer specialising in CSS-based layouts and suchlike.
So here are a few tips - please add your own so that this thread can become a resource for everyone (and so I'm not the only sucker who's given away his competitive edge for nothing! :eek: )
As a rough guide, the first thing you have to be able to do is look at the template structure provided in the basic Shopwindow download and understand how the completed page is constructed and which bits of functionality slot into which bits of page structure. If you can look at the code and think 'a-ha - those lines of code give me my hot picks, if I lift them wholesale from *there* I can move them into a new right-hand column when I've added one' then you're off to a good start.
When I was starting out I used this site to generate CSS-based page layouts (I write my own from scratch now, but I learned some of the basics from dismantling the code generated here).
http://www.inknoise.com/experimental/layoutomatic.php
That'll give you a layout, and hopefully you can move all the Shopwindow bits and pieces around to the parts of the page where you want them. After that, you have to deal with issues of sizing and spacing and general attractiveness. The attached file will give you a start (if you rename it master.css) by resetting a lot of browser defaults and creating a few useful basic styles. Dunno if it conflicts with the generated template from layoutamatic though - haven't checked, sorry. I didn't write it myself, by the way, I found it somewhere online and now can't remember where.
My favourite trick for creating colour scemes is to pick a photo first, then take colours from it for the main site scheme. At AllTheToolsYouNeed.com it's the dark grey of the girl's top, and a shade of brown from her hair. A better example is the not-quite-finished http://www.mybedroomfinder.com/directory.html (home page is currently disconnected).
In most sorts of designs, the CSS background-image property is your best friend. You can use it for a one-off watermark or design in a div, or a photo that's just there for decoration (ie not an important information-giving pic like a product photo). But it's most powerful when set to repeat in one direction or the other. A 1px wide, 50ish px high, image that repeats horizontally at the top of a div is a great way to give it a decorative top such as a gradient. And a 1500px wide, 1px high background image that is centered at the top of your page and repeats vertically down it will let you create what's known as 'faux columns' - coloured columns for your content to sit in.
The best CSS beginners' book I've come across is Simon Collison's Beginning CSS Web Development (www.colly.com). The CSS Zen Garden was an inspiration in terms of discovering what was possible - it's a showcase with lots of designs using the same HTML but different CSS.
Other useful sites:
* A List Apart http://alistapart.com/
* Tutorials on MaxDesign, especially on list-based navigation and the much under-used but ruddy brilliant definition list http://www.maxdesign.com.au/presentation/ and http://css.maxdesign.com.au/
* The Man in Blue, on styling forms http://www.themaninblue.com/writing/...ve/2004/03/24/
* istockphoto.com has loads of brilliant photos for a dollar a pop
* Famfamfam has thousands of little icons to download and use for free http://www.famfamfam.com/
* 'Favicons from pics' - generate a favicon easily http://www.html-kit.com/e/favicon.cgi
* Squidfingers - has lots of stylish and retro backgrounds you can tile across your page. http://www.squidfingers.com/, example backgrounds: http://www.squidfingers.com/patterns/4/
More advanced tricks:
* sIFR - dynamic Flash text replacement. Use regular HTML for your headings, have them transformed on the fly into any font you like whether or not it's on your user's machine. Tricky to set up but seriously impressive when it works. http://www.mikeindustries.com/sifr/
* Nifty Corners - make your site less boxy to look at by rounding the corners of elements in it http://www.html.it/articoli/niftycube/index.html
* Leightbox - a sort of pop-uppy, lightbox thingy that's search engine friendly and not irritating http://blog.eight.nl/articles/2006/02/21/fire-lightbox
Hope this is useful...
But in terms of making it pretty, that's what I do know a bit about - that's what my day job is, web designer specialising in CSS-based layouts and suchlike.
So here are a few tips - please add your own so that this thread can become a resource for everyone (and so I'm not the only sucker who's given away his competitive edge for nothing! :eek: )
As a rough guide, the first thing you have to be able to do is look at the template structure provided in the basic Shopwindow download and understand how the completed page is constructed and which bits of functionality slot into which bits of page structure. If you can look at the code and think 'a-ha - those lines of code give me my hot picks, if I lift them wholesale from *there* I can move them into a new right-hand column when I've added one' then you're off to a good start.
When I was starting out I used this site to generate CSS-based page layouts (I write my own from scratch now, but I learned some of the basics from dismantling the code generated here).
http://www.inknoise.com/experimental/layoutomatic.php
That'll give you a layout, and hopefully you can move all the Shopwindow bits and pieces around to the parts of the page where you want them. After that, you have to deal with issues of sizing and spacing and general attractiveness. The attached file will give you a start (if you rename it master.css) by resetting a lot of browser defaults and creating a few useful basic styles. Dunno if it conflicts with the generated template from layoutamatic though - haven't checked, sorry. I didn't write it myself, by the way, I found it somewhere online and now can't remember where.
My favourite trick for creating colour scemes is to pick a photo first, then take colours from it for the main site scheme. At AllTheToolsYouNeed.com it's the dark grey of the girl's top, and a shade of brown from her hair. A better example is the not-quite-finished http://www.mybedroomfinder.com/directory.html (home page is currently disconnected).
In most sorts of designs, the CSS background-image property is your best friend. You can use it for a one-off watermark or design in a div, or a photo that's just there for decoration (ie not an important information-giving pic like a product photo). But it's most powerful when set to repeat in one direction or the other. A 1px wide, 50ish px high, image that repeats horizontally at the top of a div is a great way to give it a decorative top such as a gradient. And a 1500px wide, 1px high background image that is centered at the top of your page and repeats vertically down it will let you create what's known as 'faux columns' - coloured columns for your content to sit in.
The best CSS beginners' book I've come across is Simon Collison's Beginning CSS Web Development (www.colly.com). The CSS Zen Garden was an inspiration in terms of discovering what was possible - it's a showcase with lots of designs using the same HTML but different CSS.
Other useful sites:
* A List Apart http://alistapart.com/
* Tutorials on MaxDesign, especially on list-based navigation and the much under-used but ruddy brilliant definition list http://www.maxdesign.com.au/presentation/ and http://css.maxdesign.com.au/
* The Man in Blue, on styling forms http://www.themaninblue.com/writing/...ve/2004/03/24/
* istockphoto.com has loads of brilliant photos for a dollar a pop
* Famfamfam has thousands of little icons to download and use for free http://www.famfamfam.com/
* 'Favicons from pics' - generate a favicon easily http://www.html-kit.com/e/favicon.cgi
* Squidfingers - has lots of stylish and retro backgrounds you can tile across your page. http://www.squidfingers.com/, example backgrounds: http://www.squidfingers.com/patterns/4/
More advanced tricks:
* sIFR - dynamic Flash text replacement. Use regular HTML for your headings, have them transformed on the fly into any font you like whether or not it's on your user's machine. Tricky to set up but seriously impressive when it works. http://www.mikeindustries.com/sifr/
* Nifty Corners - make your site less boxy to look at by rounding the corners of elements in it http://www.html.it/articoli/niftycube/index.html
* Leightbox - a sort of pop-uppy, lightbox thingy that's search engine friendly and not irritating http://blog.eight.nl/articles/2006/02/21/fire-lightbox
Hope this is useful...