Embed Size (px)
Citation preview
Best Practices: Web Page Formatting
6/2/2011
Web Page Formatting
Having trouble with audio?Join the conference call:Toll: +1 (484) 589‐1011
Access Code: 274‐425‐067
Audio PIN: Shown after joining the webinar
Webinar ID: 896‐727‐627
System Requirements
PC‐based attendees
Required: Windows® 7, Vista, XP or 2003 Server
Macintosh®‐based attendees
Required: Mac OS® X 10.4.11 (Tiger®) or newer
Web Page Formatting
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
Web Page Formatting
• Left – to – RightThe eye is trained to read left to right.
• Hot Spot ‐Main Page ContentThis is the area of the page where you want to deliver the message.
• The Main BreakWebsite visitors will usually stop looking for information below this line.
• Supporting InformationIf your pages content extends below the main break make sure it is supporting the main page content.
The Eye and the Web
Presented by Heath Shults
• HeaderLogo in upper left, prominent but not over powering.
• Navigation – Horizontal / VerticalHorizontal menus toward the top of the page. Vertical menus on the left or right.
• AdvertisePlace your special advertisements here. This is where the eye ends up.
• HighlightsPlace your highlights for your center here.
• Supporting ContentUse this space to support your centers attractions.
Layout Strategy
NICE!Web Page Formatting
YUCK!
Web Page Formatting
Web Page Formatting
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
Web Page Formatting
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
Web Page Formatting
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
Web Page Formatting
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
Web Page Formatting
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 Serverbutton 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.
Web Page Formatting
Link Building Tips• A regular link looks like:
Click here to join a league www.LuckyBowlingLanes.com/LeaguesThis 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!
Web Page Formatting
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.
Web Page Formatting
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.
You have 15 seconds to load your page and deliver your message.
The objective:Pull your website visitor deeper into your website and finally to a form were you can collect their contact information.
Web Page Formatting
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
* The BPAA Webservices Templatehas a load time of 2.1 seconds on a 54.0 mbps internet connection.
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
Web Page Formatting
Thank you!And as always contact us at BPAA
for questions on website: hosting, design, SEO, layout strategy.
• Heath [email protected]
• Download this Webinar at www.bowlinguniversity.netJust click on “Seminar Handouts” in the main menu.
