webvanta building dynamic sites

8/3/2019 Webvanta Building Dynamic Sites

1/35

Building Dynamic Siteswithout getting buried in technology

Michael Slater

[email protected] 888.670.6793


2/35

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


3/35

The Path to Sanity(and great sites)

Develop a working knowledge of whateach key web technology can do

Dont expect to become an expert

Create and document designs in a waythat gives implementer what they need

Find a trustworthy implementationpartner


4/35

VisualDesign InteractionDesignInformationArchitecture

Business Goals

HTML CSS JavaScript

ContentManagement

System

DatabaseAdministration

Web Server AppServer

DatabaseServer

Operating System

Server Hardware


5/35

You Cant Do It All


6/35

Choosing Where to

Draw the Line

Graphic Designer Front-End Dev Back-End Dev

Marketing

Strategy

Content

Strategy

Interaction

Design

Visual

DesignJava

Script

HTML

& CSS

Basic

CMSSetup

Database

Design

Server

Admin

Web Designer

Adv.

CMSSetup


7/35

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


8/35

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 someoneelse what you need

Server:Best left to programmers


9/35

HTML

This is a headline

This is a paragraph oftext

A bullet list

Another item


10/35

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


11/35

CSS

body {

font-family: Verdana, Arial;

}h1 {

font-weight: bold;

font-size: 24px;

}p {

font-size: 14px;

}


12/35

CSS3

Many modules, some are usable now

Rounded corners

Web fonts

Shadows

Transforms and animations

Specify in code, not in bitmaps!


13/35

cssportal.com


14/35

css3generator.com


15/35

Typography

Licensing issues keep most fonts frombeing used directly on the web

Small set of fonts on everyonescomputer

Some fonts in public domain (e.g., Google)

Web font service bureaus providing widevariety of easy-to-use fonts

Typekit, WebINK, webfonts.fonts.com,

Kernest, and many others


16/35

Web Type Examples

http://www.voltagefashionamplified.com/

http://trentwalton.com/2011/01/26/you-are-what-you-eat/


17/35

JavaScript

A programming language that is executed

by the browser

The key to most interactivity

Learnwhatit can do

Not necessarilyhowto do it


18/35

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 aplug in


19/35

Design Around

Whats Available Know what jQuery can do for you

Use screen captures from library sites foryour design

Specify what plugin you want used, whatskin you want

More economical than providing acomplete design


20/35

jQuery Examples

http://jqueryui.com/themeroller/

http://www.postcarbon.org/

http://hatterasfever.com/fishing-reports

http://www.ffwsales.com/images/


21/35

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


22/35

Web Design with

Photoshop Photoshop is not a web design tool

Need to find ways to document:

Interactivity

Page size variations

Content variations

Many graphics now generated by thebrowser: just use placeholders


23/35

Layers to the Rescue

Use well-named layergroups

Use a layer for eachinteractive state

Use layers to show

different widths

Use layers for notes


24/35

Grid Systems

How wide should mypage be?

For desktop, 960 to980 px

Mobile: 1-2 columns

Use a grid system

960gs orBlueprintCSS

Simplifies coding,

ensures consistency


25/35

Using a CMS

Essential for any modern site

Simplifies content updates

Enables consistency

CMS choices

Self-hosted: you must manage thesoftware

Hosted: supplier manages the software


26/35

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?


27/35

TemplatesProvide

ConsistentPage

Structure

TemplatesProvide

ConsistentPage

Structure

ContentRegions

for static

or databasecontent


28/35

Design for Structure

Minimize number of different layouts

Keep header, nav, footer consistent

Use a few different column layouts forcontent area

Provide style for each HTML element

p, h1, h2, h3, ul, etc.

Alternate styles for sidebars, etc. asneeded


29/35

Databases

Content with a repeating structure

Put it in a database with that structure

DB-driven content can be displayed inmultiple places (and on mobile site)

Content is easy to maintain and expand

DB-driven content can be used for mobilesite as well as desktop


30/35

Mobile

Mobile is now about 10% of

Internet usage, rising rapidly

Small screens requires differentdesign approach

Design for what a mobile userstop needs are likely to be


31/35

Getting It Built

Decide where you want to draw the line

Find a partner that complements you

Freelancers

Offshore

Development firms


32/35

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 builthundreds of sites for designers


33/35

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


34/35

Special Offer for

Webinar Attendees Free 30-minute consultation

Show us any of your designs

Well show you how it would work in oursystem or what else you should use

No cost, no obligation

Email [email protected] to schedule


35/35

Questions?

Call us any time: 888.670.6793 option 4

Join the conversation:

www.webvanta.com/blog

www.facebook.com/webvanta

@webvanta

webvanta building dynamic sites

Documents