Workflow?

Tony Hardy

Well-Known Member
So I've made a bit of a start on my site/trying to understand it.
Do I make the whole layout in Photoshop, including mouseovers etc?
What about text? Would I just place text and images where I'd want them to be, and then code it or something?

So I'd basically make a mockup of one page of my site and then go into coding it?
 
Photoshop has the option of exporting to HTML, which I would strongly recommend you don't do. This basically adds a table (pretty much defunct for most modern web design) filled with images (slow to load and not great for SEO). It does this for every page, and creates new images for each, which results in a lot of duplicates.

I'd mock it up in Photoshop then spend the time to learn how to code it using HTML/CSS (or even modify a free theme to suit my needs). HTML isn't too hard to learn (I know that's easier said than done for some people) and there's a plethora of beginner guides and resources online that should quickly get you up to speed.

CSS is a bit of a pain at times, but once you understand it, the basics are incredibly easy (it's basically just changing values).
 
HTML isn't too hard to learn (I know that's easier said than done for some people) and there's a plethora of beginner guides and resources online that should quickly get you up to speed.

CSS is a bit of a pain at times, but once you understand it, the basics are incredibly easy (it's basically just changing values).

What about semantics?
 
Well yeah, that's a little more advanced. I meant the concept behind CSS is easy once you get your head around it. It was baffling at first, but once you realise what's going in, it all clicks.
 
Well yeah, that's a little more advanced. I meant the concept behind CSS is easy once you get your head around it. It was baffling at first, but once you realise what's going in, it all clicks.

Wasn't having a go it's just that semantics are as much a part of learning how a web page is constructed as HTML and CSS if you wanna be successful.
 
Ah, yeah true. That's something you'd want to think about before you start the actual coding to prevent creating similar/duplicate elements.
 
I think the key is that, if you take away all the styles and pretty pictures, does the page still make sense? Are there headers, paragraphs, lists etc where you'd expect them to be. It can be a massive benefit to SEO as well.

For example a lot of noobs ignore the <address> tag when it can help localised search terms enormously.

That's why I think that learning to put something up on a page isn't actually that hard. Putting something decent up, that will perform well in search and that delivers business enquiries is actually very involved.

In answer to 'what is the workflow?' I'd say, mark up your content like it is a word processed document, then add divs and floats etc to structure the page layout and then worry about graphics.

Hope that helps.
 
But do I have to place the image somewhere? Or slice it or something? Where do I do that?

Cheers for the helps. Starting to get my head around HTMl/CSS/.
 
OK, here's the thing. HTML holds your content and CSS is all your styles/the look of the site. So you insert images (using img tag) if it is to be considered 'content' i.e. your portfolio pictures. The stuff that goes around it, banners, footers, navigation button images is the site style so you set the images as backgrounds using CSS. So web page building is a mixture of inserting images and setting them through CSS.

This is why I have said to have some content in HTML first, then arrange your content using CSS and then add text/images/videos later.
 
Haha. Oh dear.
If only I had the cash to hire a professional. Steep learning curve.
I'll post my layout once it's done then hopefully people can advise me from there.

Cheers.
 
Haha. Oh dear.
If only I had the cash to hire a professional. Steep learning curve.
I'll post my layout once it's done then hopefully people can advise me from there.

Cheers.

What kind of design stuff can you do?

I may be able to help you on a kind of skill swap basis.

CyberW
 
Back
Top