Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post

    How Do YOU Design A Website?

    Before anyone says it - this isn't the usual, catch all "Teach me!" query...

    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
    Last edited by Daniel_A_Varney; 07-04-2011 at 03:03 AM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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
    Last edited by Sammy12; 07-04-2011 at 05:16 AM.

  • The Following 2 Users Say Thank You to Sammy12 For This Useful Post:

    Daniel_A_Varney (07-04-2011), Msuth (07-04-2011)

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You can download CSS templates and read how they have written and can do practice on them

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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.
    Last edited by Daniel_A_Varney; 07-04-2011 at 04:21 PM.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Daniel_A_Varney View Post
    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.
    Code:
    <link rel="alternate" type="text/css" media="handheld" href="style/"/>
    Quote Originally Posted by Daniel_A_Varney View Post
    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...ottom-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.
    Last edited by Sammy12; 07-04-2011 at 06:18 PM.

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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.

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yep thats a liquid layout. A little more difficult than a fixed layout though.

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,740
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    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?

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    PS, I've been reading this:
    http://kilianvalkhof.com/2008/css-xh...ing-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.
    Last edited by Daniel_A_Varney; 07-05-2011 at 09:49 PM.

  • #12
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts
    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.
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #13
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by alykins View Post
    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?
    ---------------------------------
    website: www.gcmax.co.uk
    webmail: stevenbell@gcmax.co.uk
    ---------------------------------

  • #14
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,740
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by gcmax View Post
    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
    Last edited by alykins; 07-05-2011 at 11:26 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    Daniel_A_Varney (07-06-2011)

  • #15
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by gcmax View Post
    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.

    Quote Originally Posted by gcmax
    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!


    Quote Originally Posted by gcmax
    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.

    Quote Originally Posted by gcmax
    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...
    Last edited by Daniel_A_Varney; 07-06-2011 at 05:02 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •