...

View Full Version : How Do YOU Design A Website?



Daniel_A_Varney
07-04-2011, 03:50 AM
Before anyone says it - this isn't the usual, catch all "Teach me!" query...:D

I have the design sense, the imaging skills and enough CSS to throw together a site. What I'm after is some tips from you pros on how to design for the web, because the web is such a diverse environment, compared with standard graphic design.

Because of the nature of coding and differences in software, platforms, accessibility considerations and varying technologies - I find designing for a wide audience very daunting.

As an introduction, my earliest experiments with CSS have resulted in frustration but I have also gained a lot of invaluable knowledge through trying things out... so at least I have a starting point, when it comes to basic layout and formatting. Whilst I might not need babying with code, I do need to be treated as a total 'newbie' on some things... mainly where it comes to pulling the whole thing together.

So, first, could anyone point me in the right direction when it comes to understanding what units of measurement are best for each sort of element for maximum flexibility? I currently work with EMs for sizing fonts and also for the widths of some of my elements. I have tried using EMs as a standard unit of measure throughout sites but unfortunately, this does not seem to work very well when adding graphical imaging to backgrounds, because, of course, BG images don't easily scale.

I'm rather confused at the moment because CSS seems to have so many different ways of achieving things. I normally plunge straight in and start coding from a rough Photoshop layout and the result is often very different to my original design. With practice, I have learned to be less rigid in my expectations of the finished result, so I guess this is progress...?

Secondly, there are many positioning options: relative, absolute, fixed, static, etc... and also margins and padding. I'm having a lot of trouble knowing, not so much HOW to use these, but WHERE and WHY to choose one over the other. I need some help here.

Thirdly, I am also having a lot of trouble understanding the concept of 'flow' and the real difference between inline and block level elements seems to escape me, no matter how many times I read about it. I read a lot of documents and I have also read books, but I find a lot of authors assume the reader understands these concepts before launching into more complex uses of them.

Because I have very well developed artistic skills, I feel I could be a good web designer - but it's a lack of understanding of the necessary design concepts which is holding me back at the moment. I don't think I'll ever work in web design itself (too much to learn), but for me, being able to build solid pages will be a very useful skill to support my art.

So, to start with, if anyone is up for helping me out on the above points, I'll be very grateful indeed. Hopefully, this thread might also save other beginners from running into frustrations half way through a project.

Cheers

Adrian

Sammy12
07-04-2011, 06:01 AM
These problems will resolve themselves individually with time. :)

I don't think there would be enough space to address all these problems, since most of them require large tutorials to explain. If you want to learn it on your own, gaining a strong understanding of these basics requires many months of struggle. Here's a run down of my suggestions for a beginning web developer:

a) use a fixed layout! 960-1000px; margin: auto;
b) use a sticky footer (if its less than 40px tall)
c) don't use position: absolute; to create columns, floats are where you want to be!
d) work with a partner! you learn a lot more when you work with someone on a common goal
e) take one language at a time, start with html
f) download chrome, use their "inspect element" which can detach from the bottom
g) look at a professional website's script w/ inspect element: I would suggest twitter before facebook's messy script
h) one at a time: positioning, floats, etc

shankar.adodis
07-04-2011, 07:21 AM
Hello ,

There are Wide variety of plat forms for constructing a website.

for graphic design and postioning and styling css and photoshop dream weaver is enough.

but we have server side scripts to pass the information from one form to another

for that you need to choose a server side scripts like
php or asp.net or jsp etc

simple is to choose CMS which are open source .

some of the php based CMS are

1) joomla

2) drupal

3) magento .

please make a detail analysis o this and then choose your CMS

vikram1vicky
07-04-2011, 11:03 AM
You can download CSS templates and read how they have written and can do practice on them :)

Daniel_A_Varney
07-04-2011, 05:12 PM
Thank you guys. Some very helpful suggestions here, which I will certainly try. Shankar, I don't know what you mean by 'CMS' so I think all the rest that follows must be for later. I'm still at the HTML/ CSS/ poking a box of live eels with a stick - stage.

