Website Design & Development - How do you do it?

ja3h · 10 Aug 2009 at 10:59

Just wondering what techniques/methods you guys use when making websites and what programs you use and what benefit they give you?

I suspect the way I do it is long winded and not very efficient.

I use XAMPP to let me view the website locally.
I make a mock up on Photoshop with a general idea of the layout, I then use Aptana Studio or Dreamweaver to create the divs etc and turn on borders or colours so I can see if I'm getting the layout correct.
Constantly CTRL+F5'ing in a web browser.
Create the assets in Fireworks or Photoshop - jam them in and add content.
Then FileZilla to go to the online domain and click and drag the contents of the local folder to the website.

Russinating · 10 Aug 2009 at 11:32

Here's my process:

1. Design the website in Photoshop
2. Once happy, split up all the necessary images
3. Create the layout in Notepad++, viewing the page in IE/FF/Chrome along the way
4. Once I'm happy with the layout of the main page I then split it into PHP (header/footer etc) and create the rest of the pages
5. Upload!

dr4g0nf1y · 10 Aug 2009 at 11:36

I do it simple. I use a text editor and save as file type and view file in firefox.

GravyMonster · 10 Aug 2009 at 12:03

rghjones said:
Here's my process:

1. Design the website in Photoshop
2. Once happy, split up all the necessary images
3. Create the layout in Notepad++, viewing the page in IE/FF/Chrome along the way
4. Once I'm happy with the layout of the main page I then split it into PHP (header/footer etc) and create the rest of the pages
5. Upload!

I do it exactly the same way as this, except I use Visual Studio to write the XHTML/C# and Notepad++ for CSS/JS/JQuery

Edward01 · 10 Aug 2009 at 12:08

rghjones said:
Here's my process:

1. Design the website in Photoshop
2. Once happy, split up all the necessary images
3. Create the layout in Notepad++, viewing the page in IE/FF/Chrome along the way
4. Once I'm happy with the layout of the main page I then split it into PHP (header/footer etc) and create the rest of the pages
5. Upload!

Yeah this is what I do, except I get to about stage 3, change my mind about the menu and then go back and re-design it a couple of times till I decide I did like the original after all!!

ja3h · 10 Aug 2009 at 13:02

rghjones said:
Here's my process:

1. Design the website in Photoshop
2. Once happy, split up all the necessary images
3. Create the layout in Notepad++, viewing the page in IE/FF/Chrome along the way
4. Once I'm happy with the layout of the main page I then split it into PHP (header/footer etc) and create the rest of the pages
5. Upload!

I'm such a newbie - I'm looking into Step 4. I've just been copying and pasting the whole html layout on each page of the website and changing what needs changing...

Thanks for the replies.

Martins · 10 Aug 2009 at 13:17

1) Design in fireworks
2) slice it up
3) code in xhtml/css using notepad++ and chrome
4) when done with the code, open in IE and sigh at how much it's broken, fix with an IE only css file
5) phpificate it

Russinating · 10 Aug 2009 at 13:41

ja3h said:
I'm such a newbie - I'm looking into Step 4. I've just been copying and pasting the whole html layout on each page of the website and changing what needs changing...

Thanks for the replies.

Learning the basics of PHP takes seconds and saves hours. All my sites are PHP even if they're not dynamic, mainly for include() usage (although as well as the equally handy contact forms/visitor trackers etc). Do a Google for "php include" and that should set you on your way.

rsatd · 10 Aug 2009 at 14:29

Open xterm
vim <name>.php

Job done

Dj_Jestar · 10 Aug 2009 at 14:36

cp -r BaseImage ./<clientsname>Image
cd <clientsname>Image
./Pharo.sh

http://www.pharo-project.org

LiE · 10 Aug 2009 at 15:13

1. Sketch up some ideas on paper.
2. Translate sketch into Photoshop image.
3. Slice image up.
4. Layout the page with XHTML/CSS.
5. Add PHP/Javascript code.
6. Add content.
7. Job done.

Muel · 10 Aug 2009 at 15:13

I tend to sketch it out by hand, works really well for that intial ideas brainstorming I've found.

Then I start playing about in photoshop, I'm not a fan of slicing so I tend to make all the images seperately, then do the coding and keeping playing about with photoshop and moving stuff around until it looks right, then stick all the content in, W3C check it etc.

Craig R · 10 Aug 2009 at 16:08

rghjones said:
Here's my process:

1. Design the website in Photoshop
2. Once happy, split up all the necessary images
3. Create the layout in Notepad++, viewing the page in IE/FF/Chrome along the way
4. Once I'm happy with the layout of the main page I then split it into PHP (header/footer etc) and create the rest of the pages
5. Upload!

ditto the above

TwoSaints · 10 Aug 2009 at 16:17

1. Design in Photoshop
2. XHTML and CSS in Notepad2
3. Chop/Recreate the Images in Photoshop
4. Split the page up into header/footer/other content etc
5. Repeatedly check in all 5 major browsers

so pretty much same as everyone else I think...

Russinating · 10 Aug 2009 at 16:17

Well, nice to know I'm doing things the same way as everyone else

ja3h · 10 Aug 2009 at 16:43

rghjones said:
Learning the basics of PHP takes seconds and saves hours. All my sites are PHP even if they're not dynamic, mainly for include() usage (although as well as the equally handy contact forms/visitor trackers etc). Do a Google for "php include" and that should set you on your way.

Ok I got the Php include thing down now. Tidied it up a lot - I've got a header, nav and footer now which I include on the pages.

Thanks!

What is the correct way to avoid this:  ?

Is there a reason why people prefer to use notepad ++ over dreamweaver? (Barring the cost?) I haven't got into the program properly but I like the fact that when you press "</" it closes whatever is open and when you change a link it changes everything related to it (If that makes sense).

suarve · 10 Aug 2009 at 16:51

Martins said:
1) Design in fireworks
2) slice it up
3) code in xhtml/css using notepad++ and chrome
4) when done with the code, open in IE and sigh at how much it's broken, fix with an IE only css file
5) phpificate it

lol

ja3h said:
Ok I got the Php include thing down now. Tidied it up a lot - I've got a header, nav and footer now which I include on the pages.

Thanks!

What is the correct way to avoid this:  ?

Is there a reason why people prefer to use notepad ++ over dreamweaver? (Barring the cost?) I haven't got into the program properly but I like the fact that when you press "</" it closes whatever is open and when you change a link it changes everything related to it (If that makes sense).

It's all down to personal preference and how you work best, there no program you have to use really.

Edward01 · 10 Aug 2009 at 18:22

ja3h said:
What is the correct way to avoid this:  ?

Is there a reason why people prefer to use notepad ++ over dreamweaver? (Barring the cost?)

Well that is 378.35 good reasons really...

Deleted User 234324 · 10 Aug 2009 at 18:28

As above with basic planning, but i use dreamweaver to get basic layouts created then fine tune with notepad++, php/sql coding is all done using notepad++

Russinating · 10 Aug 2009 at 18:48

ja3h said:
Ok I got the Php include thing down now. Tidied it up a lot - I've got a header, nav and footer now which I include on the pages.

Thanks!

What is the correct way to avoid this:  ?

Is there a reason why people prefer to use notepad ++ over dreamweaver? (Barring the cost?) I haven't got into the program properly but I like the fact that when you press "</" it closes whatever is open and when you change a link it changes everything related to it (If that makes sense).

Good good - told you it was easy!

As has been said it's all personal preference. I use Notepad++ because it gives me complete control without the bloatedness of Dreamweaver.