2004 WebGUI Users Conference

Transcription

1 WebGUI Site Design 2004 WebGUI Users Conference

2 General Rules of Web Design

3 Content is King good content is more important than anything else. keeps people interested. even if your design is bad, content brings users back.

4 Navigation is Key keep it consistent. make it easy to find. avoid using Flash for main navigation elements.

5 The User is the Audience design your site with your users in mind. you are not necessarily your audience. the user is more important than anyone else.

6 Adver tising Does Not Drive Commerce don t expect to make money from advertising. subscription model is more likely to succeed.

7 Clicking is a NO-NO general rule is 3 clicks deep. users don t like to click. make your content easy to find.

8 Splash Screens are Bad generally serve no purpose. adds an unnecessary click. distract users from their purpose for coming.

9 Scrolling is a NO-NO keep the scrolling down to 3 pages if possible. requires users to do more than they need to. if scrolling is required, put important information at the top of page.

10 Use Flash Wisely do you really need a Flash intro should serve a purpose keep it simple and small

11 Render Time is Impor tant tons of nested tables add to render time. page may download fast, but can still take too long to render. long render times can push users away.

12 Don t Use Frames frames are difficult to navigate. difficult to print. not search engine friendly.

13 Make it Printable users may want to take your content with them. use dark text on light backgrounds. take advantage of WebGUI s ^r; (make page printable) macro.

14 Star t With Your Design

15 No Limitations WebGUI does not limit what you can do with design. Design as you normally would. Pre existing designs are easily converted.

16 Optimize Your Graphics Accordingly GIF Format: supports maximum of 256 colors. Good for images with large areas of the same color (logos, line drawings, icons, graphical text). Bad for photos. JPEG Format: supports 16.7 Million colors. Lossy compression meaning it throws out colors depending on your settings. Great for photographs or anything with more than 256 colors. PNG Format: Developed as a patent free answer to gif. Lossless format. Supports up to 48-bit truecolor or 16-bit grayscale.

17 Thinking in Sections

18 Break Apar t Your Site Style Template Header Navigation Page Wobjects Footer

19 Break Apar t Your Site style template header navigation page wobjects footer

20 Break Apar t Your Site style template header navigation page wobjects footer

21 Creating Your WebGUI Site

22 Build Your Site Already have your design, now we have to build it. Build as you normally would (using Dreamweaver, Homesite, Bluefish, BB Edit, etc.) HTML, XHTML are fully supported.

23 Build Your Site macromedia dreamweaver macromedia homesite

24 Create Your CSS Add style / formatting to your site using CSS. Use CSS to format all of your presentational elements.

25 Create Your CSS /* content */.bodycontent { width: 600px; font-size: 12px; text-align: left; }.content { font-size: 12px; } body { background-color: #FFFFFF; background-position: top center; background-repeat: repeat-x; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; } Many useful CSS editors available: CSS Edit for the mac shown above

26 Impor t Your Collateral Import your collateral and name it appropriately. Helpful to use naming conventions. ie: nav_about, nav_contact, btn_go, btn_submit, hdr_contact, etc.) Keep collateral organized with folders.

27 Impor t Your Collateral

28 Know Your Macros Collateral Macros ^File(); This macro builds a quick file link. It creates an icon for the file and outputs the files name. ^I(); This macro retrieves an image from the collateral management system ^i(); This macro retrieves the URL for any file in the collateral management system. ^RandomImage(); This macro takes a collateral folder as a parameter and randomly displays an image from the folder. ^RandomSnippet(); This macro takes a collateral folder as a parameter and randomly displays a snippet from the folder ^Snippet(); This macro retrieves the contents of a snippet in the collateral management system and inserts it into the page. ^Thumbnail(); This macro retrieves the URL for the thumbnail of any image in the collateral management system. Navigation Macros ^Navigation(FlexMenu); This menu macro creates a top-level menu that expands as the user selects each menu item. ^Navigation(crumbTrail); A dynamically generated crumb trail to the current page. ^Navigation(currentMenuVertical); A vertical menu containing the sub-pages at the current level. By default it tracks 1 level deep. ^Navigation(currentMenuHorizontal); A horizontal menu containing the sub-pages at the current level. ^Navigation(rootmenu); Creates a horizontal menu of the various roots on your system (except for the WebGUI system roots). ^Navigation(dtree); Create a dynamic tree menu. ^Navigation(coolmenu); Create a DHTML driven menu. ^Navigation(TopDropMenu); Create a drop down menu of your top level navigation. More on macros can be found within WebGUI s help index