I am on another forum where I help others improve their drawing and airbrushing skills, through examples and tutorials. That seems so easy to me, yet coming to this place makes me realise what they are feeling when they struggle with their projects.

Sammy - does the fixed layout work scale well into other devices, other than the screens of desktop computers? There are some fixed layout templates which I am tempted to try or perhaps modify for my own personal look.

I'm not sure about the 'sticky footer' because I haven't recently had one that overlaps the rest of the content.

Thank you for your help so far.

Adrian.

Sammy12
07-04-2011, 07:14 PM
Sammy - does the fixed layout work scale well into other devices, other than the screens of desktop computers? There are some fixed layout templates which I am tempted to try or perhaps modify for my own personal look.


I would suggest using a separate stylesheet for handheld. It's not as though you would use the same stylesheet if you were using a liquid layout.


<link rel="alternate" type="text/css" media="handheld" href="style/"/>




I'm not sure about the 'sticky footer' because I haven't recently had one that overlaps the rest of the content.


http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Sticky footer is pretty nice, since many times your content doesn't have enough height (ie: all the content may be is: "You need to login to view this page."). In this example, you don't have enough content to "push" the footer down. However with a sticky footer, the footer will stay at the bottom indefinetly.

http://www.ascrs.org/force-login-handler.cfm Here's an example of where the sticky footer would come in handy. Remember, that you can't use a fixed min-height or height to push the content down since the "height" is different for various computers. All the sticky footer is is setting a min-height to 100% - the footer height. I would highly suggest you check it out. It's actually really easy and simple.

Daniel_A_Varney
07-04-2011, 07:55 PM
What do you think of this...
http://matthewjamestaylor.com/blog/perfect-3-column.htm?

For now, I feel I need to work with something that I feel confident with. As for it working with i-phones, etc, I have never owned a sophisticated mobile phone, so I just have to trust what he says about that. I'm not the sort to blindly copy & paste code, so I'm hoping to learn something from using this existing layout.

Sammy12
07-04-2011, 07:58 PM
yep thats a liquid layout. A little more difficult than a fixed layout though.

alykins
07-05-2011, 04:12 PM
another note to add in, that no one has touched on yet... when you start learning scripting, you need to account for any user who may have javascript disabled... also for mobile you will want to minimize sccripts and make the page server-side "heavy".... essentially you do not want to throw a client top-heavy site on a mobile device that will not be able to handle it... this may not make too much sense now, but it will as time goes on

Daniel_A_Varney
07-05-2011, 10:38 PM
Thank you, Alyins, though I do not envisage myself ever getting into 'scripting'. It's not my forte. The website I am building is to show off my artwork and find work, which takes up nearly all of my time.

I have been wrestling for too long with floats and lists and I've had enough of it. I must have the website done by the end of this week, without fail and there just isn't time to learn all this stuff. I am thinking of using absolute positioning for my navigation and some other elements and using some floated columns below my header. I read/ hear a lot people saying you shouldn't use absolute positioning. Why is this? What sort of pitfalls do I need to look out for?

Daniel_A_Varney
07-05-2011, 10:46 PM
PS, I've been reading this:
http://kilianvalkhof.com/2008/css-xhtml/absolute-positioning-vs-floats/
and it seems to make sense. They're not saying use it for everything, which is common sense, I suppose. When I've used position absolute before, I've been able to get creative with the design almost right away, unlike using floats, margins and the like, which all too often goes wrong and saps all my creative energy.

gcmax
07-05-2011, 11:30 PM
This is a party pooper comment to this vague thread - apologies in advance!

It's impossible to give design tips on website creation when you don't have an idea in mind what your designing for. First you have to decide things before you can decide other things, like is this website going to be for mobile devices, fixed terminals or both.

Types of website
E-commerce - what kind of business?
Educational/Informational - what kind of learning?
Portfolio - what kind of job skills?
and so on...

