Learning web design advice for a newbie in 2013...

6sigma · 2013-01-24 19:00:03

In a couple of hours I’m meeting with a couple of folks who want to know how to get started in web design. They’ve not been through all the tables, valid XHTML, standards wars, etc., of the past. Rather, they’re starting from where we are right now.

In 2013 what are the Web design tools, extensions and apps that a Windows & Chrome user should have to learn HTML & CSS from scratch?
What are the best resources for a beginner to use for learning the “right” way to build/modify sites?
How does one check that a new site is “valid/responsive/whatever else” it’s supposed to be nowadays?

Thanks for any tips.

(edited to add: If this is not a good place for these types of questions, please let me know a better place. Again, thanks.)

Last edited by 6sigma (2013-01-24 19:02:33)

uli · 2013-01-24 19:06:54

The most enormous progress I’ve made personally by learning from analysing other people’s code with Firebug and validating my code with the ~~Total~~ HTML Validator FF plugin.

Edit: HTML Validator is so unobtrusive I didn’t even remember its name.

Last edited by uli (2013-01-24 19:21:49)

uli · 2013-01-24 19:08:08

6sigma wrote:

If this is not a good place for these types of questions, please let me know a better place.

Perfect here! :)

6sigma · 2013-01-24 19:13:40

uli wrote:

The most enormous progress I’ve made personally by learning from analysing other people’s code with Firebug and validating my code with the Total Validator FF plugin.

Thanks. I’ve not dealt with FF or Firebug since switching to Chrome. I’ll take a look.

philwareham · 2013-01-24 21:46:23

As said above, the web inspector in Chrome (or Firebug or Firefox’s native inspector) are a god-send when developing. I don’t know how we coped without them(actually I do – it was painful).

Other than that…

following industry people on twitter – they always offer up bits of code and techniques.
scouring GitHub for handy projects, it’s amazing what people offer up for free.
dissecting other people’s sites from their source code.
buying the complete series of A Book Apart books.
read Smashing Magazine
attend any local web meetups and get talking to others in the biz locally.

joebaich · 2013-01-25 00:09:49

Here are some words, reproduced verbatim that I passed on to an old friend who sought advice for his son (the Steve in the script) who was keen to become a web designer after graduating from a college in Belgium.

I wish Steve good fortune in his endeavour.

Getting a Start

As Steve will be acutely aware, getting a start as a web designer is pretty much a chicken and egg situation. One must have a portfolio of sites to show potential customers and employers, yet one can’t build up a portfolio without getting work from customers and employers. So, start by building a couple of personal sites and look for pro bono clients. A good pro bono client is one who has good content and good ideas waiting to be used by you.

Look around the web sites of local businesses for sites built in Flash. Find a way to meet the owners of these sites and explain to them the shortcomings of Flash with Google and the other search engines. Have a print out of the source code from the Flash site and a rival’s HTML site to hand. Have the clear sections of text marked up in the latter including that contained in the relevant meta tags. Challenge the owner of the Flash site to show you what Google has to index on his/her site. Be ready to offer to build a HTML / CSS3 / Javascript based site that does all the ‘Flashy’ things but better. Obviously, that wouldn’t be pro bono work but, in some cases you might want to consider taking payment in kind. See the site of a restaurant local to where I live as a prime example of what I mean about Flash sites with no indexable content.

Being on the Cutting Edge

A web designer has to be comfortable with new and emerging technologies. Steve, if you use Adobe Dreamweaver to build sites, throw it away and get yourself thoroughly familiar with the likes of HTML5 Boilerplate, Twitter Bootstrap and Zurb Foundation. Also, if you don’t know already, learn how to use jQuery plugins on a site, perhaps also a Mootools plugin too. Learn how to write some basic jQuery code to do simple things like changing or adding a CSS Class to an HTML element.

Content Management Systems (CMS)

