Web development in the “real” world

Dave TanchakCOMP 1536 – Feb 16.09

Me

• Manager, Web Services, BCIT (2 years)– With BCIT since 2002– Stints as Web Producer/Architect and Manager,

Student Recruitment in MarCom• PTS Instructor, BCIT (10 years)– COMP 1850– COMP 1955

• Web Professional (13 years)– Designer, developer, UX specialist, cmns strategist

My world• Manage a team of 11 people:– Project managers– Designers– Developers

• Administrate BCIT’s public web properties• Educate BCIT’s community of web publishers

(200+) • Work with IT and MarCom groups to promote

BCIT, recruit students and facilitate task completion

Real world web development is:• Web design• User research• Information architecture• User experience design• Usability engineering• Writing and editing• Content management

systems• Web server

administration

• Database administration• Software engineering• Project management• Network security• Search engine

optimization• Measurement and

analysis• A balance of business of

objectives and user needs

Developers often specialize

• Frontend:– focus on the client-side, markup languages,

ECMAscript and its variants (JavaScript, JScript, ActionScript), CSS and the DOM.

• Backend:– focus on the interaction between server-side

frameworks using PHP, Python, Ruby, Perl, JSP, or .NET and databases

Be user-centred

• The web is not about technology – simply a means to en end

• Understand the value of user research and design to meet the needs of your customers

• You are not your customer – don’t design for yourself

Be a team player

• No person is an island• Even if you freelance, you still have to be able

to deal with clients• Work on your communication skills – need to

be able to communicate ideas clearly, to both tech-savvy and n00bs alike

Learn your layers!

• Content: Learn your XHTML!– This is not an option. Learn it inside and out.

• Presentation: CSS– Keep it separate from your content.

• Behaviour: JavaScript– Keep it separate again from content and presentation

• Much easier to edit, maintain, redesign; faster load time (CSS is cached) better SEO (content not watered down)

Be a good thief

• Learn how to reverse engineer a page– Content– Presentation– JavaScript

• Understand patterns • Don’t recreate what you can steal and bend to

your own purposes

Case study• Whatwouldyouchange.ca (WWYC)• General customer demographics/needs are well

known (or at least assumed):– Want to know what we have, how much it costs, how they

get in, what the days will be like• People online today are increasingly:– Creating– Connecting– Collaborating– Critiquing– Consuming

• We need to be more than a brochure

WWYC business goals

• To increase awareness of breadth of BCIT offering

• Turn “suspects” into “prospects” and “prospects” into students

• Build relationships through the use of technology that support face-to-face efforts

• More than broadcast advertising or web banners

Join or build?

• We joined all the sites (Facebook, Twitter, Flickr, YouTube, etc.), which gets some breadth of coverage

• Needed a place to send people that engaged them

• bcit.ca was not equipped to handle the social networking, user-generated content, etc.

• So we opted to build as well

Process

• In-house team had skill to build site – if we had a 3-4 month timeline

• Utilized strength of the team Web Services for:– Site concept development– Technical and feature requirements definition– UX definition and design (wireframes, storyboards,

etc.)– Interface design– Art direction and copywriting– System development and admin

Collaboration

• Sourced and signed two separate contractors within two weeks::– Flash application development– Detailed Drupal development

• Highly compacted development schedule:– Oct 5 – Nov 10

Launch and maintenance

• Soft launch Nov 5 • Flash app fixes and sign-up process corrected

by Nov 10• Web Services responsible for ongoing

maintenance, upgrades and updates

Final thoughts

• Build stuff• Show it off• Get involved• Have fun!

Questions?

• dtanchak@gmail.com• Blog:

http://www.tanchak.com

• Facebook:http://www.facebook.com/people/Dave-Tanchak/129400053

• Twitter:http://twitter.com/sharpener

• LinkedIn:http://www.linkedin.com/in/dtanchak