The list of types of site goes on and within that list are a huge amount of topics, each individual one will require it's own style to reflect the content.
Personally I found the easiest way to learn is by practical example and experimentation, google is your friend if you get stuck and W3C has a validator that helps make your code more universally acceptable.

gcmax
07-05-2011, 11:36 PM
you need to account for any user who may have javascript disabled...

I keep seeing reference to this and it doesn't make much sense. What proportion of your target audience will have javascript disabled? I'm guessing it will be less than 5% and do you even want those people to visit your site?

alykins
07-06-2011, 12:18 AM
I keep seeing reference to this and it doesn't make much sense. What proportion of your target audience will have javascript disabled? I'm guessing it will be less than 5% and do you even want those people to visit your site?

i've ref'ed it a lot recently bc i usually do private apps for clients... i am beggining to branch out into personal web building... when i have a client and am building an app for them, i can control almost every part of their interaction. but this is not the case when you are building for the public (ie users you will never see). it is to maintain a degree of professionalism... if i build a site and as a representative of my company i build a site that joe-schmoe can't see bc for whatever reason he has js disabled, i make my company look stupid... the recent posts pertaining to this subject is because i am branching from private agency development to public end users-- in short im in the middle of my first "personal web page" and i've realized that the entire thing is written using scripting; looks great until you turn it off, then things go to heck and back

Edit: and it does make perfect sense... even though that population is small; you yourself can attest that there is the possibility it will happen. not taking into account these factors or forcing users to enable something or making them use a different browser is, IMO, bad practice. if it's a personal site whatever, but if you are trying to sell something or promo something, you just lost a client

Edit Edit: along these same lines it's like telling someone they are doing something "pointless" bc they check for backwards IE compatibility

Daniel_A_Varney
07-06-2011, 02:40 AM
This is a party pooper comment to this vague thread - apologies in advance!

Apology accepted. Some good tips posted in here. Nothing vague about them.


It's impossible to give design tips on website creation when you don't have an idea in mind what your designing for. First you have to decide things before you can decide other things, like is this website going to be for mobile devices, fixed terminals or both.

Types of website
E-commerce - what kind of business?
Educational/Informational - what kind of learning?
Portfolio - what kind of job skills?
and so on...

Well, I have more than just an idea of what I'm designing for. All of them, eventually...

Let me explain...

With the exception of E-commerce, at least for now. I think that can be handled via email (for the time being).
Education/ information - well, I'd like to be able to pass my skills along to a ready audience, so I was thinking the blogging sort of format would work well there - I'm hoping to be able to advertise to generate a little income, while people are getting 'free' art lessons, so to speak. So I'll no doubt need some columns...
Portfolio - well, of course! :)
and so on... Yes!



The list of types of site goes on and within that list are a huge amount of topics, each individual one will require it's own style to reflect the content.
Well, as you can imagine, from reading above - I've seen several different layout types which I feel I could use for different purposes. It's about the way I'd use them in each section of the site... Of course, I need some kind of common design thread, which keeps them all tied together visually, so all appears part of the same project.


Personally I found the easiest way to learn is by practical example and experimentation, google is your friend if you get stuck and W3C has a validator that helps make your code more universally acceptable.

Yes, I tend to use Google for ideas and use W3C Schools for code hints. And I always validate to snoop out syntax errors. However, neither the coding resources nor the validator can tell me how to actually use the code to my best advantage. And the likes of CSS Zen Garden are inspiring enough; though I can't see these guys actually doing much other than having a style competition... So that's where I'm hoping you guys come in... ;)

alykins
07-06-2011, 03:01 PM
best advice i can give, draw a picture (i know it sounds stupid) but quite honestly that is a step most colleges teach for beginning to learn programming, of any language... draw a dumb little picture of what you want it to look like- let ur imagination run wild... then come back and do the reality check of "well i guess i can't really have a site that reads my mind and displays what im thinking.... but my site can predict what I would like or what i want to see pop up next...(eg predictive text, intellisense, suggested sites, etc)... ur imagination makes the "out there" statements, then you can come back... then start using flow charts to plan out how your program will function... this won't really apply much to pure html/css but once you start making interactive-ness, flow charts are great for planning how a program will play out... best thing is to go slow and not try and rush :D

