Web Pet Peeves Lecture from 2008
•Download as PPT, PDF•
0 likes•295 views
Stumbled across this lecture I gave to a college web design class back in early 2008. The old branding, examples, and notes made me laugh out loud, but most of the advice is as relevant today as it was back then.
Recommended
More Related Content
Similar to Web Pet Peeves Lecture from 2008
Similar to Web Pet Peeves Lecture from 2008 (20)
Recently uploaded
Recently uploaded (20)
Web Pet Peeves Lecture from 2008
- 1. Hallo.
- 2. Herr Mynett wird in Deutschland getrunken. Deutschland getrunken.
- 3. An Heuristic Analysis of Free Online Pornography Free Online Pornography
- 4. Web Pet Peeves and Other Rants and Other Rants
- 5. <bullshit>I am an awesome coder</bullshit>
- 6. This is me.
- 7. This is my website.
- 8. This is my blog.
- 9. These are my eyes.
- 10. You can just call me Busse.
- 11. Let’s talk about HTML.
- 12. Start with a brief.
- 13. A good coder is always be ready to be hit by a bus.
- 14. Be the audience.
- 15. You’re not the audience.
- 18. Agile development is a lie.
- 20. Flash rocks.
- 22. Flash sucks.
- 24. Meta my ass.
- 29. Whose server is this, anyway?
- 30. You will break it.
- 32. Good web takes time.
- 35. Where am I? I wanna go home.
- 37. Boing! Pop! Huh?
- 38. Study usability and user experience.
- 39. Show them.
- 41. Avoid using Lorem Ipsum
- 43. Web fonts doesn’t mean bad typography. bad typography.
- 45. What does that say?
- 48. I wish I could zoom in.
- 51. I already have iTunes and YouTube, thanks.
- 55. Are you a web designer or hosting company?
- 56. Make it work.
- 58. Y’all got a big pipe.
- 59. That sucks.
- 64. Step away from the screen.
- 66. Wireframes are your friend.
- 68. Are you doing an illustration?
- 69. Backgrounds can be lovely.
- 72. Get fast...
- 75. Write goodly.
- 76. The computer screen is already obsolete. is already obsolete.
- 78. Good web design is good design. is good design.
- 82. Break
- 83. Case Study
Editor's Notes
- Anyone speak a little German? I am filling in for Mr. Mynett, who’s likely pickled in quality German beer by now.
- Today I’ll be presenting a lecture about...oops. Wrong presentation.
- There we go.
- Why am I lecturing in a web development class? Good question. Well, I thought I’d share some thoughts and advice on issues I see all the time—minor things that happen in the development of a website that you should know and make part of your methodology should you decide to do this professionally. I hope most of these things seem obvious to you or have already been touched on in your time here, but I think hearing it from a 10 year veteran of this process is good. I hope you agree. And if time allows, I’ll also be presenting a case study on a large branding, interface design and development project Steve and I have been working on for the past couple months. Hopefully it will reinforce some of my ranting. But first, who am I exactly?
- My name is Mark Busse and besides being Steve’s boss as Founder and Design Director of Industrial Brand, I am the President of The BC Chapter of GDC, a Board Member of Vancouver ACM SIGGRAPH and educator at local design schools.
- And yes, it is coded using Flash—more on that later. Some of my recent clients include Best Buy, CMHC, Future Shop, Granville Island Brewing, Future Shop, Hemlock Printers, La Scala, Ledalite, Mercury Filmworks, Nokia, Rocky Mountain Production, SFU, Telus, Toyota and UBC, among many others.
- If you don’t get enough of my ranting today, you can check out my blog for hours of fun. Note: this site is HTML with CSS on a CMS platform. Aren’t acronyms fun?
- These are indeed the inside of my eyes. Cool, huh.
- Until after highschool, many people didn’t even know my first name was Mark.
- How about let’s not. Let’s also not talk about how to resize and optimize images or make GIFs thank you. Instead, I am going to quickly run through some of my pet peeves and some ideas you may benefit from. If they contradict stuff previously taught or are things you already know, I apologize in advance, but this is my chance to make sure you’ve heard this from someone who’s done this for a long time. It was this or Johnathon teaching the class. :-)
- If your client can’t compose a simple expression of their goals, objectives, audience, their needs, etc, then how are you going to judge success? (Show Yaaway brief)
- Research, plan, scope, stick to it. Get organized. Consider your naming nomenclature. Make back ups. Suggestion: use an online backup system so it’s off site.
- If you can’t honestly say you have clarity about who the user base will be, don’t assume. Find out. Go talk to them. Work with your client to develop a persona for the audience and role play user stories. And beyond things like their attitudes and preferences, try to accurate predict their browsing environment and develop with that in mind (i.e. 800 x 600 is only 3% while 1024 x 768 is 32% and 1280 x 1024 is 37% - why do people insist on developing for 800 x 600?)
- Shut up. This isn’t about you. Save that for your own website—although even THAT isn’t about you either. Keep your mouth shut and look for solutions to the client’s and audience’s problems. If it isn’t clear, ask more questions.
- The “agile” approach of skipping all the charts, schematics, wireframes, etc and focussing on being flexible, fast and loose and learning constantly as you go can be a terrific approach once you’re an expert.
- Read 37signals’ book Getting Real.
- Well, OK. Not a lie, but be cautious of those who just wing it in favour of careful planning, clear communications and methodologies. Just diving in, launching early, tweaking as you go and flying by the seat of your pants WILL eventually fail you—and may be very costly. And having a well defined process will save you. Example: Nokia mobile advertising.
- Ouch. This one hurts. This was a huge project for Nokia that IMHO failed because we engaged in an agile development approach which backfired.
- Want animation and an platform-independent and easy-to-code environment for a website? Flash baby!
- An exception to the intro rule? Perhaps as it says something about who we are and what we do. It also acts as a pre-loader.
- Want to make downloads slower, require plugin compatibility, make a site virtually invisible to search engines, render text & windows not resizable, make subpages and permalinks awkward and make the site difficult for the client to maintain or update? Flash baby! NOTE: flash can be very powerful as a component of a site and with dynamic content is improving, just go easy and make sure you chose Flash for a reason, not just because you can. (regretful example: gdc.net/graphex)
- International Home Fashions - what is the purpose of this intro? If you MUST have an intro, then it should be to say something about the brand message or tell a story.
- Please use meta tags, page titles and register your sites with the search engines. And consider including short descriptions in page titles. It may not be full-on SEO, but it’s the right thing to do.
- Please don’t make me say “Less is more.” Oh shit. There, I said it. But remember, as great as simplicity is, sometimes less is too little. Don’t fight for minimalism and start quoting Bauhaus crap if there isn’t a real need for it driven by the audience and brand message. (show canada.com or newyorktimes.com example and then Rethink.com example. Kanto and Delibato good examples)
- Rethink - gotta say: they went too far.
- Davedelibato.com - better
- The Brown Corporation - ridiculous product, great website
- Get early access to the actual host server and work from there as soon as possible. Don’t get it all dialed in, only to discover the version of PHP or MySQL on their box is different and difficult to change. Confirm the Apache install, how to set up DBs, permissions, where files go, etc.
- Iterate with a backup plan. Use a development environment, staging environment and live environment. Be ready to fall back if bug fixes cause more bugs. Suggestion: Use a system like TRAC & SUBVERSION or REDMINE for bugs and version control.
- But know it will happen. It’s inevitable. One “simple” change may have a cascade effect. Never assume it’ll be a no brainer and allow adequate time.
- I don’t care if you coded your mom’s blog in four hours or did a whole website in a weekend. They both suck and the kind of web you WANT to be working on takes time. Fight for it and convince your clients to give you time to percolate as well as time to research, plan, organize, document, write good code and TEST.
- For god’s sake, check it on various platforms and browsers. Use your friends as guinea pigs and watch them interact with the site! (Yaaway example - developers in Atlanta hadn’t tested on Mac yet)
- Use sites like www.browsercam.com or www.browsershots.com.
- Facilitate clear indications of where a user is in the site. Not everyone knows a logo is the home link! Provide a home button. And avoid “mystery meat” navigation.
- Example of baffling navigation design. Duff may be able to make good cakes, but his website is confusing.
- If pop ups, new windows on click or browser resizes are so great, why do all the latest browsers block them? No pop ups! And I’ll open a link in a new page or make the browser fullscreen if I want, thank you.
- Have you read Bill Moggridge’s Designing Interactions yet? Do it today.
- Don’t assume clients—or even designers or art directors—will be able to envision what you are talking about: show them. Send proofs in situ so they see it live, online in a browser (www.industrialbrand.com/CLIENTS/yaaway)
- We’ll see more of this later.
- Avoid using Lorem Ipsum as placeholder text in favour of designing around real content. Using Lorem Ipsum isn’t creating a *real* user experience and may be forgotten, running the risk of launching a website filled with gibberish.
- No joke folks. This is a friend’s site and it has been live for two years with Lorem Ipsum for his bio copy. How easy would it have been to put a real bio here. Dumb. NOTE also the URL http://new.qbprint.ca/node/13 - this really should have been a human readable permalink, such as http://new.qbprint.ca/behind_qb.
- Straight up web safe fonts using CSS baby. Small headline = font-family: Gill Sans, Verdana; Large Headline = font-family: times, Times New Roman, times-roman, georgia, serif;
- Bad font choices, small type or low contrast are common boo boos. Don’t make this mistake—make your text easy to read. If it doesn’t survive the squint test, fix it. And learn the basics of typesetting—they are just as relevant here as they are in print. For example, long line lengths cause eye strain and decrease readability.
- Wanna go to Game Aquarium? I don’t.
- How about the old Microsoft site? Classic low contrast woes.
- If your site design doesn’t afford room for large images, but products or photos are key communicators, then build in the functionality to enlarge the images so the viewer can take a closer look. We often use Lightbox JS, which is a simple, unobtrusive script used to overlay images on the current page. http://www.huddletogether.com/projects/lightbox/
- meja.ca - required larger images of their projects, so we used Lightbox
- Davedelibato.com - another way of handling larger images using thumbnails in WP linked to the full sized images.
- I don’t need a website that plays music, thanks. And if you MUST have a video auto-play on the site, set it up to do it on first visit and not repeat visits via cookies. If the site has a mute button or “skip” button, something is likely wrong.
- VFS.com - an acceptable exception? Auto play video first visit only.
- Don’t create sites with a “News” sections if it’s not really needed, your client isn’t committed to keeping it fresh or they aren’t able to update the page. There’s a new thing called CMS, learn how to use one.
- Especially if you’re providing coding for a design firm. How do they work? Do they need working files? Are there confidentiality issues? Are you even allowed to take credit for the work you did?
- Don’t try to do everything—regardless of how tempting it is to get monthly fees for hosting a site. The responsibility will yours to keep it up.
- Old school works. Don’t follow what everyone else is doing and avoid trying to fix what ain’t broke. And don’t try to be an innovator (yet anyway). There are so many variables and technical limitations—be flexible and work within the basics. If you want people to know it’s a link, then use hinted text and make it obvious it’s clickable (i.e coloured & underlined).
- Capstone Publishing - don’t try to re-invent navigation. You’ll just confuse people.
- If you assume everyone has a web connection as fast as yours, you’re a fool. The majority of the world is still on slow connections like dial up. So strive to create tiny website to reduce load time. And use intelligent techniques such as dynamically loading menu/nav items using PHP so you have only one file to update.
- Browsing all the wonderful “best of” lists and award-winners is great, but consider looking at BAD websites and learn from them.
- Check out www.webpagesthatsuck.com
- Lovely code is gorgeous. And well commented and organized code is much easier to understand and update when you (or someone else) needs to make changes six months later.
- Ryan Ilg - Langara EMD Graduate
- Super clean code.
- Get off your computer and consider the problem as a spatial one.
- Grab your sharpie and draw. Plan. Consider the content and space with client objectives and audience needs in mind.
- All the previous stuff should be obvious to you. If not, you have some work ahead of you. If I had my way I’d make you draw grids and wireframes each class for an entire term before turning you loose on any code.
- It’s all about usability folks. Web is not just pretty graphics or cool tricks. Your final templates should be pixel-for-pixel swaps for your carefully planned wireframes.
- Then why are you laying out web pages in Adobe Illustrator? We’re striving for precise pixels here folks—use Photoshop or Fireworks. This is huge.
- I disagree that backgrounds should be unnoticeable. While primarily a framing element behind text and images, I think backgrounds are a powerful way to add tone, emotion and style to a website when used with care and with reserve. Add to that some consistent graphics element from page to page and you can create a “sense of place”. But for god sack, avoid using image backgrounds.
- Dave Shea (CSS Zen Garden) - excellent use of subtle backgrounds
- Dave Shea (CSS Zen Garden) - excellent use of subtle backgrounds
- Learn shortcuts. Find resources and tools. Create a methodology that allows you to differentiate yourself as a fast, accurate and dependable developer. And start collecting code, images, objects, etc so you can quickly solve repeat challenges in future. Start using tools such as the Coda, Developer’s Toolbar, Firebug, ColourPicker and XScope.
- Validate that beautiful code you developed so quickly!
- Anyone want to test their website? :-)
- Use simple language and spell check you scallywags! There’s nothing worse—from as branding perspective—than typos and bad grammar. Most good code editors, such as TextMate for example, have built in spell checking.
- Yup. It’s true. And should be obvious to you. If you’d like to have a career in the interactive media arts, you have to think mobile and design and develop for the fourth screen.
- Who’s ordering a new iPhone now that Rogers is carrying them legitimately?
- The web needs good designers more than good coders. Learn the basics of composition, colour, layout, grids, typography, etc. Bad design is still bad, regardless how sweet the back end is. Remember the “form follows function” lesson? Common traits of good websites: • Simple layout with plenty of whitespace • Centred orientation and scalable • Designed around real content (not content created to fill a page a design) • Animation used sparingly • Soft, neutral backgrounds • Strong colours and cutesy icons used sparingly (Web 2.0) • Easy to read text (not too small)
- Veer - top of their game really
- Manducatis.com - wow
- What can you teach me? What did I miss? Or what can I clarify for you?
- Email me.