Building Dynamic Sites

without getting buried in technology

Michael Slater

michael@webvanta.com

888.670.6793

Agenda

A design-focused approach to building sites What you need to know about:

HTML, CSS, JavaScript, CMS, DB

Making Photoshop an effective web tool Ways to get your designs built Special offer for attendees

The Path to Sanity

(and great sites)

Develop a working knowledge of what each key web technology can do

Dont expect to become an expert

Create and document designs in a way that gives implementer what they need Find a trustworthy implementation partner

Business Goals Visual Design HTML Content Management System Web Server App Server Operating System Server Hardware Information Architecture CSS Interaction Design JavaScript Database Administration Database Server

You Cant Do It All

Choosing Where to Draw the Line

Marketing Strategy Content Strategy Visual Design Interaction Design HTML & CSS Java Script Basic CMS Setup Adv. Database Server CMS Design Admin Setup

Graphic Designer

Front-End Dev

Back-End Dev

Web Designer

The Web is Different

Markup drives presentation

Screen size is unpredictable Viewer has control Some graphics generated by CSS

Positioning can be complex Type choices are limited Interaction is important

Do You Need to Code?

HTML: No excuses you need to know it CSS: Learn at least the typographic parts

Be able to edit what someone else created

JavaScript: Know how to tell someone else what you need Server: Best left to programmers

HTML
<h1>This is a headline</h1> <p>This is a paragraph of text</p> <ul> <li>A bullet list</li> <li>Another item</li> </ul>

HTML5

Audio and video that works on iPads and iPhones Forms that are easier to use New structural tags that add semantics to the code Lots more that isnt generally usable now

CSS
body { font-family: Verdana, Arial; } h1 { font-weight: bold; font-size: 24px; } p { font-size: 14px; }

CSS3

Many modules, some are usable now Rounded corners Web fonts Shadows Transforms and animations Specify in code, not in bitmaps!

cssportal.com

css3generator.com

Typography

Licensing issues keep most fonts from being used directly on the web

Small set of fonts on everyones computer

Some fonts in public domain (e.g., Google) Web font service bureaus providing wide variety of easy-to-use fonts

Typekit, WebINK, webfonts.fonts.com, Kernest, and many others

Web Type Examples

http://www.voltagefashionamplied.com/ http://trentwalton.com/2011/01/26/youare-what-you-eat/

JavaScript

A programming language that is executed by the browser The key to most interactivity Learn what it can do

Not necessarily how to do it

jQuery

A library of JavaScript code that:

Eliminates browser differences Allows use of CSS selectors Makes common tasks much simpler Provides a way to package up code as a plug in

Design Around Whats Available

Know what jQuery can do for you Use screen captures from library sites for your design Specify what plugin you want used, what skin you want

More economical than providing a complete design

jQuery Examples

http://jqueryui.com/themeroller/ http://www.postcarbon.org/ http://hatterasfever.com/shing-reports http://www.ffwsales.com/images/

Flash

Use for rich internet applications, games, complex animations, immersive sites For everything else, JavaScript is generally a better solution

Easier to modify Works on iPads and iPhones Loads faster

Web Design with Photoshop

Photoshop is not a web design tool Need to nd ways to document:

Interactivity Page size variations Content variations

Many graphics now generated by the browser: just use placeholders

Layers to the Rescue

Use well-named layer groups Use a layer for each interactive state Use layers to show different widths Use layers for notes

Grid Systems

How wide should my page be?

For desktop, 960 to 980 px Mobile: 1-2 columns 960gs or BlueprintCSS

Use a grid system

Simplies coding, ensures consistency

Using a CMS

Essential for any modern site

Simplies content updates Enables consistency Self-hosted: you must manage the software Hosted: supplier manages the software

CMS choices

CMS Questions

How is it maintained and kept secure? When I need help, where can I get it? Can it be customized? Does it support DB-driven content? Can I deliver a mobile site as well?

Templates Templates Provide Provide Consistent Consistent Page Page Structure Structure

Content Regions for static or database content

Design for Structure

Minimize number of different layouts Keep header, nav, footer consistent Use a few different column layouts for content area Provide style for each HTML element

p, h1, h2, h3, ul, etc. Alternate styles for sidebars, etc. as needed

Databases

Content with a repeating structure

Put it in a database with that structure

DB-driven content can be displayed in multiple places (and on mobile site) Content is easy to maintain and expand DB-driven content can be used for mobile site as well as desktop

Mobile

Mobile is now about 10% of Internet usage, rising rapidly Small screens requires different design approach Design for what a mobile users top needs are likely to be

Getting It Built

Decide where you want to draw the line Find a partner that complements you

Freelancers Offshore Development rms

How Webvanta Can Help Your Business

Hosted CMS that helps you and your clients

Reduces cost to build sites Build richer sites more quickly Makes sites easy for content owners to maintain

Expert professional staff that has built hundreds of sites for designers

Working With You

Use Webvanta to help win your next project

We can help you bid projects

Just say Yes! to whatever features your clients require You can stay focused on design

Special Offer for Webinar Attendees

Free 30-minute consultation

Show us any of your designs Well show you how it would work in our system or what else you should use

No cost, no obligation Email justin@webvanta.com to schedule

Questions?

Call us any time: 888.670.6793 option 4 Join the conversation:

www.webvanta.com/blog www.facebook.com/webvanta @webvanta