PDA

View Full Version : My First Design Challenge



orion_joel
08-23-2008, 12:50 AM
Hi All,

I am heading into the first time i really have had any sort of challenge to do some design above really a basic layout for a website. Pretty much the sum total of my previous design experience has been using CMS framework and applying templates, making just a few small changes to add or remove things that i needed or did not need.

While this has worked well for me, the one person i have done a website for has been happy with the site for a while and has started to find that some of his competition are starting to make their sites more interesting and and not so straight forward. While i want to continue looking after the site for this person i would like to get some point of views from everyone.

I have been shown three sites that he likes from his competitors, while one i think is worse, (terrible color choices). The other two would mean that i need to really spend some time to build my skills to be able to do something comparable.

Do you think it is worth spending the time learning more about design, for one case that i am not charging with the potential then i guess to start doing more work and charging for it, or maybe is it time to bite the bullet and say it is out of my depth. While i want to learn i have no idea where to start.

billbenson
08-23-2008, 12:55 PM
I guess the question comes to mind, what do you want to do with it? Do you want to be able to improve your own site? Offer web design services? Develop a family of sites for your own use?

I recommended a book in a thread a little while back. It was a good xhtml and css book.

Since you already are using cms's, you can do some really fancy things with some php and database knowledge. Its really not to hard to pick up if you have some programming background.

I use oscommerce a lot (thats not a recommendation for oscommerce, it was just the best ecommerce package availabe when I first built the sites). I've written quote generators, programs for updating database prices etc that have really made my life easier.

I have also done things like modify oscommerce to take sections of text from product descriptions and use them as heading tags on the pages or title tags for search engine reasons.

Learning php and mysql may be a good route if you are going to continue to use cms's (or even if your aren't). It only takes a few weeks to go through a dummies book on it.

Again, I don't really know what you are trying to do but just some ideas.

vangogh
08-23-2008, 04:04 PM
Ultimately only you can really answer the question of whether it'll be worth the time. It depends on your goals and how you think it best to get there.

Some thoughts:

First you can probably do more than you think and probably aren't out pf your depth. Trust me, most everyone who does anything creative has the feeling that they aren't good enough at times. It's just part of the process that you work through. It happens on projects all the time. Usually when I start a new design I get a concept in my head, make some sketches, and then try a design. I almost always hate it and think I'm no good, blah, blah, blah. Then I try again and again mad again if I have to. Eventually the design comes together. Some turn out better than others of course, but the final work is always better than the initial work.

I think it's natural sometimes to see someone else's work and focus in on the parts we can't do while forgetting to see the parts we can.

When it comes to the sites clients show you take a deeper look at the sites and uncover what it is about them they really like. You might be focusing on the detail you know you'll have trouble recreating while they might just like how the navigation works. Ask your client why they like each site in question. You may be surprised by what they really like in each site.

Also remember that you're the designer. If your client could recreated those sites they wouldn't be showing them to you in the first place. Do what you can to make the best site you can right now. Try to learn how to do one new thing instead of thinking you need to learn everything for this one site. Often sites need less of the flashy details than you think. One little detail can do wonders for a design. Just do what you can and then see if you can add or maybe two new things to the mix.

One last thing. There's plenty I still can't do in comparison to what I see other sites doing. Those same details that are making you wonder about being able to design are not my strengths either. I do what I can to improve with each new design and have found for me the best approach is to first do all the things I can do. Layout the structure, make sure the navigation is functional, etc. When I have something I like I'll work to add an extra detail or two to refine the design, but I know the design can still stand on it's own without those details. The details are the icing on the cake, but they aren't the cake.

orion_joel
08-24-2008, 05:12 AM
Post's seem to actually post much better when i am connected to the internet, so hopefully i remember everything i had planned to say here.

Basically to answer both of your questions, i want to learn this to improve my own website, build a group of websites for myself and to offer design services (however not a fully fledged design company). While i do not want to choose Web Development as a career option, i feel that it is a necessity to achieve some of the business goals that i want to achieve. So as such learning it would not be a waste of time, but it comes down to weighing up what i need to learn how in depth i need to learn it, and if in the long run it will give me a suit return on the time i have invested in learning.

The book you mention bill, i thought seemed like a pretty good book, It seems in Australia though it is quite expensive, $70.00RRP, and lowest i have found it is about $60.00 so i think this might be one time where even with the shipping from Amazon it will work out to be much lower price.

Really, i think what gives me the idea that i could be wasting my time with learning some of this is that i do not know how useful it will be in the long term. I mean i could go down one path learning one thing and it ends up being something i use once, and not again. I guess that is what really has me hanging not knowing what will best use my time.

billbenson
08-24-2008, 02:43 PM
That being the case, I would learn xhtml, css, php, and mysql. xhtml because it is becoming the new standard. For me css is the most difficult, at least when it gets into page layout. That book cleared up a lot of questions I had. Consider programs like dreamweaver tools, but given your objectives I'd learn to code first. In the long run you will be glad you took this approach given your objectives. All of the same information is available in on line tutorials for free as well. Just starting out sometimes a book is more cohesive.

If you go the route I suggested, the only program that I think is a must buy is zend client which is a php editor. It makes it a lot easier to find grammatical errors in code. Its kind of pricey. You can certainly can start out just using a text editor. There are free versions of just about everything else. There are certainly programs that are nice to have such as DreamWeaver and Photoshop.

There are a bunch of good text editors out there for free or cheap. I use the free version of editpad Pro. You download it as a trial, and then when the trial expires you loose some features. Far better than notepad.

Also, when you get into php / mysql, you will find you use excel a lot. I always bounce between editpad, excel, and zend frequently when writing php.

When you start getting into php make a post and I'll give you some suggestions that make things easier that I've never seen posted or in books.

vangogh
08-24-2008, 09:09 PM
If you're interested you might as well spend some time learning. The worst case is you'll know more about a subject. There's nothing wrong with that. You'll find the more you learn about different subjects the more connections you make to other things. Oddly enough by learning to design better you'll see business models in a new way or you'll get a better feel for marketing.

Where exactly are you with web design? What do you know and what are the things you don't know? I can probably point you to some websites with good free tutorials. My impression after your first post was you were looking to know more specifically about the design part, the visuals and less the coding. Is that right? Or is it more the coding side you want to learn? A little of both?

orion_joel
08-26-2008, 01:46 AM
Thanks, for the pointers Bill, i am going to order that book from amazon, just gotta see if anyone else wants anything at the same time. That is one of the downfalls living in Australia, the freight costs work out better the more you buy, but still add a bit to the cost of the book.

For the most part Vangogh, you are correct, i am primarily interested in the Design/Flow/visual aspect of the sites, which i think is going to be primarily needing to focus on the XHTML and CSS side of things, in respect to actual coding and such. However the biggest challenge i have is getting between the look i want and making everything work together to get that look i want.

While i do not know how much of CSS works, i have no problem in figuring it out by searching when i know what i want to do but not sure what command i need to use. Additionally the same with the PHP i have no idea what the code does, however given a plugin or add on for a premade script and directions where to add the new bits in, i can do so and get it working how it should.

After speaking with the client i think that i am going to be able to manage most of what is wanted at least to some extent, there may be a few things i get stuck on but i will have to see about them as i run into them.

billbenson
08-26-2008, 03:46 AM
Joel, when you start with the php mysql, run through a form tutorial. Not one that includes email (complicates things a lot). Simply a form that saves to a database. I took a quick look and didn't see any of those types of tutorials, but I didn't look very hard.

Emails come later and are more difficult. You want to be able to have someone enter a form and stick it in your db. Its a really good starting point because you need to create a database, and stick stuff in there from a form. From there you can go anywhere, from sending out emails, to collecting visitor data. It also covers a lot of ground on the learning curve.

If you can't find one, let me know and I will write a simple one for you. Get familiar with phpmyadmin as well which should be part of your hosting package anyway.

Start with the xhtml and css (imo) in any case. If you have a feel for html and css, you can do both concurently.

Again, just how I would approach it. I'm sure others have different opinions.

vangogh
08-26-2008, 12:13 PM
Here's a few good links to check out.

