Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website Design in 1 hour (handout)


Published on

Learn the basics of building or redesigning a website. Presented with Dr. Ray Gasser and Kathryn Magura at the ACUHO-I Annual Conference 2013

Published in: Self Improvement
  • Login to see the comments

  • Be the first to like this

Website Design in 1 hour (handout)

  1. 1. Information must be easily accessible to minimize customer searching time by reducing the number of pages (clicks) and consolidating information. This means there should be more of a horizontal navigational structure rather than a vertical navigational structure. Clear and simple navigation is the top priority; important information like locations, contact information and booking methods are readily available to reduce prospective customer frustrations. Current and urgent topics may be highlighted as a focus-point on the main landing page. These topics are changed based on the primary audiences that will be using the website at the time in order to ensure the message is received successfully. Work with your content experts to determine the priorities and schedules. REDESIGNING A WEBSITE Redesigning or starting a new website can be intimidating. Take a deep breath and start by playing online! Look at your favorite websites (housing or not) to look at what you like or dislike. Do some research on the purpose of your website and your audience to make some decisions on the desired user experience, overarching design, and project timeline and benchmarks. Now that you’re ready to start, here are some steps to get going: 1. Choose your DOMAIN 2. Set up reliable HOSTING 3. Define the PURPOSE of your site 4. Identify your AUDIENCE for content development 5. Determine EASY NAVIGATION 6. Make a SITE MAP & flowchart 7. Write CONTENT that is useful and informative 8. Select IMAGES that will create a lasting impression 9. Create a DESIGN that’s attractive, simple, and professional 10.Set up TRACKING & ANALYTICS to monitor and strategize HTML: HYPERTEXT MARKUP LANGUAGE HTML is a markup language that enables the creating and publishing of web content. It is currently the fundamental way to publish content for web browsers. CMS: CONTENT MANAGEMENT SYSTEM Web designers developed CMS systems using HTML and Javascript to simplify updating and managing websites. CMSs include Drupal, Expression Engine, Wordpress, and more! CMSVSHTML PROS • Easy • Quick • Consistent Branding • Add/Delete Pages Easier • Not highly technical CONS • Difficult to change design • Expensive • Less flexible PROS • Arguably better coding • More design control • Lower pricing CONS • Technical skills needed • Start everything from scratch Content development can be one of the most difficult areas to tackle when redesigning your website. Messaging on the website should be seen as “push marketing” messaging. All websites have full control over the content and there is very little opportunity for a customer to engage with this one-way communication. Customers know this and therefore want to find the information they can seek quickly and easily. Websites are designed to provide information about services, facilities, culture, and guidance on how to live in campus housing. Always work with the content managers to ensure accuracy and ideas on how the text can be simplified or better organized for the end user. The information in the website news should be succinct, current, and relevant. Website development best practices include being succinct, relevant, accurate, innovative, intentional, and dynamic. One of the most difficult practices is to be “succinct”. All customers expect to find their information quickly and easily – and this can be difficult if there is a large amount of text or too much explanation. Try to harness your “Twitter” skills and summarize as much as possible. Try leveraging your web analytics as well to show what the customers want. In order for messaging to be appealing and engaging, the website could include updated photographs, videos, location maps, and departmental connection opportunities as well as customer reviews. Look at what you already have & get started! NAVIGATION CONTENT HIGH ORG PRIORITY LOWCUSTOMERPRIORITY Secondary in Navigation Some Cross Linked Limited Graphics & Emphasis Primary in Navigation Highly Cross Linked Prominent Graphics & Emphasis HIGHCUSTOMERPRIORITY Tertiary in Navigation Limited Cross Links Little or No Graphics & Emphasis Secondary in Navigation Some Cross Linked Limited Graphics & Emphasis LOW ORG PRIORITY
  2. 2. HELP @DrRayGasser @Kmagura @AmyLJorgensen ACCESSIBILITY Websites should be accessible to the broadest audience possible. Factors to consider: screen readers for visual impairments, navigation via keyboard only, dial-up or low bandwidth connections, browsers that don’t have javascript or flash enabled, and mobile devices. How to check if your site is accessible: • Turn off images in your browser (make sure image place holders are turned on) • Turn off support for JavaScript • Tab through the page, navigate without a mouse • Try to change the standard font colors and styles in your browser • Try to increase the font size by using the browser (view > text size > increase) • Turn off support for stylesheets, does your site still makes sense? MORE INFO: Legal Guidelines: USABILITYGUIDELINES Our customers are using multiple devises to look at information. Millennials switch their attention between media platforms like laptops, smartphones, tablets, and television 27 times per hour on average – and other generations do this 17 times per hour! Make sure your website can be viewed on many different platforms. We have two main choices for making a mobile friendly website: 1. Mobile Site: it is essentially a copy of your website. 2. Responsive Design: The device does the work and automatically adjusts according to a device’s screen size. WHY RESPONSIVE DESIGN IS BETTER 1. ONE website for every screen 2. Shorter site development cycle 3. Performs well in search results 4. Gives choice for the viewers So now that you’ve started the brainstorming process, how can you leverage your navigation to increase consumer satisfaction? Web analytics, such as Google Analytics, provide clear feedback from your consumers – and plainly tell you what they think is most important. Plus they can be free! Google Analytics are one of the most popular free analytics tools. Below are some resources to get you started. USING WEB ANALYTICS Beginner Guide to Google Analytics Start Google Analytics Set up Goal Tracking Set up & Configure Site Search Interface Navigation Google Analytics Annotations 3 Metrics Beginners Should Watch Creating Custom Campaigns Insightful GA Dashboards Using Custom Alerts What to do if Traffic Drops DESIGN FOR MOBILE VIEWING The following information and checklist is provided to help guide your team ensure consistency throughout the website to enhance the user experience. QUICK WRITING TIPS Quality & Timeless Content Avoid content that may become easily outdated. The names of individual staff members change frequently. Job titles and generic mailbox addresses (e.g. should be used instead of referencing an individual’s name. Timely information that will expire soon may have a better home in social media than on the website. Length Remember that less is more when writing for the web. The goal should be to produce content that is easy to read with concise sentences. Tone Use a professional tone. Websites are expected to be the digital storefront of our organization. We are responsible for protecting our brand and representing the organization in a professional way. Informal and lighthearted language is better suited for social media platforms. Grammar and spelling on the page Because the content appears on the web immediately, it is important to make sure that there are no issues with spelling or grammar. Have a colleague read through your text before posting it. Keywords Keywords are identified target phrases that will resonate with the online audience. Think about the words users would type to find your pages, and make sure that your site includes those words. Keywords can be used within: URLs, page titles, page headings H1-H2, general paragraph content, image filenames, body text, image Alt attributes, bold & italic text. Free Google Keyword Tool: TECHNICAL TIPS URL Structure Simple and organized URLs make it easier for search engines to read web pages and also make pages more enticing for others to reference. URLs should be dynamically written with relevant words that help define what the page is about. Hyphens (-) should be used over underscores(_). Page Title Tag <title> A title tag defines the page topic for users and will be the first line of a search engine result. Titles should be short, informative, and unique. Heading Tags <h1> <h2> <h3> Heading tags are a visual cue to users that the text is important and helps organize the content hierarchical structure. Avoid duplicating heading (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them. Anchor Text (links) Anchor text is the clickable text on a link that tells users, search engines, and screen readers about the linked page. Anchor text should be short and informative. Links should be formatted to be easy to find and navigate. Images & Videos Images should be included to provide value and visual interest to pages. They should be organized in one media file directory and include alt” text that is brief and descriptive. DON’T FORGET Did you remember… • Social Media Integration? • Print, Email, & Share Buttons? • Linking your locations in Google Places? • Talking with your content & management managers? • Creating a schedule to update/check content?