We Talked with the Experts Again and This Is What Happened

Sarah Hawk

This morning we ran a Talk With The Experts session that was a bit different from ones I’ve run in the past, for a couple of reasons. Firstly, the subject was very broad, namely ‘Getting Started with Web Design’. It was aimed at people that are new to web design and need some advice and direction. Secondly, there wasn’t just one or two experts, but a whole raft of SitePoint forum staff available to answer question. It was a bit like the forums in fast forward and turned out to be hugely successful. I’m considering running a session like this every couple of months, so if you missed out today, keep an eye out for future ones. You can sign up for email reminders here.

I know that a few people had issues signing into the chatroom. Apologies for that. The software is a bit buggy but unfortunately we’re making the most of the best of a bad lot until we get the time and resource to write out own interface (which has been designed and is going to be awesome)! A tip for future sessions – if you get an error about your email address already being in use, make one up. The addresses are not recorded or used for anything so it is of no consequence.

There were a few subjects that were raised this morning, but the majority of the discussion was focussed around two subjects – responsive design (primarily for mobile devices) and then how people approach design itself.

Here is a list of resources that were mentioned in today’s session, in case you can’t be bothered filtering through the entire transcript.

Mobile (Responsive) Design
Media queries are a newish addition to CSS that let you target your styles to devices of a certain nature, such as those with a screen of a specific size. They are very handy. There’s a handy intro to them in the SitePoint Reference: http://reference.sitepoint.com/css/mediaqueries

More on media queries and redirects http://www.lukew.com/ff/entry.asp?1392

Mobile focussed frameworks http://stuffandnonsense.co.uk/projects/320andup/

Creating accessible mobile experiences http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

And our contribution to all things mobile http://www.sitepoint.com/books/mobile1/

General Design Resources for Beginners
SitePoint courses on Learnable https://learnable.com/sitepoint

Some SitePoint design books http://www.sitepoint.com/books/design2/ and http://www.sitepoint.com/books/sexy1/

DesignFestival – part of the SitePoint network http://www.sitepoint.com/

And lastly, our beginner design forum http://www.sitepoint.com/forums/forumdisplay.php?16-Getting-Started-With-Web-Design

And for those of you that are interested in exactly what went down this morning, here is the full transcript. Enjoy!

 

