Best Practices: Web Page Formatting 6/2/2011

Transcription

1 Best Practices: 6/2/2011

2 Having trouble with audio? Join the conference call: Toll: +1 (484) Access Code: Audio PIN: Shown after joining the webinar Webinar ID: System Requirements PC based attendees Required: Windows 7, Vista, XP or 2003 Server Macintosh based attendees Required: Mac OS X (Tiger ) or newer

3 Today s Agenda Content Layout Strategy for Desktop Websites Content Layout Strategy for Mobile Website Access Downloads & Video Content Formatting Tips - Text - Images - Links Performance

4 The Eye and the Web Left to Right The eye is trained to read left to right. Hot Spot Main Page Content This is the area of the page where you want to deliver the message. The Main Break Website visitors will usually stop looking for information below this line. Supporting Information If your pages content extends below the main break make sure it is supporting the main page content.

5 NICE! Layout Strategy Header Logo in upper left, prominent but not over powering. Navigation Horizontal / Vertical Horizontal menus toward the top of the page. Vertical menus on the left or right. Advertise Place your special advertisements here. This is where the eye ends up. Highlights Place your highlights for your center here. Supporting Content Use this space to support your centers attractions. Presented by Heath Shults

6 YUCK!

7 Mobile Websites Mobile web is a whole new ball game. Mobile web is all about quick access to important information - Who you are - Where you are - How much does it cost - Contact Information

8 Mobile web is different from a desktop website Only the most important content should be shown on each page Image file sizes should be as small as possible Test your mobile website for fast load time and correct display

9 Document Downloads Use the Adobe Acrobat format for flyers, menus, etc Do not use Word Documents, Publisher or Excel Small file size for a fast download Video Upload your videos to YouTube.com and embed then on your website

10 Formatting Text Do not use your space bar to format anything! Use plain text. Try not to use fancy fonts. Use H1, H2, and H3 tags for titles of content blocks. Make your message on your pages brief and to the point. Use left alignment for your text DON T CENTER ALIGN

11 Images Do not use images with a file size of 50kb for desktop websites Do not use images with a file size of over 15kb for mobile websites Only use images at 72 to 96 dpi (screen resolution) When inserting an image fill in your Alt tags URL the web address of the image. You can also use the Browse Server button to select an image from the ones that are available on the server. Alternative Text a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about. Border the size of the solid border around the image in pixels. HSpace the horizontal spacing (or margin) between the image and elements that surround the image, in pixels. VSpace the vertical spacing (or margin) between the image and elements that surround the image, in pixels. Align the alignment of the image in the document to the right or left of elements on the page.

12 Link Building Tips A regular link looks like: Click here to join a league This used to be acceptable but is now considered deprecated. So with the ever changing web we need to start using Anchor Links An anchor link looks like: Join a League Today!

13 Using Tables Use tables when you have the need for columns and rows. DON T USE THE SPACE BAR TO GET THIS TYPE OF LAYOUT. That would be bad juju! You can easily add/delete rows and Columns by right clicking inside the table in the text editor.

14 You have 15 seconds to load your page and deliver your message. Your visitor has to know: Who you are. ABC Bowling Center What you do. Open bowling, parties, etc Why they should choose you. The best bowling experience What to do next. Get your free coupon here. The objective: Pull your website visitor deeper into your website and finally to a form were you can collect their contact information.

15 According to a recent Aberdeen Research Report, each additional second of response time above 3.9 seconds per page impacts business in the following ways: Decreases page views by 11 percent Decreases customer satisfaction by 16 percent Decreases conversions by 7 percent What slows down website performance? Factors you or your webmaster can control: LARGE IMAGE FILE SIZE Too many images Poor formatting (deeply nested tags in the code) Slow servers at your hosting service Factors you can not control The website visitor has slow internet speed The computer accessing the site has a virus, spyware or malware. The visitors network is slow or congested * The BPAA Webservices Template has a load time of 2.1 seconds on a 54.0 mbps internet connection.

16 Thank you! And as always contact us at BPAA for questions on website: hosting, design, SEO, layout strategy. Heath Shults Download this Webinar at Just click on Seminar Handouts in the main menu.

17