1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

[GUIDE] General Points of Making a Website

Discussion in 'HTML & Website Design' started by Feriscool, Mar 24, 2013.

  1. #1
    1. Think about your idea. Give yourself several days to think about what your website is going to be about, how it will work, how will you attract people, why is it special, what makes it different from other websites, and how can you make money from it? These are the first key steps to building knowledge of what your website might be.
    2. Draw out your website. It's important not to dive straight into the programming part of creating a website. Grab a piece of paper and a pencil and draw out what your website could look like. Try to follow a modern design and make it user friendly. Don't like what you've drawn out? Draw another website design from scratch and keep doing that until you're comfortable with what you've got.
    3. Take that drawing and bring it into Photoshop. This step isn't necessary but I feel it helps to get a better understanding of the images you'll be using, how things should be laid out, and give it more of a "visual" appearance. You can later use these images (like the background image) when you actually program your website.
      • Some helpful websites for this step are:
        • 960.gs
        • Subtle Patterns
        • The Best Designs
    4. Program your website. This is the longest step of the entire process. There are many tools to help you if you are a beginner. If you are an advanced programmer, you won't need these tools to make your website. For the sake of keeping this thread short, I won't be making a full-on guide of how to program, but I will leave you with some very handy tutorials and tools:
      • HTML Tutorial
      • CSS Tutorial
      • Bootstrap (great for beginners)
      • Do NOT use Dreamweaver. It will teach you bad habits and you will learn little-to-nothing about design and programming.
    That's it for the guide. These are the general points of how to create a website. Along the way, you will learn many things and (hopefully) make use of the thousands of other resources you can find online.

    If you have any questions or any additions you'd like to see to this guide, leave me a reply! :)
    Feriscool, Mar 24, 2013 IP
  2. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #2
    OH ***** NO!!!

    Starting out drawing pretty pictures before you have semantic markup is back-assward half assed idiotic BS, and people are dumber for your having even SUGGESTED IT -- no matter how much the artsy fartsy types have tricked the suits into having it be the proper practice, the end result is ALWAYS an inaccessible train wreck of half-assed garbage.

    Much less suggesting HTML/CSS frameworks like blueprint, 960gs, etc, etc -- that defeats the entire point of using HTML/CSS in the first place... Most of what you are advocating are in fact the same thing as the 'bad habits' you point out about Dreamweaver. (which is really the only part of your little list I agree with)

    How NOT to build a website is more like it. My version of this goes this way:

    1) Build up content or a reasonable facsimile of what you think will go on the page

    2) mark it up semantically with zero concern for tags appearance or the final layout - if you are chosing your HTML based on what a tag looks like, you are choosing all the wrong tags. If you are adding DIV at this point unless you are REALLY sure that's how you want things grouped, you're probably doing it wrong. Build a useful and logical document structure using numbered headings in their proper orders/nesting as well as horizontal rules. (which makes most of the new HTML 5 tags like SECTION, HEADER and NAV pointless redundant bloat)

    3) bend that markup to your will using CSS to create your layoutS -- Plural because you should actually have multiple layouts served by the existing CSS MEDIA targets, as well as the new media queries providing responsive layout. You need a few extra DIV or SPAN at this point, add them with an eyedropper only as needed. Do not even THINK about using any sort of idiotic halfwit "framework". FOLLOW accessibility guidelines for color contrasts, font sizes and layouts. If you are making all your content in PX metric fonts and slapping it into some garbage fixed width, you're doing it all wrong!

    4) THEN you can start pissing around in photoshop if you REALLY feel the need... and with CSS3 on the table that need is greatly diminished.

    Vary from this at your own peril as you alienate potential visitors by the bushel. Starting out dicking around with the visual layout is putting the cart before the horse, and the road to complete and utter failure on the accessibility front.
    deathshadow, Mar 24, 2013 IP
  3. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #3
    Drawing it out before hand works for some people and doesn't work for others. For me, it worked beautifully. I drew out a rough sketch of how I wanted my pages to look and how it should be laid out. It's all personal preference. There is absolutely nothing wrong with drawing out a design.
    Feriscool, Mar 24, 2013 IP
  4. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #4
    I have NEVER seen a website built using that approach that was worth a flying purple fish on the accessibility front. See pretty much every steaming pile of **** on scam artist websites like themeForest or templateMonster.
    deathshadow, Mar 24, 2013 IP
  5. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #5
    It has nothing to do with the drawing, and it has everything to do with the mindset.

    What do you mean by "accessibility" as there are many things that could mean?
    Feriscool, Mar 24, 2013 IP
  6. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #6
    That you even ask it that way means... well, I'll be nice. Just... wow.

    What I mean is what accessibility MEANS for websites! Things set forth by guidelines like the WCAG as well as the HTML specification itself... things like the entire POINT of HTML being device neutral delivery of content with the user agent best deciding how to show the content within the limitations of the device.

    Which is to say, dynamic fonts, fluid or semi-fluid layout (with elastic max-width), legible color contrasts, proper leveraging of media targets -- and now media queries for responsive layout. Semantic markup with proper heading orders so heading navigation isn't busted (another reason to say to blazes with HTML 5's idiocy BTW) so it's useful to non SCREEN target devices... much less proper graceful degredation should some fancy bit of tech like images, CSS or Scripting be unavailable by building the site with progressive enhancement.

    What did you think I meant?!?

    Drawing a pretty picture of one static layout before you even have semantic markup of the useful content (or a reasonable facsimile -- you know content, right? The ENTIRE reason people visit websites?) is completely back-assward! People don't visit websites for goofy layout tricks, stupid animations or the graphics you hang around the content -- they visit FOR the content, so the logical approach to development is CONTENT FIRST!

    To paraphrase Steve Ballmer:
    CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! CONTENT! yes...

    Dicking around with layout for ONE TARGET (desktop screen) before you have that is just stupid, shortsighted, and I've never seen it not result in a total disaster. Trying to do multiple targets at that stage is just a waste of time given how working from a semi-fluid layout with media queries you can nab all of them in far, far less time with less effort!

    I'm so sure that starting from a picture of one's screen layout is going to be so useful to non-screen UA's.
    Last edited: Mar 24, 2013
    deathshadow, Mar 24, 2013 IP
  7. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #7
    I can't see a reason why someone would ever even think of a design without thinking about the content first and foremost.
    Feriscool, Mar 24, 2013 IP
  8. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #8
    Visit any of the template scam-sites some time (themeForest, templateMonster, etc, etc). That's pretty much all that's in there. It is quite obvious the people sleazing out some PSD and turning them into crappy off the shelf templates have no **** clue what any of my above posts even mean.

    Drawing a picture for screen first skips the step of semantic markup and logical document structure for the generic CSS-less presentation-less device neutral HTML... and once you have that, what do you need some goofy picture for on one target when you can just start working with the CSS directly?
    deathshadow, Mar 24, 2013 IP
  9. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #9
    I completely agree that the templates on themeforest and other websites completely ignore the content aspect of websites, but that's only because they have no true interest in what others do with the website in terms of content. All they focus on is how the websites looks and that's where it ends.

    If someone truly wants to make their own website with their own content, they will think of both sides of the spectrum. As I said before, it's simply the mindset.
    Feriscool, Mar 24, 2013 IP
  10. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #10
    To me it's more the techniques -- broken methodology, including making some goofy picture before you have semantic markup and a working CSS layoutS is exactly that -- broken... and it shows on every website I've ever seen built from that way of thinking.

    Though you want to call it a mindset, so be it -- it's a BROKEN mindset starting from a picture... and again I've NEVER seen a site worth a flying purple fish built using that particular mindset.

    Care to point me at one?
    deathshadow, Mar 24, 2013 IP
  11. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #11
    Let's just agree that there are multiple ways to create a website and each of us has our own methodologies to achieve that. This is the way I do it, and it's always worked for me without problems. It will work for some, and not so much for others.
    Feriscool, Mar 24, 2013 IP
  12. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #12
    ... so no, won't point me at one. TYPICAL.
    deathshadow, Mar 24, 2013 IP
  13. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #13
    No, I just don't want to waste my time here arguing with you when my opinion is my opinion. This is my method and it works great for me and I'm sure it will for others.

    Don't try to force your methodologies on others. Let people learn themselves.
    Feriscool, Mar 25, 2013 IP
  14. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #14
    The problem is that while it might work good for you as a developer, what use is it to USERS? It's not about coding for yourself (I wish it was) it's about following rules to make pages as useful to as many people as possible... Something I've never seen the 'piss around in photoshop before coding the markup and CSS' approach actually accomplish.

    You know what you said about Dreamweaver in another thread? I'm that way about "designing" in photoshop or even on paper as well.
    deathshadow, Mar 25, 2013 IP
  15. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #15
    We all have our ways at achieving things. I think you should make a guide though, I'd be interested in seeing your methods and the way you think.
    Feriscool, Mar 25, 2013 IP
  16. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #16
    See the second half of my first response for an overview of that.

    Semantic markup of the content or a reasonable facsimile of the content, since content and logical document structure should dictate markup AND layout... and if you are even THINKING about what the tag looks like by default when chosing your primary / first-pass / pre-layout markup, you are likely choosing the wrong tags for ALL the wrong reasons. Mind you at this point CONTENT images should be in the markup -- but NOT any form of presentational images like menu presentation, site logo, etc, etc.. (Most of which belong in the CSS applied with a image replacement technique like gilder-levin). A few standard containing DIV can be placed at this time (an outer wrapper since styling body for width is unreliable, a dual wrap around the primary content for content-first fluid center column with elastic side colums, etc, etc) but really that should be kept to a minimum until styling since again, at this stage we're trying to say what things are, and DIV/SPAN actually do NOT do that since they are semantically neutral. That's part of why I consider HTML 5's NAV, SECTION, ASIDE and FOOTER to be pointless/redundant bull, particularly when paired with *SHOCK* using numbered headings and horizontal rules properly. Though at least HTML 5 did finally come out and say what HR are for in semantic markup

    Use CSS to create the layoutS -- following accessibility guidelines and leveraging accessible code like %/em fonts on as much content as possible (I'll admit there are times you are FORCED into PX -- like in a 100% min-height layout's footer thanks to FF being a retard about what EM's mean, or when there's a image interaction like underneath gilder-levin), designing semi-fluid with an elastic (em) max-width so content text doesn't end up with excessively long lines while at the same time not forcing a fixed width (fixed width layouts are GARBAGE, anyone telling you otherwise is full of horse dung), using media queries to re-arrange the layout when it's too narrow for columns, or to split one column into many if there's enough room. Which is why while a PSD jockey is going to sit there for three to eight hours dicking around with 'layers' to make some five to ten different images just for one page if they bother thinking responsive layout, I can belt out the same thing from the CSS in 20 to 30 lines of code that takes two to five minutes -- most of that thinking, not typing.

    Then and ONLY THEN do you boot up a paint program like Photoshop, Pixel, Gimp or PSP for any textures or other images you want to apply around the content -- and again with CSS3 on the table this is becoming less and less necessary!

    Then and ONLY THEN do you add any desired scripting to ENHANCE the functionality -- since good scripting should enhance a page, not supplant it's functionality; hence why I think using javascript for animations is stupid pointless crap, and hate the inaccessible massive image rotating banner bull most people insist on crapping in at the top of a site where a simple "call to action" would be more useful. The only reason people seem to think those draw in users is they put their CTA's inside them -- and those CTA's would likely see higher conversions if they were just static instead of frustrating a user with "I went to click on it and it changed".

    ... and if you want to use HTML, CSS or Javascript frameworks, you're doing it ALL WRONG. In particular the halfwit nonsense of HTML/CSS frameworks like blueprint or grid, or worse the whole OOCSS concept - since they are the antithesis of separation of presentation from content, defeat the entire reason for even having CSS in the first place, and amount to little more than pointless code bloat... because throwing more code at a page ALWAYS makes it easier to maintain :p

    Just like the scripttards who throw endless pointless scripting at pages because DHTML or AJAX is 'faster' or 'uses less bandwidth' -- because throwing more code at something that's slow is going to be faster... RIGHT. What's a cubit? Maybe if they didn't have a code to content ratio in their markup of 20:1 from presentational markup, presentational use of classes and ID's, inlining STYLE, inlining static scripting, scripting doing CSS' job, and the dozens (hundreds?) of other "I can haz intarnets" inept methodologies and sloppy coding habits, they wouldn't feel the need for that extra scripting crap, extra CSS framework crap, and all the other garbage bloat!

    But, if one has a fixed width layout site, with px metric fonts on everything, with illegible color contrasts like cyan text on a white background, serif fonts on screen media, with gibberish heading orders (like say... a H3 without H2 or H1 preceding it), slapping DIV around perfectly good block level containers for no reason, using presentational classes like "left" or "red", DIV or P+B doing numbered heading's job, P+B doing CAPTION's job, TD+B doing TH's job, no SCOPE on one's TH's, FORM without FIELDSET or LABEL, and all the other endless half-assed idiocy that is commonplace on most of what people crap out for websites -- I might as well be talking an alien language.

    For the most part, the people doing what I just said for all intents and purposes still basically crapping out HTML 3.2 and until recently they were slapping 4 tranny on it and pretending their heads weren't wedged up 1997's arse. Today? They slap HTML 5's lip-service around it while still crapping out the same garbage broken inaccessible ****.

    Serious questions I'd like to hear you answer if you're not going to share links to your sites... really any developer should be asking themselves these.

    1) Is the site a fixed width?

    2) What measurement is used for fonts?

    3) Does it have responsive layout?

    4) What's your code to content ratio on the markup alone?

    5) What's the the total separate file count and total page size?

    6) Are you using the MEDIA attribute?

    7) If so, what is your primary stack for screen type targets?

    8) How well does your page work images disabled?

    9) How well does your page work CSS disabled?

    10) How well does your page work Scripting disabled/blocked?

    11) How well does your page work Plugins disabled/blocked?

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

    Let's run that past one of my sites:

    http://www.ewiusb.com

    1) No. Fixed width layouts are inaccessible trash since they most always alienate somebody -- be it too big for netbooks, handhelds or tablets, or too small for a modern desktop.

    2) % or EM except for where image replacements or image interactions are present. This way content dynamcially sizes to the user preference/OS default/browser default, saving them the time of diving for the zoom. (It's been my experience most people will go find some other site rather than zoom - in questioning it turned out most of my test group at the time didn't know browsers COULD zoom)

    3) Yes. How else am I going to serve the same CONTENT (the important part of the page) to modern smartphones, handhelds, tablets -- AND customize the appearance for the increasingly higher resolution displays as well? If you don't know what responsive layout is, view my site, and make the width of your browser narrower to see what tablets and handhelds get.

    4) 12.6k for 4.36k of plaintext, so 3:1. Pretty much anything more than 5:1 means you need to go back and learn some HTML, or you have WAY too many OPTION tags on a page.

    5) 98k in 22 files. As a rule of thumb my ideal target for a content-less template is 72k in 12 files, and I REALLY try not to exceed 144k in 24 files for a populated page. If those numbers seem really low, one has to remember there is ALWAYS a new device coming along with lower bandwidth and users under restrictions like bandwidth caps, sharing a starved connection, being billed by the byte, etc, etc. Generally speaking MOST websites have no legitimate reason to go past the numbers I just said unless you're talking about a image/video gallery page.

    6) Yes... makes no sense to be sending screen layout to everything -- particularly print.

    7) media="screen,projection,tv" -- since many Kiosks and web devices either ignore "screen" totally or in part. (see Opera in full-screen operation, or FF in Kiosk mode)

    8) CDATA shown on presentational images thanks to image replacement, ALT text shown for content images.

    9) Shows a reasonably useful layout that is heading navigable with clearly defined sections thanks to the use of semantic markup. I even threw in a 'skip around the page' menu that also gives an accesskeys menu to mobile. (open the page in Opera, hit shift-esc -- really useful when the width makes it one column!)

    10) As close to identical as possible, the page's functionality and usefulness is unaffected. Oh noes, you don't get the goofy lightbox ripoff I'm tempted to rip out of the page (though it's in a rewrite right now anyhow)

    11) Links to download flash are shown for video embeds, as well as anchors pointing at the files and/or host (Youtube in this case) -- though I don't have any on the main page, the review page for "The Sax Brothers" does have a few.

    I'd be interested to hear how one of your sites holds up to that questionnaire. As I keep saying, I've never seen a PSD jockey start from a pretty picture site that would give a 'correct' answer on more than any two of those questions.
    deathshadow, Mar 25, 2013 IP
  17. Feriscool

    Feriscool Greenhorn

    Messages:
    100
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    23
    #17
    I was not expecting a reply that big rofl. I'll have a read through. :)
    Feriscool, Mar 25, 2013 IP
  18. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #18
    You should see it when I REALLY get going. As the preacher once said I could make shorter sermons, but once I get started I get lazy about stopping.
    deathshadow, Mar 25, 2013 IP
  19. matt_62

    matt_62 Well-Known Member

    Messages:
    1,329
    Likes Received:
    275
    Best Answers:
    12
    Trophy Points:
    195
    #19
    dear deathshadow... i can only pick up one point per day and today is not your day and tomorrow is not looking good either. I shall have to re-read your mammoth rants agian later.

    Wasnt all that impressed until i resized the browser and I must say I have to take my hat off to you.
    matt_62, Mar 25, 2013 IP
  20. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #20
    A LOT of people just load once at desktop resolution and go "ho hum" or "What's so special" -- and really from a 'design' or 'artistic' standpoint it's just some off the shelf textures and silly CSS3 effects -- nothing fancy.

    But that's NOT what's so special -- It's the reaction of people who don't think in terms of accessibility, usability or functionality... or other than their screen size, or other than the default font size, or other than the OS they happen to be on, etc, etc... In other words all the things a web developer is SUPPOSED to keep in mind.

    That's really my point -- getting out of the "what's it look like on my screen" mindset and into the "How can I deliver this content to EVERYBODY" mode of thought.

    I mean all anybody seems to think of is desktop screen at 96dpi
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

    But what about different DPI, like say windows large fonts/120dpi setting. (aka windows 7/8 "medium, large now being 144 and XL being 192)
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

    or narrower displays like netbooks
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800Wide.jpg

    or tiny little displays like some tablets
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom640wide.jpg
    Notice it kills the images at really narrow widths because they don't fit

    or absolutely minuscule displays like phones.
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbTinyMobile.jpg

    Admittedly it's REALLY long, but that's where proper heading orders for heading navigation, things like accesskeys menus, etc, etc come in handy. I'd rather hand a mobile user a really long narrow stripe, than a dumbed down version of the content since as a USER, I find reduced content for mobile a little insulting.

    ... and that's ALL from one HTML file with two CSS files. (that now I'd do as one, but that's because I've refined my techniques and dropped supporting media="handheld")

    But that's just the tip of the iceberg:

    Did you check it images off?
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800WideNoImages.jpg

    More and more people are disabling images since phone data plans aren't cheap, users in places like Australia and Canada are now facing bandwidth caps and reduced or turned off services -- or worse, overages being billed, etc, etc...

    Did you check it CSS off?
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNoCSS.jpg

    Often used for the same reasons as images off, and is pretty much EXACTLY what is served to screen readers, braille readers, search engines, etc, etc... and this is why what you see there without CSS is my starting point! If you can't start there, you shouldn't start anywhere. The method is strong, everything else is wrong, it could be fragile, but I prefer agile.

    Would you like them with a mouse? Would you like them in a house? Would you eat them in a box, would you eat them with a fox?

    Graceful degradation thanks to it being built with progressive enhancement! If you build it to work FIRST as just HTML building to say what things ARE, then enhance it with CSS, then enhance it with images, then enhance it with scripting, should any of those bits and pieces go missing or be unavailable, the page is still useful.

    ... and that's called building for the user. NOT for the developers ego, NOT for the designers ego, but for the VISTORS! If you can't do that, you're in the wrong business.

    Also though, 'nothing fancy' is the hallmark of good design, since a design shouldn't distract from the CONTENT. It should draw attention TO IT. Again as I keep saying, look at the big successes of the Internet -- eBay, Amazon, Slashdot, Google, even the accessibility train wreck of javascriptard asshattery that is Facebook. NOT what one would call a visual tour-de-force. What they have is content of value, not photoshop jockey ego stroking.
    Last edited: Mar 25, 2013
    deathshadow, Mar 25, 2013 IP