HAWK HAWK
This session is going to be slightly different to ones we’ve held in the past, in that there aren’t just one or two experts, but a whole raft of forum experts. I hope that it works as a bit of a free for all, with people helping each other.
HAWK HAWK
Let’s start by introducing ourselves. I’m HAWK, Community Manager for SitePoint and ex-developer. I’m based in Auckland, NZ although I obviously work for an Australian company,
It’s a long commute… ;)
StarLion StarLion
good for practicing your swimming though.
HAWK HAWK
Haha, indeed. To be fair, Air New Zealand make the commute a nice one.
Rob Rob
I’m a designer. My questions are mostly about best practices. I do mostly webmail designs that require simple code. I have art directed some site development but hand off the heavy coding to code warriors :-) My question is how to ease into site design myself, using grids, or web fonts, etc.
guido200… guido2004
I’m Guido, Community Team Advisor, based in Rome, Italy
StarLion StarLion
I’m the programmer in the corner.
HAWK HAWK
Good question @Rob. Anyone care to take it on?
MattW MattW
Matt, Junrior Web Programmer for world’s largest paintball creator/distributor
PaulOB PaulOB
Hi, I’m Paul. I’m a Team Leader on the Sitepoint Forums based in Hampshire UK. My skills are mainly css/html and little else.
HAWK HAWK
Sounds pretty cool @MattW – I’m a huge fan of paintball
MattW MattW
@Hawk, (GI Sportz) if it rings a bell. They sponsor all the pro teams, etc.
StarLion StarLion
I’m… a little confused by Rob’s question. It sounds like you already do design. What… exactly are you trying to get into?
redWheel… redWheelbarrow
Hi, redWheelbarrow here. New to webinars, but will put in my 2cents worth. I have avoided grids (non-flexible) in favor of fluid widths, but now I am pondering the best practices to include the array of mobile devices.
Rob Rob
The actual coding. JQuery. HTML 5. Stuff not usable in webmail designs.
HAWK HAWK
G’day and welcome @ralph.m. We’re currently talking about best practices.and how to ease into site design – using grids, or web fonts, etc. Any thoughts?
Nice – thanks for jumping in @redWheelbarrow
HAWK HAWK
Hi and welcome to anyone that has just joined us. Feel free to introduce yourselves and throw any questions that you have into the ring. No worries if you’d rather just lurk. You’re also encouraged to answer anyone else’s questions – this is a free for all. ;)
MattW MattW
Agreed w/Mobile concerns.. I am running into a problem. We are using a wordpress theme which is compatible for viewing on Mobile devices.. However our header logo img does NOT get resized and so it covers a huge chunk of the content when viewing on Mobile.
Rob Rob
Maybe I can simplify my question. Start with using grids. Pros. Cons?
StarLion StarLion
WYSIWYG editing is usually where i’d imagine most designers first transition… not necessarily the best way to learn (the major editors tend to use odd quirks to make things line up, not very streamlined, etc), but i’d imagine thats where a lot start off.
Georgia Georgia
Greetings! I was recently promoted at work from graphic designer to webmaster, so I’m trying to learn as much as I can as fast as I can. I’m getting a pretty good handle on CSS so far, but using px instead of % and ems. Should I concentrate on getting used to using the fluid measurements instead of the more concrete ones?
ralph.m ralph.m
Hi everyone. @Rob: it’s worth reading a good book or two about web design to make sure you have good foundations set in place. Beyond that, just start building pages! In reality, it’s quite simple (don’t tell anyone, though). It’s something that’s quite easy to do on the side, as a hobby at first, if you can’t afford to give up your day job. It’s usually pretty easy to find a friend or family member who needs a site.
PaulOB PaulOB
@redWheelbarrow. “Mobile first” is generally considered the best approach these days if mobile is important to you. Rather than catering for millions of devices you should just add media queries to cater for widths at which your design doesn’t work any more.
Barney Barney
Barney from Cuenca, Ecuador
HAWK HAWK
g’day @Barney
redWheel… redWheelbarrow
Can you elaborate more about media queries?
Barney Barney
g’day missy – thanks for having me
StarLion StarLion
That’s the trick with fluid measurements – you generally cant test every platform to see where your code is going to break (or at least, you probably wont spend a couple thousand dollars on purchasing an pc,mac,ipad,iphone, android, etc,etc,etc….
ralph.m ralph.m
@Rob. Grids can be more trouble than they are worth. I’d recommend learning how to build your layouts yourself, so that you understand the principles involved. We see a lot of problems with grids in the forums, where it would have been an easy job coding from scratch.
HAWK HAWK
@Georgia that is definitely the kind of question that @PaulOB can answer…
PaulOB PaulOB
@Georgia. As far as font-sizing goes then it is better to work in ems although you have to let go of control a little.
Georgia Georgia
@PaulOB
Sorry. thanks, PaulOB!
HAWK HAWK
For those of you that have just entered, we’re currently talking best practices
Mike Mike
ralph.m & @Rob, by Grids, are you referring to the 960 grid sort of thing or something else entirely. Full-on newbie here.
Anna Anna
yep, thanks :) didnt expect to get the answer so fast
PaulOB PaulOB
@Georgia. It can be awkward when working with ems if you are used to using px but its worth the effort and of course makes the text more scalable.
ralph.m ralph.m
@redWheelbarrow Media queries are a newish addition to CSS that let you target your styles to devices of a certain nature, such as those with a screen of a specific size. They are very handy. There’s a handy intro to them in the SitePoint Reference: http://reference.sitepoint.com/css/mediaqueries
redWheel… redWheelbarrow
Agree with using ems. Have used them successfully for years, with CSS and XHTML. My fluid sites “fit” even on the smallest Blackberry screen, but I am still concerned about usability. That’s why I would like to know more about mobile concerns.
jess.irw… jess.irwin
We changed to using ems but a motion was put forward recently that we revert back to px as that’s what someone has seen the ‘big names in web’ doing?
ralph.m ralph.m
@Mike, yes, things like the 960 grid system. There are lots ond lots of them appearing now. They do introduce a lot of complexity that’s of dubious value, IMHO.
jess.irw… jess.irwin
I personally didn’t mind ems, it didn’t make my workflow longer… but I was the only member of the team to like them I think :(
PaulOB PaulOB
@redWheelbarrow. Which specific concerns do you have with mobile?
redWheel… redWheelbarrow
Thanks, ralphM. Just caught up with your response, and will check out that link reference.
Rob Rob
@Ralph.m: Thanks. I have done. Develop page design in Pshop or Fireworks. Transfer to Dreamweaver. Massage bad code. Publish. What I don’t know are the efficiencies of building a large site, when to use templates, flash vs. html 5, grids or no grids, making sites as scalable as possible. If there is a REALLY good book for this out there lemme know where!
Barney Barney
using Amedia, is good for heavy traffic, it keeps server hits lower, but I find they are not important, like “Print” (for print friendly) – doesnt do much in savings .. just my opin….
HAWK HAWK
If you’ve just joined us, feel free to jump in with any questions that you have – or to answer any that you see.
Mike Mike
@ralph.m thanks for clarifying.
dorak dorak
Hi everyone. What do people here think makes a site look up to date and modern? Website styles have changed over the years.
Anna Anna
hey guys, I am wondering how it would be better to protect contact form from spam? have one ont he website which stays fixed through all the pages
Barney Barney
less eye candy — more real info — works for me
PaulOB PaulOB
@Jess.irwin. Designers love px because they like to control things exactly but on the web you have little control over what the user may be viewing on, with or what settings they have applied. You have to let go of control a little and let the user decide what size text they want and not force px on them. However, a lot of clients still don;t understand this.
guido200… guido2004
@Anna, how about CAPTCHA?
Georgia Georgia
Clean typography, no animated gifs spinning around, harmony of color
Mauricio… MauricioOchoa
Hi Everyone I’m from Bogotá Colombia works as a webmaster for a local tv channel, use joomla cms, and want to know more about integrating cms and responsive design
dorak dorak
What do you mean by “clean typography?’
HAWK HAWK
@dorak You could spend a bit of time checking out designfestival.com for some ideas.
redWheel… redWheelbarrow
I don’t want to try to create a different CSS layout for every present and future brand and version of mobile devices. Are there emerging standards, as there were for desktop-notebook cross-browser standards?
jess.irw… jess.irwin
@PaulOB we’re not doing responsive sites at the moment, what would you recommend we use ems for apart from font-size?
Anna Anna
captcha doesnt look stylish, does it? :) i try to integrate the contact form in whole design so I need nicer solution…
HAWK HAWK
@MauricioOchoa We’re recently run a series of Joomla articles on sitepoint.com – did you see those?
markbrow… markbrown4
redWheel, the aim is to make it resolution independent.
ralph.m ralph.m
@Rob: Site building is made a lot easier, I find, if you break it down into small tasks. Firstly, I recommend taking a look at what the site needs to do and what content it needs to present. Find a logical way to organize and present that material. This will give you your site structure, with a focus on making things easy for site visitors. It doesn’t matter so much what version of the various code languages you like, but remember that things like HTML5 and CSS3 are still in development, so need to be used with caution, if at all. But leave Flash alone. There’s no one book that covers everything, but there is a great range in the SitePoint bookstore. I recommend looking through those to start with.
Mike Mike
@dorak, also check The Web Designer’s Idea Book. Lots of good analysis of what makes good design…
Georgia Georgia
@dorak when I was in school 4-5 years ago so many of my fellow students weren’t thinking about their typography and how different fonts worked together. There are more fonts available than ever, but that just means that there can be many more design mis-steps, like using a display face as body copy…
Mauricio… MauricioOchoa
@haWKyes
PaulOB PaulOB
@redWheelbarrow. As I said above don’t think about devices so much. You need to concentrate on your own design and adapt that design so it goes from very small to very large. You don;t need to know what size the devices are as you use media queries to change your design at the point that it would break. All designs are different so be design specific and not device specific.
HAWK HAWK
How is everyone going? Any questions that have been lost in the noise and haven’t been answered?
markbrow… markbrown4
There aren’t good standard resolutions to work to with the number of devices increasing. If you optimise for major switch points like iphone, ipad in landscape and portrait as well as large screens you’re pretty well covered.
Anna Anna
yep, about captcha and sty;lish design :)
guido200… guido2004
@Anna, you could use a hidden field in the form. Normal users won’t fill it, because they don’t see it. But smart spam bots might understand the trick and not fill it in either
ralph.m ralph.m
@Anna We had a great discussion about how to protect form in the forums recently. http://www.sitepoint.com/forums/showthread.php?861648-Captcha-To-Use-Or-Not-To-Use&p=5144556&viewfull=1#post5144556 Definitely worth a read. The common path is to use CAPTCHA, but it’s truly horrible, so I don’t recommend it. There are better ways to protect a form without making life miserable for users. :-)
HAWK HAWK
Does anyone have any other suggestions for protecting online forms from spam, other than CAPTCHA. Something that looks nicer?
Mauricio… MauricioOchoa
@haWK yes I saw very useful and love to find out those good points for wordpress and joomla
Anna Anna
thanks ralph!!
Georgia Georgia
I’ve seen some sites use simple math problems to identify humans
HAWK HAWK
@MauricioOchoa Great. Do you have specific questions regarding Joomla?
@Georgia I think that would rule me out…
Anna Anna
i have no idea how this math works… seen them too
dorak dorak
According to most CAPTCHAs, I’m not really a human.
StarLion StarLion
I tend to use my own simplistic question-answer system. CAPTCHA’s been broken before.
ralph.m ralph.m
A common alternative to CAPTCHA is a hidden field used as a “honey Pot”. If a bot fills it in, the form aborts. In the forum thread I linked to above, there was an even better suggestion of a hidden filed with a timer set on it, meaning that a bot that fills in the form quickly will be shut out.
PaulOB PaulOB
@jess.irwin. You can use ems for widths but you will probvably need to set a min-max width in px to stop them expanding too much. Don’t use ems for margins because that is based on the parents font-size and therefore will be inconsistent between different elements. I prefer fluid/elastic sites where one column is fixed (either em or px) and the other column just soaks up the available space.
dorak dorak
BTW to get into this chat, I had to use a fake email address, since a real one didn’t work.
Rob Rob
@Ralph.m: Thanks. Will do. Do you have any best practices you use for maximum scalability? For different usage as well? I find that more and more I want to use say a magazine page design, transfer that to a tablet scale, then to mobile scale. Any way to make this go smoothly (ie: less work)?.
StarLion StarLion
benefit of using something you made yourself being that spam bot programmers dont have the time to write against your site specifically, so they’ll just send the spambot elsewhere, where they can get in.
HAWK HAWK
@dorak Yeah – this chat software is very very buggy. We are in the process of developing our own interface but until then, this is about the best I can find. :(
Mauricio… MauricioOchoa
@HAWK yes, using a good framework with responsive design
PaulOB PaulOB
@dorak Yes same for me -
dorak dorak
@HAWK no problem
Tekamba Tekamba
Is this the getting started with web design? is there audio? my first with the experts visit! (-:
HAWK HAWK
Does anyone have any experience using CMS integration with responsive design?
guido200… guido2004
@Tekamba no no audio
jess.irw… jess.irwin
@paulOB thanks. I don’t think I
HAWK HAWK
Hi @Tekamba Yes it is and no, there is no audio. It’s text based. :)
Tekamba Tekamba
well, guess I’ll take off my headphones then
scottmac scottmac
Hi all! I’ve been doing web design for a few years on the side for friends. I’d like to try to do it full time, but wonder A.) How practical is that? (especially since it’s just getting easier and easier for people to make their own sites) B.) Where to focus? I know HTML, CSS and the WordPress platform pretty well. I enjoy both designing and coding.
jess.irw… jess.irwin
@paulOB thanks, I don’t think I’ll win over the rest of the team though
HAWK HAWK
@Tekamba Hahaha, love it. Do you have any questions or are you happy lurking for a while?
redWheel… redWheelbarrow
Hawk, I have the same question. Will be developing a Drupal site.
Johnny_R Johnny_R
Hi,problems getting on but finally glad 2 B here. What media query min/max px sizes should I be using to cover most mobiles as I have seen various sizes mentioned and a bit confused.
ralph.m ralph.m
@Rob I’m not sure there’s a super easy way to do it. My practice is to build the page bit by bit and test it as I go. As others have said, sometimes it’s easiest to set “breakpoints” … that is, work out at what screen width you need to reorganize things and create a media rule for that.
PaulOB PaulOB
@jess.irwin. No I have clients like that and insist that it must be px :(
Tekamba Tekamba
probably be a lurker for a bit, but trust me, if I have an opinion… it will be known (-:
markbrow… markbrown4
scottmac, where are you from? opportunities would be different in each country. But I think there’s a lot of opportunity for people at all levels to work on the web.
scottmac scottmac
LA area
StarLion StarLion
If it wernt practical, there wouldnt be professional web designers.
jess.irw… jess.irwin
@paulOB Once we start going into responsive sites I think it will be easier to convert. At the moment, time doesn’t allow for fluid sites.
HAWK HAWK
@Scottmac It is definitely practical, provided you are in a position where you’re not solely reliant on the income to start with. And then my recommendation would be to pick up a language like PHP – something to give you more experience creating back ends. WordPress is a great place to start if you’re just doing low end sites, but that’s not where the money is. Having said that, I built sites using nothing more than HTML & CSS for a few years and still managed to eat.
Barney Barney
I have done somework with, ThemeId’s “Responsive (WP) .. Fonts scale pretty good when using ems, but not so well with px from monitor to ipad, and smaller
guido200… guido2004
@scottmac, I think there will always be clients, even if making a website becomes easier lots of people won’t want to/be able to make a site themselves.
markbrow… markbrown4
scottmac, you should keep learning other areas of web development so you have a broad understanding of major technologies. It’s a good idea to be an expert in one area though.
HAWK HAWK
@Johnny_R Sorry about the difficulties getting in. Perhaps I should explain those in the future in case others get caught.
Tekamba Tekamba
would also be nice to have something posted to FB or front of site with a direct link? I had to search awhile to find my way here
Georgia Georgia
I have a mobile-related question. I’ve read that you can embed a snippet of java script in the code of your page to determine what browser the user is, well, using, so that they can be automatically directed to a mobile-specific page. Does Sitepoint have any articles/instructions on how to do that?
ralph.m ralph.m
@scottmac It’s amazing how quickly you can find people wanting a website once you start. Even though it’s easier these days to get a site (often for free) those sites are not well suited to the needs of a real business. It’s like the difference between a suit off the shelf and a tailored suit. The latter fits much better, just like a tailored website fits a business much better. And that’s important for online success. So don’t give up!
dpavlovi… dpavlovic
ok , I am very brave to talk with you, i am totally newbie in design , more programing/technical oriented, so now i am playing around with one wordpress theme. Every vector /icon is from free vector repositories on internet I just use it like puzzle
so I need your comments: http://tinypic.com/view.php?pic=6z64js&s=6
PaulOB PaulOB
@scottmac. Going full time could be difficult unless you have built up a client base to keep you busy so I would try and build things up first until you have enough to keep you busy.
Lionel Lionel
Does anyone build websites within attendee registration tools, like StarCite or Cvent and have difficulty identifying the css needed to control the different pages in the flow of registration. What best practices do you apply?
redWheel… redWheelbarrow
Georgia, browser-detection is old-school.
HAWK HAWK
@dpavlovic Welcome and good on you for asking. If you want in depth reviews I would suggest posting in our Reviews Forum, which you’ll find herehttp://www.sitepoint.com/forums/forumdisplay.php?12-Website-Design-amp-Content-Reviews-amp-Critiques
scottmac scottmac
Thanks everyone! So, with my present skills of HTML/CSS/Wordpress, what are some good places to start finding work?
HAWK HAWK
@scottmac I know of people that have had some success going to small businesses in their area and asking if they have considered a web presence.
Rob Rob
@Ralph.m: Again thanks. Have you ever used any wysiwyg sw or plug-ins that could get me close to my different scale requirements with little or no code cleanup?
StarLion StarLion
hehe. Is there a holy grail?
Georgia Georgia
@redWheelbarrow Can you clarify what you mean? What methods should I be using instead?
Mike Mike
re: @scottmac’s question of where to start: what about building a WordPress theme to sell? Is that viable, as I have only curiosity and no experience in that area?
HAWK HAWK
How is everyone going? Any unanswered questions (or questions that haven’t been asked yet)?
markbrow… markbrown4
dpav, that’s probably a lot better than my first site :) Keep going. If you want to learn more about design start following designers on dribbble / twitter and learn how they work.
dpavlovi… dpavlovic
@markbrown4 thanx for comment and advice
redWheel… redWheelbarrow
You can’t detect every possible browser and browser version and platform. Use Cross-browser standards. Then your site renders in the same proportions regardless of the browser. This has worked for me for years: code to XHTML standards (or HTML5), CSS for layout as well as presentation (no tables), and ems or percentages instead of pixels.
PaulOB PaulOB
@Georgia. Unless you have the resources to maintain a separate mobile site then I wouldn’t consider sniffing the device. With media queries you can effectively cater for these devices unless you are a large company with plenty of resources then I wouldn’t try for separate sites.
markbrow… markbrown4
Mike, it’s not an avenue I’ve gone down. I know some people make a lot of money doing that but it seems like a bit of gamble to me. You’re best bet is to be working directly for clients or an employer.
ralph.m ralph.m
@RedWheelbarrow @Georgina There’s a lot of debate about whether to redirect to a mobile-specific site or just use media querires with the same site. There’s no right answer, because it often depends on the kind of site you have. For small sites, the redirection is not very practical, as you have to build two sites. But for a huge site, it may be a better option. Here’s one article I’ve seen on it: http://www.lukew.com/ff/entry.asp?1392
Rob Rob
@Ralph.m: Like I use Firebug to scale webmail designs for different platforms, web, mobile, tablet, etc.
Tekamba Tekamba
I am looking at a project (an idea of my own I’d like to pursue) that would entail SMS, receive an SMS and send back a response (while updating the database), any suggestions for SMS services? To start usage would be low (obviously) but if I am even remotely right, it could take off to thousands a month, so growth needs to be considered
Georgia Georgia
@redWheelbarrow, @PaulOB Thank you for the advice!
@ralph.m Thank you for the link!
redWheel… redWheelbarrow
ralph.m: Thanks again for your response. I would be interested in having a future webinar around these topics. Maybe George agrees.
Georgia Georgia
Definitely
ralph.m ralph.m
@Rob I haven’t used any tools for this (WYSIWYG etc.). If you really want to go that route, you are probably wanting some kind of framework. We discussed frameworks a bit earlier. There are some that are mobile-focused, like 320andup: http://stuffandnonsense.co.uk/projects/320andup/
PaulOB PaulOB
@Georgia. Have a look at this slideshow when you have time: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
HAWK HAWK
@redWheelbarrow Feel free to flick me an email (hawk@sitepoint.com) with any ideas for future session and I’ll see what I can organise.
Mike Mike
@markbrown4, thanks for the response. I’ve read a few articles/books on the theme avenue and just wondering how effective it is. There are so many themes already available, it seems you’d have to really blow them away to be successful.
kerrie00 kerrie00
Hi, My first time on a forum (I hope I’m doing this right) and I”m pretty new to web design and come without a coding / technical background. I’ve designed a few websites with lots of reading etc. but I feel like some more formal training would be a good move. Can you suggest a good starting point. I think I need something that covers most stuff just to make sure I’m developing good habits.
ralph.m ralph.m
@Georgina I know there are lots of articles out there about mobile design. I can’t find them right now, but I’m sure you’ll find a lot via Google..
Georgia Georgia
@ralph.m I shall totally do that. Thanks, Ralph!
Rob Rob
@Ralph.m: OK. Thanks. Appreciate the feedback.
Georgia Georgia
@PaulOB Thanks for the link- I bookmarked it to read tomorrow
HAWK HAWK
@kerrie00 Welcome – and yup, you’re doing this right. :) Are you interested in taking a course, or are you looking for learner’s resources to self-train?
kerrie00 kerrie00
Either would be fine.
jess.irw… jess.irwin
@PaulOB Just looked at a site I did using ems vs a site with px and increased the font size in chrome… px is certainly the way for us for now.
HAWK HAWK
@Georgia Shameless plug - http://www.sitepoint.com/books/mobile1/
PaulOB PaulOB
@kerrie00. Sitepoint does run some courses which are good (but aren’t free).https://learnable.com/sitepoint
Anna Anna
@kerrie00 sitepoint is a great resource… Ive leart there a lot, just search through, Im sure youll finв a lot
lol ))
Anna Anna
they also have amazing books
ralph.m ralph.m
@kerrie00 The great thing about web design is that it’s quite easy to teach oneself. There are good books out there (some by SitePoint) and also video courses if you prefer that. It depends a bit on how you prefer to learn. I prefer books, myself, as they tend to build foundations carefully. Start with a good book on HTML and CSS. Then have a look at PHP and JavaScript. HTML and CSS will get you a long way, though. :-)
Anna Anna
try to get a copy for yourself
HAWK HAWK
@kerrie00 As Paul says, Learnable is a great resource. For $17 per month (you can quit at any time) you get access to all the SitePoint books and online courses.
Anna Anna
@ralph.m i must type quicker)))
Tekamba Tekamba
@kerrie00 I’ve also learned a lot at Sitepoint, typically my first stop is the forums when I run into a snag, do some searches then post my question if can’t find an answer already, almost always have a few potential solutions within a few hours
PaulOB PaulOB
@jess.irwin.Not sure what you mean but I’d need to see an example of why ems weren’t working. You have to design with ems in mind.
Georgia Georgia
@HAWK wasn’t that ebook on one of the geekgames prizes? So far 90% of my learning library is sitepoint materials and learnable courses. Thanks for the deals- I am on a totally tight (read nonexistent) budget
markbrow… markbrown4
Tekamba, you’d want to do some research as there’s lots of options. Price and global SMS are two things I would check match your requirements.
HAWK HAWK
@Kerrie00 As far as actual IRL courses go, that would depend where you are based. I didn’t have any formal training but was lucky enough to learn on the job, so probably am not the most qualified to answer.
jess.irw… jess.irwin
kerrie00 kerrie00
Okay thanks. I’ve got sitepoint books. All good suggestions thanks. I’m based in Melbourne Australia. Does anyone know of any courses? distance education is fine too.
HAWK HAWK
@Georgia I imagine it was. Are you part of our Facebook and Twitter communities? I frequently give away free books as prizes for quick contests. I also give away free books on the forums for really outstanding posts.
Tekamba Tekamba
@markbrown4 Thanks, I have looked at a few, message-media.com, clickatell.com, twilio.com, and tropo.com are most likely, with Twilio and Tropo looking like decent places to start, but just curious if anyone has any direct experience with any SMS services
Anna Anna
I’d love to attend some online cources too…
Mike Mike
Along the lines of @Kerrie00′s question, would you say a design background is necessary to be a good web designer?
jess.irw… jess.irwin
@HAWK as a side note, those games are highly addictive and not a good thing in a workplace :(
Tekamba Tekamba
Learnable is a GREAT resource, I typically try to do some cramming, I’ll do a full weeks classes in 1 or maybe 2 days, you can get through a lot more quickly but requires a lot of “free” time to spend watching the vids and working through the material
HAWK HAWK
@jess.irwin Haha, I know! The great thing about working at SitePoint is that it’s considered work to be playing them ;)
Anna Anna
@mike yeah definitely!!! it is relevant to undestand the principles of beautiful design
ralph.m ralph.m
@kerrie00 You can often find things like CAE courses in this sort of thing, although they can’t necessarily go into much depth due to the time available. I looked into TAFE and other courses a while back, but realized I’d have to give up several years and a king’s ransom to do them, so decided to stick to books!
kerrie00 kerrie00
3..
..
Tekamba Tekamba
@HAWK The free books are nice… if I didn’t already own almost every title (multiples of some)
speirce speirce
I know there are courses for setting up a business facebook account (as opposed to just a personal account), but I would like one from SitePoint. There are a lot of variables, and I don’t want to do it wrong. I’m not the last person on earth (although close) that doesn’t have a business account.
Johnny_R Johnny_R
@kerrie00 Have you checked if Coursera https://www.coursera.org/ are planning anything? I’m doing their internet history course at the mo and its of a good standard and free :-)
Georgia Georgia
@HAWK I don’t know if I am or not, but I will be by midnight my time, ha ha. thanks for the heads up. I agree with Tekamba- I’ve got so many books now I wonder how many I don’t have!
Anna Anna
@mike but its easier tolearn rather than programming like php or java scripts
redWheel… redWheelbarrow
Both good visual design and layout coupled with good content organization. Content design is important, too!
HAWK HAWK
@Mike I would definitely say that a design background is useful. It is easier to learn to code than to design. But as with anything, if you apply yourself and do enough reading, you can learn.
PaulOB PaulOB
@jess.irwin. You’ve made the classic mistake of setting the height of elements that hold text in px. In most cases elements that hold text content should not have a height set as you just don’t know what size text I may have on my computer. If I have increased the dpi and set a minimum text size of 20px then your design is broken.
HAWK HAWK
ralph.m ralph.m
@Mike Your background doesn’t really matter, as there are so many aspects to web design, it’s hard to cover them all. Your background might give you an edge in some respect, which is great. I can’t design for nuts, but in that case, if the design needs some real flair, I team up with a graphic designer tfor that aspect. Likewise, you can always team up with others for anything you are not strong in. I now have friends for every aspect of web design, from designers to programmers.
Georgia Georgia
@PaulOB thanks for that, Paul- that’s something I’ll have to check for in my own designs
jess.irw… jess.irwin
@paulOB I figured that :( More learning required I think. We pretty much just went ‘we should be using ems for font, lets do that’ but didn’t think it through or anything.
HAWK HAWK
@Mike I came to development from an architecture background. I found that I applied the design aspect of architecture to sites and the transition was easy. My bf on the other hand is a brilliant coder but has NO confidence when it comes to design. It is a different way of thinking.
PaulOB PaulOB
@jess.irwin. It’s a common problem where people think more about the design than the user. There has to be compromises of course but some designs just won’t be web friendly. Forcing things into tight spaces just won’t work and you have to code/design with that in mind. It’s not always easy and we all make the same mistakes at times – especially when the client is pushing us.
Mike Mike
@anna, @HAWK, I guess I fall on the logical side so the code part isn’t as challenging as the design part (plus, I’ve had schooling on programming). I’ve no formal design training and wondering if I should.
@ralph.m, that’s good advice. Also probably a good way to learn the design side.
@HAWK, that’s kind of my problem. No confidence in my designs…
Tekamba Tekamba
I have NO design skills (as far as being able to choose what looks good) so I’ve found having someone “artistic” around me to recommend colors, and design ideas has been a HUGE benefit, sometimes them NOT knowing HTML/CSS is also a plus as their thinking isn’t tinted by “that can’t be done” thoughts, they just know what they want and usually it just takes a little finagling to make their vision come to life, sometimes I originally thought I couldn’t do what they wanted
redWheel… redWheelbarrow
To quote web guru Zelman: “Content informs design; design without content is decoration. “
HAWK HAWK
@Mike I’d start by reading a couple of design books. The next book that we’re releasing (out later this month) is on the design process. It might be a good place to start. There are some very logical aspects to design that some people don’t realise. Once you understand the process, the more intuitive things fall into place.
PaulOB PaulOB
@redWheelbarrow. Good quote.
Anna Anna
@mike I have technical background and have leart design principles on my own just from such resources like sitepoint. design has logic and if you know programming, youll be able to understand it too
Mike Mike
@redWheelbarrow – love the quote! So zen-like.
ralph.m ralph.m
@Mike The other thing I do is look at designs I really like and study them. Its a great way to learn. One things that helps with design is looking first at the content and what it needs. That makes it easy to develop a wireframe … and from there, your design is almost done. It’s not hard from this point to add some nice color and a few graphics. It may me ‘meat and potatoes’ design, but it’s fine in a lot of cases.
redWheel… redWheelbarrow
Sorry for the typo. His name is Zeldman.
Tekamba Tekamba
@HAWK Oh oh oh!!! New books!!! Love receiving a Sitepoint package (and I don’t have to wait for it to start reading by getting the ebook pack (-:
guido200… guido2004
” There are some very logical aspects to design that some people don’t realise.” I’m one of them for sure :D
ralph.m ralph.m
SitePoint also has some nice books of design, such as http://www.sitepoint.com/books/design2/
Tekamba Tekamba
@HAWK idea on release date?
kerrie00 kerrie00
I’m really enjoying this forum. thanks for all the suggestions. Just how would everyone recommend you make contact with a good graphical designer for the web. Or any suggestion son great resurces to learn more about design for the web?
ralph.m ralph.m
Another one is Sexy Web Design: http://www.sitepoint.com/books/sexy1/
redWheel… redWheelbarrow
Before web design, I did newsletters, and I’ve found that the same basic layout principles work well. Use a font that is easy to read, include some line height to keep the lines from being too close. Use generous amounts of white space. Keep backgrounds, and graphics in general, from being too busy. Any graphic elements should complement the content.
speirce speirce
kerrie: by careful with graphic designers. Some do not know web, only print. Big difference!
HAWK HAWK
@tekamba Tentatively (but don’t quote me) 27 August for the print book and prob a week earlier for the ePack
Tekamba Tekamba
@HAWK OK, quoted, if it’s not out on 27th you will hear from my lawyers!! :-P
ServerSt… ServerStorm
@Mike When studying other design be sure you get knowledgeable about C.S.S. as some things that look really good don’t employ good HTML or C.S.S.
Georgia Georgia
@kerrie00 What I do is find websites I admire for their design, layout, etc. and look at the footer to see who designed the site. Usually there’s a link back to a homepage or portfolio site. Word of mouth works for me, too
ralph.m ralph.m
@kerrie00 There are lots of graphic designers in Melbourne. If you have a project for them to work on / collaborate with, I’m sure they will be happy to hear from you!
Anna Anna
cool, just got sample of Sexy Web Design.. will read it tmrrw during the morning session)))
Mike Mike
@Anna, @ralph.m, I have been reading a lot on design lately and finding that the way I observe things is changing. I have several books from sitepoint but mostly on the tech side. I’ve found the book “The Design of Everyday Things” to have really opened my eyes.
@ServerStorm, YES! I have found too often that a design I like is laid out with tables!
HAWK HAWK
We have just over 5 mins left in the session (although you’re welcome to stick around as long as you like). Does anyone have questions that they haven’t asked yet?
And out of curiosity, how did you find this session? It’s a bit different from the ones that we usually run.
PaulOB PaulOB
@kerrie00. There are some good design articles at Design Festival: http://www.sitepoint.com/ (It’s part of sitepoint).
Anna Anna
@mike get this one the Principles of beautiful webdesign
Tekamba Tekamba
@Mike Design of Everyday Things – by Donald A. Norman?
HAWK HAWK
And for anyone that wants to sign up for email reminders of future sessions, you can do so herehttps://www.facebook.com/sitepoint/app_115462065200508
ServerSt… ServerStorm
Tools such as FireFox’s firebug, and Opera’s DragonFly or Chrome’s Console or Firebug light can be used to inspect what is happening with the HTML, CSS rules and even the Javascript. You can learn quite a lot by open these type of tools on pages that you like
HAWK HAWK
And I’ll be posting the transcript for this session up on sitepoint.com later today (my time)
Anna Anna
@HAWK thanks a lot for great chat!!!
Mike Mike
@Tekamba, Correct. It can get a bit too technical but I’ve learned a lot from it.
Georgia Georgia
@HAWK I must have liked sitepoint on facebook, because that is where I saw your post about it. It was difficult trying to find my way here, though, so I went back and signed up for the email reminders. This has done me a world of good!
Barney Barney
Thanks to all
Tekamba Tekamba
@HAWK any chance of some software that would allow threads for easier tracking of topics? would be a little tough real time, but just a thought
speirce speirce
I found it from Sitepoint e-newsletter
HAWK HAWK
@Anna You’re welcome. @Tekamba We have a great new interface designed, but it’ll take some developing.
Tekamba Tekamba
@mike Placing my Amazon order, thanks for the tip
Mike Mike
@HAWK, email reminder worked well for me.
Tekamba Tekamba
signing up for the email reminders, I almost forgot though I remembered all morning just didn’t realize what time was so email just a little before start would be nice
Mike Mike
@Tekamba Glad to be helpful! I hope you enjoy it, too.
ServerSt… ServerStorm
@HAWK email also worked good for me
Anna Anna
Thank you all, guys! I ve found many interesting things in this chat room… hope to “see” ya again! :) ciao!
jess.irw… jess.irwin
See you all next time :)
ralph.m ralph.m
Bye Anna. :-)
HAWK HAWK
See ya
scottmac scottmac
Thanks everyone! I really enjoyed this.
Mike Mike
Likewise! Thanks for all the advice!
ServerSt… ServerStorm
bye jess, Anna, scottmac, and Mike
Tekamba Tekamba
Thanks everyone! @HAWK I’ll be watching for that book, love new reading material! I’ll have to finish @Mike suggestion before end of month
dorak dorak
Thanks I will check out the Beautiful Web Design book.
ralph.m ralph.m
If anyone has more questions, please head over to the SitePoint forums. We can go into a lot more depth there with answers and discussions. And there’s even a Getting Started with Web Deisgn forum there. :-)
HAWK HAWK
Glad you all got something out of this. Would you be interested if I ran this kind of session on a 2 monthly basis?
HAWK HAWK
kerrie00 kerrie00
Thanks everyone!
ServerSt… ServerStorm
See you around sitepoint.com/forums kerrie00
kerrie00 kerrie00
A regular forum like this good be great!
HAWK HAWK
And to all my forum staff here, thanks. You guys make my job a pleasure.
Mike Mike
Yes, good one @ralph.m
ralph.m ralph.m
@HAWK Thanks Sarah. This was fun! :-)

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.