Web Design From Scratch (http://webdesignfromscratch.com/) is a great site of tutorials on web design. It's going to be less about coding and more about design itself. Spend a week reading through everything. I've gone through everything on the site 2 or 3 times.

W3Schools (http://www.w3schools.com/) offer some of the best and easiest intro tutorials on just about every coding aspect of building a website.

For learning CSS, I recommend any or all of the books of Eric Meyer (http://meyerweb.com/eric/writing.html). Eric Meyer on CSS and More Eric Meyer on CSS are great books where he takes a site that's been coding using tables and html attributes and converts them to CSS. If you type in all the code as your reading you'll have a pretty good grasp on CSS by the end of the book.

Creating an all CSS layout takes practice. The basic syntax of CSS are pretty easy to understand and it won't take long before you're able to style most things, but it will take a little time to really get good using CSS for everything, especially for the site layout.

One thing I'd like to do with this forum if there's enough interest is to expand the website management section a little so there's a coding section where we can ask and offer tips on building websites. If so maybe we can walk you through a lot of things. Even if that section doesn't appear don't ever be afraid to ask a coding question here.

billbenson
08-26-2008, 12:34 PM
Vangogh. I started out with php with a dummies book. It got me started, but taught me a lot of bad habits. For example, I now always call the same page (self global) for a form. first time through, display the form, second time validate, third time take some action. The dummies book would have me writing three pages. This is a long time ago. The dummies book may be better now.

Do you know of any good books or references on proper php coding? I'm not talking about object oriented programming which baffles me.

I think a coding / design section would be good as there are a fair number of people here who do that, even though it's a "small businesses forum" not a webmaster forum. Maybe a webmaster section for the web related stuff that is currently spread out a bit?

vangogh
08-26-2008, 01:11 PM
I always try to start learning a new programming language with one of the more in-depth books in part to hopefully pick up good habits. I've read a lot of PHP books and not sure which one is the best, but I find the O'Reilly books (http://php.oreilly.com/) usually good. The link takes you to the PHP books. I probably started with the "Learning PHP..." book.

Two other publishers I also tend to trust are Developer's Library and Wrox. This book PHP and MySQL Web Development (http://www.amazon.com/PHP-MySQL-Development-Developers-Library/dp/0672329166/ref=sr_1_5?ie=UTF8&s=books&qid=1219771590&sr=1-5) from the former is one I learned a lot from.

I would definitely find a book that covers both PHP and MySQL, since they tend to be tied together so much. I also find it most helpful for me to actually read a little of each book before buying so I like to spend a few hours in a book store, grab a few books on a subject and just read through the intro chapter of each and maybe a section or two from deeper inside the book.

I think we all learn a little differently and may find different books better. Usuaully if I can read a chapter I can tell if the book is written for someone at my skill level and also whether or not the author's style is one that makes sense to me.

billbenson
08-26-2008, 02:55 PM
Ya, I thought about the O'Reilly php mysql book because I liked the xhtml css book so much. For the price I was concerned about the php mysql book because I have been writing both for years and wondered how much would be in it that applies to me at this point. A decent book store is a ways a way from where I live as well.

vangogh
08-26-2008, 03:14 PM
I know what you mean about the prices. It helps to be close to a bookstore since I know I can return or exchange the book shortly after buying it if it turns out to be not quite what I had hoped.

It's hard to know whether or not a book is going to apply to you sometimes without looking over it some. They all overlap to a degree. Maybe a better book would be a more advanced one or a book on an intermediate level. That way there would be less overlap, but at the same time you can still get good examples of coding.

orion_joel
09-03-2008, 01:06 AM
There are some great links here that lead to a lot more as well. It is going to take me quite some time to get through all of this and hopefully take it in.

The part i think i am going to be most interested in is the Loyouts with CSS, i think that this will be the bigger challenge part, but maybe i am wrong have to get some time spare to get right into it.

vangogh
09-03-2008, 02:05 AM
The presentation part of css is pretty easy to learn. No more difficult than html.

In html if you want to add a background color to the body you have

<body bgcolor="#00ff00">

which would give you a green background. In css you'd write

body {background-color:#00ff00}

The general syntax is:

selector {property: value; property: value; property: value;}

You could add as many property: value pairs as long as you separate each by a semicolon.

There are three ways to add css to a web page.

Inline:
<body style="background-color:#00ff00">

In the <head> section of your document:

<style type="text/css">
body {background-color:#00ff00}
</style>

By linking to an external stylesheet:

<head>
<link rel="stylesheet" type="text/css" href="path-to-your-css-file" />
</head>

Your css file then just uses body {background-color:#00ff00} without any other code around it.

The first trick is getting used to the different property names. bgcolor => background-color. It's not hard, but it's good to have a reference handy.

Here's a good tutorial from W3Schools (http://www.w3schools.com/Css/default.asp). It'll take a few hours to get through. It's simple, but you'll learn a lot and by the time you're done you should feel pretty comfortable using css for presentation. There's also a reference at the end of the tutorial.

Developing a site with an all css layout is a bit of an art. There are usually several ways to achieve the same results and most people typically develop their own style. Some things we all tend to do after learning through experience. For example any time you have a series of links that form a menu think of using html lists for the structure and then use css to style them.

I find most people first using css for layout think they need to use a lot of positioning. I know I did. That's actually not the best approach. The key to layouts is using the float property and even more knowing when not to use it. Most css layouts are really about knowing the one or two elements that need to be floated or positioned while letting the rest fall where it may.

Know it will also take some practice to get good with layouts. With each site you develop it gets a little easier and you learn a few more tricks. I'll be happy to help with questions along the way. I've been at this a few years now and have hit most of the problems.

billbenson
09-03-2008, 02:04 PM
FYI, the book I recommended had a 3 col header footer layout in it. It worked in IE6, IE7 and FF 2.x When I upgraded to FF 3 the center section no longer pushed the footer down. I've talked to some other people that have had layout issues with FF3.

orion_joel
09-05-2008, 01:52 AM
I have been reading a few different things for this in the last few days. I did find a cheat sheet which has a single page laid out with a lot of the property names and such, i will link it when i get home and also there was an interesting article i found with some references to the use of doctypes and how they can affect the layout of the page, and push the users browser to use either standards or not to display the page. I will have to also link this when i get home.

It can be kind of hard working with two different computers.

vangogh
09-05-2008, 11:11 AM
Here's a good article on doctypes (http://www.alistapart.com/articles/doctype/). They aren't that hard to deal with. The ideal one to use is xhtml strict, but in the beginning you can also use xhtml transitional, which will be a little more forgiving.

orion_joel
09-05-2008, 12:10 PM
The article that i found on doctypes, mentioned that using the strict version and using a validator, will help get better cross browser compatibility.

The link for the CSS cheat sheet is CSS Cheat Sheet (V2) - Cheat Sheets - Added Bytes (http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/) i would be interested to know if you think this is a good resource or not?

Also the article that was discussing doctypes, is at http://friendlybit.com/css/cross-browser-strategies-for-css/ and as i am sure you can tell from the name in the url it was mostly focusing on cross browser compatibility. The doc types is included in the third heading, "Stay in standard mode"

vangogh
09-05-2008, 12:27 PM
You will get better cross browser compatibility by following standards. Doctypes are part of that standard. Strict is just what it says. It's strict so it forces you to adhere to standards more. It's less forgiving.

Browsers want to be somewhat forgiving, because their goal is to display your page. Say you miss a closing paragraph tag. The browser can figure out what you mean and still display things, but you're then relying on the browser to decide what you meant and not all browsers will decide to display things the same.

The cheat sheet looks pretty good. Bookmark the tutorial I linked to a couple posts up. The reference in there is pretty good and I still end up going to it now from time to time.

I'm not sure what browser you currently use, but grab Firefox. It has a lot of great developer extensions that'll make debugging easier. I also find if I code to the standards viewing my site first in Firefox and then tweaking a few things for IE it's much easier than developing for IE first. Newer versions of IE are pretty good at displaying things, but IE6 and below have a number of issues that require workarounds. If you develop for them first it takes longer to untangle things for all other browsers.

billbenson
09-05-2008, 02:34 PM
On a different forum someone found that frequently banner and affiliate ads etc didn't validate for strict and it was often a pain to to change them. Suppose you had a bunch of rotating ads that change every week for example. He validates his pages for strict, then switches the doctype to transitional.

So depending on what you are doing transitional make make more sense.

Also, I'm still using win 2k as I've had no reason to upgrade and its pretty much the same as xp. You can't upgrade to IE 7 if you are running win2k however. For that reason, you probably should write sites that validate in IE6 as well as IE7, and FF for a while. IE6 will eventually drop off the list. You should be able to see what brower people are using from your stats. I forget if my stats package shows what version though.

vangogh
09-05-2008, 04:13 PM
True about the banners and affiliates. If you're using any code from a 3rd party it may not validate. I think you can still use strict as a doctype in many cases, but it won't validate. Still it's one reason for going with transitional.

Now Bill c'mon it's time to enter the 21st century. Your OS is so last century.

billbenson
09-05-2008, 07:05 PM
I stuck linux on my backup pc on a second partition. I'm going to buy a new pc with the next 6 months or so. I'm letting the dust settle on the blue ray stuff, plus I'm hoping quad core comes down a bit and buy that.

I'll buy a clone and probably use a dual boot win 2k (for now) and linux on disk 1. I'm sure I'll eventually buy a copy of vista for that, but not yet. I can check IE7 css on my wifes laptop which has vista. Until MS no longer supports security updates for 2k I have no real need for another operating system. All I do is email quotes and web design. So far, there is only one program I use regularly that I would have to buy for linux (its zend client and is already linux compatable), so not much reason to come into the 21st century yet.

Wifes trial McCafee (or however its spelled) trial just expired so I'm going to stick avast on her new laptop shortly. We'll see how that works.

My reasoning is two fold. MS software and associated software is expensive. Depending on your needs you may be able to buy a hp computer for $600, but to get all the software you need may be a lot more. Kind of goes against my grain.

There is also the convenience factor. The Vista that came with my wifes Dell laptop didn't even include a disk. I guess there is an online process for reloading it if you need to. With XP, you have to call Microsoft to reinstall it. At least a friend of mine did, but that may have been after a mother board replacement or something similar. With my old 2k, I just reenter the serial number.

We'll see how I like Linux, but I've seen some good reviews from people after they went through the learning curve. So I may be leaning towards 22 century :)

vangogh
09-05-2008, 10:14 PM
Just kidding of course. The only reason I have XP is because that's what was available the last time I bought a laptop. I see no reason to get Vista and still haven't really heard much good about it.

I do need to get every browser I can get for testing, though.

I'm actually thinking of making my next laptop a Macbook Pro, installing Parallels on it and then installing one version or another of Windows through Parallels. I'll probably install Ubuntu on it too so I can have all 3 OSs running. I want to be able to test on as many OS browser combinations as I can and that seems like the best way.

Still need to improve my Linux skills. My laptop is a dual boot and I have Debian on another partition. But I never boot up on that side. I really want to be able to have both up and running at the same time instead of having to choose between them.

orion_joel
09-06-2008, 12:48 AM
I am using for the most part Awstats for the stats on my site, and even though it does show which browsers are viewing the site it does not split between actual versions. So it just shows IE, FF, Opera, Mozilla, Netscape. Could be version 1 or 7 i dont know.

However i thought i would take a look at what information that google analytics can offer in this department, and yes it does offer a breakdown of which browser, and then the next level of which version. Surprising for IE the split of IE6 to IE7 was almost exactly 50&#37;. But this i would expect would differ quiet a lot from site to site.

billbenson
09-06-2008, 01:05 AM
I'm not going to go as far as to go with apple as that seems to be the choice of graphics people for the most part. I'm not saying its not a good product, just that I'm not sure its necessary for testing web pages. I don't have many apple site visitors.

Today, I have two similar clone computers Jan 2003 vintage. My strategy has been to maintain them as mirror computers for hot standby. If I don't have a computer running with email during the week I'm out of business. I also live in what is supposed to be the lightning capital of the world. That's not good for electronics. I'm not as good about backing up as I should be, but they are always within a week of each other. I have a monitor switch, so I have one monitor / keyboard / mouse that talks to either computer.

When I get my next computer I'm thinking of doing something like this:

Set up one computer as primarily web design. That would probably be the new more powerful computer. Some of the design programs are resource intensive. Zend, DW, FTP, and a bunch of browser windows.

Use one of my older computers as my sales computer. I still can get a lot of windows open on the sales computer and some I don't want to close so I don't reboot unless I have to.

I want to get another BIG monitor as well. They are getting cheaper so I want a 24" monitor for the design computer.

I think I'll cut over to an external HD for backup.

If I keep my email program open on both computers, but set the sales computer to get emails say every 31 minutes and delete the emails from the server; and the web design computer to get emails every 10 minutes but not delete from server, I will have close to a real time email on the web design computer.

This might sound extreme to some, but I effectively have two jobs. Web design and sales. If the sales computer is down I could loose a sale that is worth more than the computer. If I can't do web design, I'm not moving forward. If I don't have good backups, I could loose weeks of work.

I'm not sure exactly how I'm going to structure things yet. I do know I want hot standby, backup, and I think I want to use separate computers for design and sales.

vangogh
09-06-2008, 02:36 AM
@Joel - I like Google Analytics. I think they offer better stats than AwStats. AwStats probably over reports things since a good portion of the traffic they record is like bots. They filter out the bots they know about, but many still get through. Analytics uses JavaScript which should filter out most bots.

@Bill - About 10&#37; of my traffic comes via an Apple computer. I think it is important to be able to test especially for me since I never know who my next client might be. I have to take into account a lot of different sites.

I'd let to dedicate one computer here as a development server. I'll likely set up linux with Apache and PHP, MySQL and any other languages I want to play around with. My laptop hard drive fills up fast. I move things to an external drive, but it would be nice to have most things out on the network and be able to dedicate different computers to specific things.

billbenson
09-06-2008, 12:29 PM
I've had Apache, php, and MySql running on my pc's forever under windows. I pretty much quit using it though because I never was able to get server globals working. For example every page with a form calls itself as follows:


<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>">

If you know how to configure this to get it working, I'd love to know. It may be easier to configure this setup under Linux as well which is my intention anyway.

vangogh
09-06-2008, 05:36 PM
I can't claim to be the Apache expert. I haven't developed any forms locally so I'm not even sure if I have that same issue. I tend to send my forms to another page instead of calling them again on the same page anyway.

I think all the settings you'll want to edit are going to be in the httpd.conf file. It's located in the conf folder under the main Apache folder. If you search on the file name I think there's a lot of info online about how to set it up. I'm still learning my way around the file.

billbenson
09-06-2008, 07:10 PM
That's probably the correct file, although it might be related to the php.ini file and under windows????

When I started out, I used multiple pages with direct actions. But say you have something like this:

customer data entry form (page is custData.php action is custData.validate) ->

Validate the form (if there is a problem, action is to return to custdata.php with the fields prefilled noting the error in red) Otherwise go to enterStuffInToDb.php

enterstuffintodb.php may also have an email included form there it goes to confirmation.php

Now you have 3 or 4 pages related to one script. If you do a lousy job of naming stuff its hard to figure out whats related to what. In a year are you going to remember what confirmation.php is related to?

-----------------------------

What I do is always call the same page. That way you have one page for one program, not four or more.

Using the server globals makes it transportable to other sites.

Name your submit buttons - if isset submit1 {stuff} else (other stuff)

Etc.

I don't think one way is better than the other, but keeping everything on one page is far easier to keep organized.

vangogh
09-07-2008, 01:35 PM
Most of the form I'm using are simple. I have the form itself on one page and end it to a thank you page which has the php logic that decides what to do with the info. I'll use javascript validation just to make things easier for the person filling out the form, which should keep them on the original page until things are filled out right.

I'll always validate on the server side too with php and in the thank you page if something doesn't validate it's easy to redirect people back to the original form while still populating all the fields. It's never more than 2 pages and relatively easy to maintain. I find having everything in one file requires adding more logic to get things to work.

billbenson
09-07-2008, 02:41 PM
It's a style thing. I consider js the devil and avoid it if at all possible. Could be just because I don't know much js though :) I do notice that online bill payment sites tend to primarily validate server side only though. Dunno.

In any case, I never did get the server globals working on my pc under windows using php and mysql locally. I'll try it again on my Linux install and see if I can get that working. I can probably find more online support for that as well.

vangogh
09-07-2008, 03:14 PM
Agreed. Either way can work. js is pretty cool. You can do a lot with it to enhance the user interface. Validation still needs to be done on the server though even if you use js validation. For security you have to validate on server side.

I wish I knew the answer to the global issue. I still have a lot of learning to do when it comes to setting up servers. It's on the list though.