29 Conver t Your Code Convert images to macros using ^I(); macro Retrieves image from Collateral Manager along with an HTML image tag.

30 Conver t Your Code ^I(); IN USE before <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/bg_pattern_shadow_left.gif" alt="shadow" width="15" height="55" border="0"></td> <td width="50%" class="logopad"><img src="images/logo.gif" width="128" height="22" alt="logo"></td> <td width="50%" align="right" valign="top" class="utilnavpad"><img src="images/btn_download.gif" width="69" height="10" alt="download"> <img src="images/btn_search.gif" width="54" height="10" alt="search"> <img src="images/ btn_print.gif" width="39" height="11" alt="print"></td> <td><img src="images/bg_pattern_shadow_right.gif" alt="shadow" width="15" height="55" border="0"></td> </tr> </table>

31 Conver t Your Code ^I(); IN USE after <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>^i(bg_pattern_shadow_left);</td> <td width="50%" class="logopad">^i(logo_2004);</td> <td width="50%" align="right" valign="top" class="utilnavpad">^i(btn_download2); ^I(btn_search2); ^I(btn_print2);</td> </table> <td>^i(bg_pattern_shadow_right);</td> </tr>

32 Conver t Your Code Convert your navigation using the appropriate nav macro. before <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>nav item1 nav item 2</td> </tr> </table> after <table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>^navigation(rootmenu);</td> </tr> </table>

33 Conver t Your Code Include appropriate template variables. <tmpl_var session.settling.companyname> - <tmpl_var session.page.title> (Adds Company Name and Page Title to page. Good for use in <title> elements. <tmpl_var body.content> (Area in template where content will be placed).

34 Conver t Your Code <tmpl_var session.settling.companyname> - <tmpl_var session.page.title> <head> <title><tmpl_var session.setting.companyname> - <tmpl_var session.page.title></title> <link href="^i(pb2004.css);" rel="stylesheet" type="text/css"> ^Snippet(pb2004normalbkg); <tmpl_var head.tags> </head>

35 Conver t Your Code Link any necessary files with the ^i(); macro. Retrieves the URL of any file from Collateral Manager.

36 Conver t Your Code ^i(); IN USE <html> <head> <title><tmpl_var session.settling.companyname> - <tmpl_var session.page.title></title> <link href= ^i(pb2004.css); rel= stylesheet type= text/css > </head>

37 Use Snippets for Reusable Sections Similar to using includes. Only needs to be changed in one place. Java Scripts, Style Sheets, Flash animations, Testimonials, Slogans, Promotions all make great snippets. Example: ^Snippet(promo box);

38 Use Snippets for Reusable Sections

39 Use Snippets for Reusable Sections Snippets

40 Create Your Style Template After all of your code is converted, snippets are created, and collateral is uploaded, it s time to create your style template/templates. Style templates control the look and feel of your site.

41 Create Your Style Template from admin choose Manage Templates

42 Create Your Style Template select Add a new templates

43 Create Your Style Template select style from the Template ID, name your template & paste your in your code

44 Create Your Style Template edit your Page Settings, click on the Layout tab, and select your Style Template

45 Add Content from the Add content drop down go nuts adding new pages and content to your site

46 Resources

47 Online Resources WebGUI s integrated help

48 QUESTIONS