Invest time and effort in mastering a couple of the many content management systems. As a designer you should aim for the designer centric CMS as opposed to developer or coder centric systems. Expression Engine (EE) is the fashionable designer friendly CMS but it isn’t cheap and adds to the initial and downstream cost of a site. You might like to look at Processwire which many EE users are turning towards. It’s free and has a good community supporting it. You may also like to look at Textpattern which I use more often than not. It’s fast, flexible and lightweight and has a great friendly and supportive community around it. By all means listen to opinions on CMS, you have just read mine, but the important thing is to make up your own mind about what suits you. None of them are particularly easy to learn and persistence is required. Probably you want to avoid Wordpress, it offers near instant gratification but relies on neat PHP to deal with design and development beyond the basics.

Biting off More than You Can Chew

You have to be prepared to bite off a little more than you can chew. All designers take on projects that have aspects that they do not have a clue about. One just has to research and seek assistance to get these things done.

Communities

Twitter – If not already doing so, consider subscribing to these developers/designers who provide great advice and insight. @Malarkey,@speckyboy, @chrisspooner, @zeldman, @naomisusi, @beep, @boagworld, @cameronmoll, @vpieters, @netmag, @onextrapixel, @Cennydd, @jonikorpi, @jontangerine, @snookca, @typographica, @patterntap, @Cabel, @paul_irish, @kevinpotts, @AaronGustafson, @meyerweb, ‏@csswizardry, ‏@nathansmith, @codeylindley, @chriscoyier.

Attend web design seminars and other events in Belgium, France and in the UK. It’s not inexpensive to do this, but is a good investment and a great opportunity to meet people that can help/employ you.

Languages

Being fluent in a couple of languages is a marvellous thing because it widens the pool of contacts and potential clients and employers for you enormously. Generally though, most folk, including me, would want to use a professional translation agency to translate web site content. It’s makes complete sense to get a native speaker translating into his/her language rather than relying on someone who is fluent in the target language as a second or third language. A good translation agency will pass the translated texts to second native speaker to carry out quality control too. I have used Apex Translations in the past and would do so again. Their rate is 18 cents per unique word in a text. They are based in an unlovely part of N Carolina where it’s inexpensive to run an office but use translators from all over the world.

{Edited to add small Textile enhancements for all the @s. – Uli}

{VMT Uli. – Joe}

Last edited by joebaich (2013-01-25 12:57:18)

6sigma · 2013-01-25 03:27:19

Wow, Joe. Every student should be so lucky to receive advice like yours. That’s one of best and most actionable set of suggestions I’ve ever seen for those looking for a syllabus for web design. I’m passing it along. Thanks very much.

maratnugmanov · 2013-02-25 14:44:08

I think you should install browsers on this list (excluding IE if you running MacOS and Safari if you’re on PC):
- Google Chrome (great dev tools);
- Firefox with Firebug add-on(great tools too);
- Safari (to test Mac’s antialiasing);
- Opera;
- IE 9/10 (they have dev tools with IE7, IE8 browser’s compatibility mode).
Then start looking various sites’ code via Dev Tools (right click – inspect element);
This sites have a very good article library on all kinds of questions:
- html5doctor.com;
- css-tricks.com;
- stackoverflow.com.

Last edited by maratnugmanov (2013-02-25 14:46:05)

Textpattern CMS

Textpattern CMS support forum

#1 2013-01-24 19:00:03

Learning web design advice for a newbie in 2013...

#2 2013-01-24 19:06:54

Re: Learning web design advice for a newbie in 2013...

#3 2013-01-24 19:08:08

Re: Learning web design advice for a newbie in 2013...

#4 2013-01-24 19:13:40

Re: Learning web design advice for a newbie in 2013...

#5 2013-01-24 21:46:23

Re: Learning web design advice for a newbie in 2013...

#6 2013-01-25 00:09:49

Re: Learning web design advice for a newbie in 2013...

#7 2013-01-25 03:27:19

Re: Learning web design advice for a newbie in 2013...

#8 2013-02-25 14:44:08

Re: Learning web design advice for a newbie in 2013...

Board footer