What is the best way to develop a webpage? I only build them in my spare time (never made a site for a company or such, just for fun) and since two months I'm trying out Drupal. I use Notepad++ for the most of the work. How do you program your site and how do you check it's compatibility? I use Firefox with FireBug and the WebDev toolbar, but it's not the best way to test its crossbrowserish capability (what's the right word?). Any ideas on this?
Let me know what you use.
I'd be interested to hear people's experiences too. I may soon be building a site as a favour to a friend for their business.
My web host has rvsitebuilder which seems like a straightforward way of doing this.
I'm a professional web developer and I have always used dreamweaver (code view not design view) as although the syntax highlighting is not on par with some of the others its built in ftp features are great and save a lot of.
Coding wise I developed my own CMS and framework about 18 months ago and now I use that exclusively for all my sites, before that I used to use various solutions but never found one that fit the bill completely.
I use firebug occasionally but I much prefer the web developer toolbar for firefox, makes CSS styling a breeze.
I think really the only way to properly test the site is to first check it in all the major browsers (not emulators, they can make mistakes) then put it through the W3C validator for standards compliance and a WAI validator (wave and cynthiasays are the best ones) for accessiblility.
That way you can be 100% sure that it is perfect. don't forget to check at various different screen resolutions (at least between 1024*768 - 1600*1200 IMO) and if you can, check it on a mobile browser as well just to play it safe.
Not a pro by any means, but I use a combination of stuff - Dreamweaver when I'm at my desk, my host's web interface for quick tweaks on the road, and a smattering of Flash thrown in there because I love Flash. Haters, go ahead and dump on me, but I do. I agree with alexward that you NEED to thoroughly test your site in different browsers, although I have stopped testing for IE6 compatibility, and also run it through several validators. However, I think building for the resolutions he talks about may be a bit restrictive - I TRY to build for smaller displays, because of the trend away from desktops, and toward netbooks/tablets. The data isn't there yet, but I'm anticipating it...
Don't worry too much about tablets, it seems that the more popular ones will use the same screen resampling software which mobile browsers use so they should rescale quite well. Netbooks are another matter though. If they do keep their niche (which I doubt they will if tablets take off) then yes sooner or later considerations may have to be made to design for their screen sizes. Although many of them can handle 1024*600 so you should still be able to design for that resolution and be fine.
Totally agree with the IE6 thing as well... people have started to get the message about IE6 now. Microsoft have even gotten on board. If anyone is worried about their IE6 users then you can set up a stylesheet to offer a severely limited but still functional version for them without having to cut back the user experience for the more modern browser.
A lot of people have so far spoken about the tools they use for actual development but in terms of developing a website from the beginning you should really plan the development at design stage.
I use Photoshop to design the pages (like probably 95% of designers). It's worth mapping out all your main pages in the design first, thinking about how you are going to build them in HTML/CSS and considering their performancein terms of usability, browser accomodation and even SEO.
Like Alex I use Dreamweavers code view. A lot of hardcore devs vote against Dreamweaver, calling it an amateur's tool, but the syntax highlighting is brilliant and it offers a lot of helpful tools (like document formatting, code inspection and, as mentioned, FTP capability).
The best way to learn is by doing, and always keep abrest of new technologies. There's nothing worse in this day and age than seeing people selling web services when their homepage is built using tables, makes us of inline CSS and javascript, and is a million miles away from W3C validation :)
Good luck!
Keep in your mind, i am primarily a designer working with (X)HTML , CSS 2/3 , Javascript, and some flash once in a while. My clients , with the exception of 1 so far (2 years as a freelancers) have not required any backend PHP / MYSQL / RUBY type work. I usually work with small / local business. So my process can be much different then an agency's process
My process works out like this.
1. Send client the request for service form.
This asks all the right questions, things like who has final approval, sample sites they like and why, budget, needs of the website (CMS, PHP MYSQL, ETC), sample flow charts if available. Also this form showcases my entire portfolio and outlines my design process in-detail. This also outlines who will be responsible for copy. I collaborate with another designer and a writer. I make it a point to tell the client that I am not a writer, and that copy for their website will cost extra. This service form also outlines any SEO / Internet Marketing / SMM services they might require, which is also extra.
2. Create a wireframe
After i receive the form i generate a wireframe of the home page and usually 1 other page. Mainly i deal with local small business and have not needed to make more then two different looking pages (home and secondary). This wireframe showcases layout of key items and allows the customer to begin giving feedback early so that changes are lest costly (in time and cash) down the road. It is at this stage that i being implementing the copy either from the client or my writer.
3. Translate the wireframe into PSD
Pretty self explanatory - after the client approves the wireframes, i then "skin" everything. Adding in colors, icons, etc. I usually stick to the 960 Grid system, but if the job is on a budget i.e. >$1000 it usually involves the client selecting a template and me editing it.
4. Translate the PSD into XHTML and CSS with a sprinkle of JQuery or Moo
I find this process a lot less time consuming if i did the PSD and Wireframes in detail. When i first started out this would take so much time because I was always looking up how to do "x" and now, most of my clients at least, sites are pretty feature-generic so this a breeze.
5. Test for compatibility / accessibility / w3c
I run these tests in FF, Opera, Safari, IE 7/8, and Chrome. Also i disable javascript and css3 to ensure everything degrades nicely. I usually dont go as far to disable CSS to see how everything looks, but I do disable CSS to see the site from SEO standpoint. I run validation on w3c and css, get it validated. Actually on a side note, i only started doing this recently.
6. Perform basic user testing
My clients are usually within the $1000-$5000 range, so extensive user testing is usually overboard and excessive. I do basic UT throughout the design process with my other designer, wife, and mom. Then typically i run 2-5 tests on http://www.usertesting.com
7. Present final copy to client for revisions
Unlike the stereotypical designer, i really do not mind implementing client revisions. Most of their requests can be argued against the documented user testing videos - but i usually do not hassle them too much. Typically I budget ANY job with up to 15 hours of revisions throughout the process. The client is made aware from the start that exceeding this will incur a fee.
8. Setup Analytics and Submit to search engines
Even if clients do not select an Internet Marketing / SEO / SMM campaign, I always create the site from the start to be Search Engine Friendly using things like Meta Tags, Title Tags, Text Navigation, alt tags, Robots.txt, and Sitemap.xml. Most of the time clients wave important services like "keyword research" or "copy creation" and it hurts their site some when I just throw in "best guess" words in their Meta, Titles, and Headers. I also setup google analytics and submit their URL to Google & Bing.
Thats pretty much it.
There is alot more that goes on "behind the scenes". I take alot of my business ideas from the book the 4 hour work week, and much of the admin stuff is handled by virtual assistant. I like to focus on just design, and project management, sales, book keeping, etc. are all handled by someone else. Its not that I do not know how to do these things (i have a business degree) but I'd rather be involved and get lost in my day doing something I really love. Design.
You must log in to post.