teedoff
07-06-2011, 03:12 PM
The fact of the matter is, you should NEVER design a website that relies solely on javascript for its functionality.

True, the actual percentage of ppl who choose to disable javascript may be under 5%(around 2% to 3% to be exact), but imagine amazon excluding that 3% of customers and what a hit like that would show in their financial reports. Design it with a server side language or even strict html/css and then use javascript to enhance the user experience. You can see how just 2% of a population could really cost a company like that.

Progressive enhancement (http://www.alistapart.com/articles/understandingprogressiveenhancement) addresses this concept.

alykins
07-06-2011, 03:21 PM
The fact of the matter is, you should NEVER design a website that relies solely on javascript for its functionality.

True, the actual percentage of ppl who choose to disable javascript may be under 5%(around 2% to 3% to be exact), but imagine amazon excluding that 3% of customers and what a hit like that would show in their financial reports. Design it with a server side language or even strict html/css and then use javascript to enhance the user experience. You can see how just 2% of a population could really cost a company like that.

Progressive enhancement (http://www.alistapart.com/articles/understandingprogressiveenhancement) addresses this concept.

and in addition (not to kick a dead horse, but to just further verify) I was chatting about this with my colleagues (senior architect and senior dba) and they were shocked... in US (cannot speak for other countries) 99% of all federal and local state government browsers have scripting disabled--- this is a LARGE portion of the business world if you think about where your tax dollars go; and does not even begin to touch on federal contracting agencies that span various countries (eg BAE, Northrup Grumman, Boeing, etc)

Kor
07-06-2011, 03:37 PM
1. CSS measurement units
You should first understand that em is a relative measurement unit. A font with size .5 em means it has a size half of the parentNode font's size. If the parentNode has no absolute measurement unit for its fonts, the relative proportion goes up to the body, always in searching for an absolute unit.

That drives toward 2 observation.
- You still need an absolute measurement unit, at least for the BODY root. Otherwise, the CSS interpreter will set the relative size to the default sizes of the browsers. And those are different, from browser to browser.
- em should be used only for font-size. Otherwise your site will look different in different browsers, and that is certainly not a professional way of doing the job.

As a personal advice: use always pixels (px), not em. If you still want to use em for fonts, make sure that the root node has set a font-size in px, and let all the other fonts of the child nodes to be relative to that value. But avoid using em for any other sizes, position, etc.

2. CSS position
That is a long story. Anyway, two elementary advices:
- don't set the position if there is no reason for. For instance, here's a situation when you need that: to place 2 elements one above the other it is enough to set the position:absolute for them, but a position:relative for their common direct parent.
- make sure that your element has a certain size and it is a block element before giving it a position.

3. CSS display block/inline and float

That is simple. Block elements may be sized (if they are not, they will extend horizontally on 100% of the space occupied by their parents) and they always force the next sibling element to be placed below (or they place themselves always above). The most common native block element is DIV.

Inline elements have no certain size, nor do they accept any size (they automatically extend themselves according to their inner content) and they let the other sibling inline elements to lay on the same line. Inline elements have no margins. Inline elements can not nest block elements inside. Usually inline elements are used only to nest text. The most common native inline element is SPAN.

There are also inline-block elements, but make an effort and read yourself about them.

Float will place a block element in a left or right horizontally position relative to their parent. Important: a certain float will have the same effect upon the next sibling block element. To avoid that, the sibling element (or an intermediate block element) should clear the float using the clear property.

Daniel_A_Varney
07-06-2011, 03:54 PM
Thank you, Kor. That is possibly the best piece of advice I've had so far. That has actually helped me to gain a much clearer understanding of measurement, position and float. I could have spent months, perhaps years, Googling and reading books...

vikram1vicky
07-06-2011, 03:57 PM
For detailed understanding of measurements see this (http://css-tricks.com/2580-css-font-size/) link



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum