Jump to content
Sign in to follow this  
p0is0n

learning to build web sites

Recommended Posts

Hi guys,

 

I've been trying to write this post for about an hour now and I can't clearly and concisely express everything I wanted to say without a massive wall of text that doesn't make sense. I will try to keep it short for now, and see if I get any replies, then I may have heaps more questions.

 

Over the last few weeks I have been brushing up on my HTML/CSS as I would like to get into the web development scene, and in future, possible android development, but now that I am past the basics, things just got VERY confusing.

 

I am now learning that most browsers don't support the latest standards, they alsodisplay things differently, and that to do something simple like create a gradient, it takes some fairly complicated code, as below.

 

.button {
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible; /* removes extra side padding in IE */
cursor: pointer;
border: 1px solid #999;/* IE */
border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: -moz-linear-gradient(
	center top,
	rgba(255, 255, 255, .1) 0%,
	rgba(0, 0, 0, .1) 100%
);/* FF3.6 */
background: -webkit-gradient(
	linear,
	center bottom,
	center top,
	from(rgba(0, 0, 0, .1)),
	to(rgba(255, 255, 255, .1))
);/* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}

 

I am at the stage where I feel comfortable with the basics (and some more complicated code found in tutorials, such as the code above I've been using for nice buttons) however I don't feel that I understand all of it, as the tutorials rarely explain the how or the why, just the what, and this doesn't give me confidence.

 

I think I should just pick a language and stick to it, so far I am leaning towards html5/css3 as it seems the most powerful. I want to avoid making websites full of images (eg header image, background image, button images) and want to use CSS where possible, instead of images. This is where things are getting tricky.

 

What I need is a resource that isn't out-dated and that explains some of the more advanced features of CSS and possibly ways to implement them. This includes syntax, incompatabilities with browsers, work arounds etc. I am looking for recommendations of sites, books or whatever really, if it helps I'll check it out. A

 

I am familliar with C/c++ and java, and I am honestly finding this much more confusing/difficult than any other language.

 

I want to be able to create professional grade websites, using the current standards, compatible with old and new browsers, and eventually also mobile devices. I don't want to waste my time on things I won't need to know. Can atomic point me in the right direction?

Share this post


Link to post
Share on other sites

While the latest browsers support CSS3 (and HTML5) to an extent, obviously the older ones do not and to that end you need to have a number of hacks to get gradients and rounded borders and drop shadows etc to display.

 

I usually sue CSS3PIE to IE compatibility and lean on 960gs for layout. With the use of those two I can quickly knock together a basic site.

 

I generally get by on

-moz-xyz:
-webkit-xyz:
xyz:
and the use of behavior, for css3pie. In most situations it not that complicate.

 

I would also learn more than just HTML5 and CSS3, for compatibility reasons. I don't really have any single resources except for google :) Also, don't get too discouraged. I've worked on a number of highly visible websites (ie page impressions in the millions per month) and I can't do professional grade websites alone. That's because I'm not a designer.

Share this post


Link to post
Share on other sites

Another great starting point is HTML5 Boilerplate. They include CSS normalisation, and some fixes to help dealing with older browsers as well as IE.

 

On top of that they provide tons of documentation about what they are doing and why.

Share this post


Link to post
Share on other sites

Thanks for the responces guys. Will get stuck into this again over the weekend. I guess I will keep plugging a long and maybe stick my head in with some more specific questions, or post up some samples for critique.

 

I've heard of 960gs but haven't tried to use it before, seems fairly popular though :)

 

Cheers

 

Patrick

Edited by p0is(+)n

Share this post


Link to post
Share on other sites

yeah it's piss easy to use too, just add grid_x to the appropriate div, with the occasional push_x and pull_x, and some omega and alpha, and your layout is done.

Share this post


Link to post
Share on other sites

Not meaning to come off as facetious here, but I find that "amateur" looking web sites are often due to poor visual design, sometimes (but not necessarily) paired with poor functional design.

 

You could become a grand master at html/CSS, but the disciplines of good visual design are another thing to master entirely. At the agency I work at, there isn't a single dev that covers both aspects of a project. We have an equal number of designers, in the purely visual sense, that handle that aspect of any work we do.

 

Lots of freelance web developers get a good grasp on both, so I'm sure you can get to where you need to be, but the line of thinking and planning should entail more than just choosing to master a particular language.

Edited by xfu

Share this post


Link to post
Share on other sites

xfu is correct, an amateur looking site is due to a number of factors.

 

All our sites follow the following design process:

  • Gather requirements
  • IA (information architecture) - Basic layout, functionality etc
  • Design - Visual design, colours, look and feel etc
  • HTML Cut - Actual building of the page
  • Build pages - Integration into the actual site/CMS etc
All of those stages add to the overall outcome. Edited by SledgY

Share this post


Link to post
Share on other sites

Strongly agree with the above 2 posts, but to elaborate...

 

Professional looking websites actually have nothing to do with html/css.

They are just the tools to construct them.

 

Any great website starts with great planning.

 

Planning

Researching what you want to achieve and seeing what the sites competitors websites are like.

Wire-frames focused on good layout, usability and functionality.

Sticking to a grid and screen size standards and knowing where the fold is.

Great written and image content that has real benefit and purpose.

Good visual branding and a colour palate that compliments this.

Good understanding of typography, negative or white space.

Lastly a realistic sufficient about of time to do the above.

 

They are most of the main foundations of professional website design.

 

How you construct it with html/css/scripting and graphics alone

Won't achieve what your after without the design foundations previously

Mentioned.

 

Now once you achieve all this, then you can start and look at high level building.

Again its back to fundamentals of how to approach it rather than the actual technical side.

 

Building

Keep up to date with current web standards and plan for the proposed future ones.

Design and build for the browser that is the most up to date with css 3 compliance.

Don't restrict the potential by designing/building for inferior or less compliant browsers.

Allow for graceful degradation with less compliant browsers.

Have a fall back option for less compliant browsers.

Ensure you get the right CMS (if needing one) that wont restrict the design or functionality intended.

Build content in the most optimal way possible when having to choose between graphics and code to achieve the same result.

Allow for SEO

Dont be afraid of taking ideas from other sites regarding the latest trends in functionality or visual styles.

 

Now obviously ive mentioned what you should be aware of but not explained any of them.

If you have any questions around any of these points im sure someone here including myself will be able to answer.

Or you can always google the topic for research.

Edited by moofactory

Share this post


Link to post
Share on other sites

excellent summary moofactory. We started with a basic list of some of the core technologies, then moved onto the processes used to produce a good website. There's still another bit missing, IMO the most important bit...

 

I'd like to add:

Most businesses want a website because they want to sell things. Nowdays the website is the main funnel to their sales pipeline. Developing a successful website is also about understanding your market and how your sales are generated. It's about marketing stuff, like having segmented your market and having information architecture and taxonomy that best supports the goals identified within each market segment a business has identified.

Share this post


Link to post
Share on other sites

I'd like to add:

Most businesses want a website because they want to sell things. Nowdays the website is the main funnel to their sales pipeline. Developing a successful website is also about understanding your market and how your sales are generated. It's about marketing stuff, like having segmented your market and having information architecture and taxonomy that best supports the goals identified within each market segment a business has identified.

This is a great point and is indeed the driving force behind the path of a website selling anything.

Be it a product, a service or yourself and I guess it should be pointed out selling doesn't nessisarally

Mean being paid money. You may want traffic, you may want Sub subscribers,

you may want to become famous online or want to show the world something new.

 

Indeed I should have mentioned online marketing

but I didn't want to cause the op a mind explosion .

 

BTW Kikz:

A wise man once said to me something that I now live by:

" if we have to do overtime, someone screwed up in the planning stage."

 

If I took away anything from the chatt in the office with your boss,

It would be that :D

Share this post


Link to post
Share on other sites

I know this was an old thread, but I appreciate what you've all had to contribute.

 

I think my planning and visual design is where I am currently lacking the most. I can whip up any code, but I struggle to make simple design decisions sometimes. I've taken a step back, paired up with a friend who has teh photoshop skillz and I may have something to show off eventually. :)

 

Thanks guys.

Share this post


Link to post
Share on other sites

BTW Kikz:

A wise man once said to me something that I now live by:

" if we have to do overtime, someone screwed up in the planning stage."

 

If I took away anything from the chatt in the office with your boss,

It would be that :D

Ahhh I forgot about that :D we never did fill the position.

 

That's one of the many great things about working where I work. No overtime. Well not for the non-managers (unfortunately I'm manager). Guys don't do overtime (unless they want stay back and work on stuff because it's interesting to them). Most days I'm lucky to work 7.5 hrs and we certainly don't crack the whip and make people stay off facebook/twitter/youtube.

Share this post


Link to post
Share on other sites

Ahhh I forgot about that :D we never did fill the position.

Lol.. Ive never understood that.

I figured if they were willing to fly me up I had it in the bag.

It was very confusing, I assume they still using the freelancer they had and outsourcing.

 

Im still at Harvey Norman head office heading up the ecom sites as a UX designer.

But still want out when something comes along.

Share this post


Link to post
Share on other sites

heh. dunno either. the boss was keen as. atm we use a (different) freelancer becuase there's not a whole lot of design work going on there. I think initially u were going to work on my project. now the customer does the designs. not sure tho.

Share this post


Link to post
Share on other sites

heh. dunno either. the boss was keen as. atm we use a (different) freelancer becuase there's not a whole lot of design work going on there. I think initially u were going to work on my project. now the customer does the designs. not sure tho.

Customer as in your primary client I assume.

It not surprise me if they had a bunch of in house designers to do their design material.

Oh well that sux balls. If you ever need someone im keen.

Share this post


Link to post
Share on other sites

will keep u in mind for when/if something opens up :)

Share this post


Link to post
Share on other sites

Thought I'd put this question in here instead of creating a new thread for it, since I'm still hammering away at creating websites.

 

The biggest problem I'm finding with doing this from home is the graphics side of things. I'm finding what I can actually output with the code is limited (I'm not learning CSS3 yet if that makes any difference).

 

I had a go at creating some graphics to use for some mock up sites, but it just turned me off the whole thing entirely, I actually stopped learning the development ropes because the design of the graphics resources to use in that project frustrated the crap out of me.

 

Is there a way to learn this without having to do all your own graphics and stuff? Are there resources online where I might be able to download a template or something, deconstruct it and put it all back together again using my own code? Things like headers/logos, colour templates, images, icons, dividers....

 

Seriously CBF learning both graphic design and development at the same time, need to focus on one I think because my brain is assploding.

Share this post


Link to post
Share on other sites

hire a sub-contract for the design. that's how I role. I haven't yet met a person (doesn't mean they don't exist) that's awesome at both. I'm pretty good at cutting up a design into CSS3/HTML5 (and earlier) and awesome at the serverside and javascript side, but absolute rubbish at doing anything in the likes of Photoshop. It's a completely different skillset IMO.

 

e: a good web designer doesn't just know how to do design in photoshop. They'll know HTML and CSS and they'll know browser compatiability. They'll get websafe colours and their designs wont be hard to cut up. Also, a good web designer will be good at interaction design and user experience. They'll understand where UI elements should be placed to accomplish the goals of the site, making cognitive science their bitches. (I've done enough Human Computer Interaction and cognitiive science at uni to know there's more to creating good UI's than just making it look pretty :) - I perfer the code side of things).

Edited by kikz

Share this post


Link to post
Share on other sites

Heh fair enough. Don't think I'll go for hiring a sub-contractor while I'm simply learning the ropes though... Might just have to keep stabbing away at photoshop / illustrator and just make bits and pieces here and there; guess it doesn't have to look super pretty for me to simply get my head around XHTML/CSS/Javascript :)

 

I've ordered a number of books recently on human computer interaction actually! Also a couple on 'how to think like a designer' - more theory based books rather than the typical 'photoshop for dummies' style of book. Hopefully they'll help a bit when putting together a few mock-ups for a portfolio as like you say, it's important and I'm sure employers look for this sort of thing in a designer on top of the creative ability. Thanks kikz!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×