What your designer wants to know

Below are some questions for you to consider when planning your Web site project. While not all questions apply to every project, knowing the answers to the questions that are relevant to you will help your project move along smoothly.

Audience
  • Who is your target audience?
  • Why will they be visiting your website and what will they expect to find?
  • Are they worried about internet security?
  • What special needs will your audience have? Think about:
    • location and connection speed
    • Will your visitors be accessing your site with desktop computers, mobile devices, or both?
    • accessibility concerns (visual and mobility impairments)
    • language and literacy capabilities
  • Budget
  • What is your website budget?
  • What percentage of your budget is for design and development? What percentage is for marketing? What percentage is for maintenance?
  • Hosting
  • Do you have a web host?
  • Do you have a domain name?
  • Do you have the login information to access your hosting account?
  • Marketing
    and SEO
  • Have you done market research on your product/service to get a list of the most popular relevant keywords?
  • Do you have a budget for marketing your website, or will you be doing your own search engine submission, link exchanges, pay-per-click campaigns, email newsletters, etc.?
  • The Future of Your Site
  • How do you expect your site to grow and change in the future?
  • How will your content change?
  • If you plan to have frequent or extensive changes, will you make them yourself? If not, what is your budget for site maintenance and updates?
  • Color
  • What colors do you like?
  • What colors do you hate?
  • What emotions would you like your site to evoke, and what colors do you think would create the effect you desire?
  • Content
  • Do you have a logo, graphics, and/or photographs that you are authorized to use?
  • Do you have text content written, proofread, and spellchecked?
  • Have you tested your content on others to see if you are communicating your message effectively?
  • Site Function, Features & Complexity
  • How important is being able to edit your site yourself?
  • Do you need photo galleries? Animation? Audio? Video? Feeds?
  • Do you need custom forms and database applications? Ecommerce?
  • Make a list of the things you want visitors to be able to do on your site, and be aware that all of the features you list will most likely increase the cost of your project.
  • Sample Sites
  • Are there sites you particularly like?
  • What features have you seen on other websites that you particularly like or dislike?
  • Are there sites or features that you find particularly easy or difficult to understand?
  • Designing a WordPress site with aeweb

    aeweb often builds sites in WordPress for several important reasons:

    1. WordPress is a free, open-source content management system; it can be set up quickly and inexpensively, making it perfect for smaller-budget clients. aeweb base rate for WordPress setup with a prebuilt theme and basic customization is $300.
    2. Because of its efficiency and cost, WordPress is used by many people; therefore, there is lots of online support available.
    3. Similarly, there are hundreds if not thousands of free designs (“themes”) for you to choose from: see the WordPress free themes directory.
    4. WordPress is a relatively easy system to learn, so people who aren’t Web designers can do some of their own site management.
    5. The fact that WordPress is open source means that many developers have built plug-ins that can add complex functions to your site quickly and easily — for example, shopping carts, membership systems to deliver premium content, event management systems, dynamic forms — all of which work efficiently using the core WordPress functions. These features can be added to an existing WordPress site for a fraction of the cost of paying a developer to design a Web application just for your site. Search the WordPress plugin directory to see if there is a plugin for the feature you want.

    So what’s the downside? What you will trade, for all of the advantages listed above, is full control over the specific appearance of your site. It is perfectly possible to build custom themes for WordPress based on client design specifications; however, this will likely more than double the cost of your project. Customizing a prebuilt theme can be a good compromise. This site, in fact, is built using the Twenty Eleven theme with the customizations noted below.

    aeweb’s customization of prebuilt templates includes:

    • A custom header for your site using your photos, graphics, logo, and color choices (or aeweb can design a header for you)
    • Customizing the overall theme color scheme (color of text, headings, borders and backgrounds)
    • Navigation placement (left sidebar, right sidebar, horizontal, vertical, or both)
    • Custom sidebar widgets (a calendar of blog posts, a site search box, your contact information, etc.)
    • Custom footer (contact and copyright information, navigation links, etc.)

    Of course your content — the text, pictures, and graphics that are specific to each page of your site (as opposed to items that appear on every page) — is always personalized by you, and presented exactly the way you send it to us electronically.

    Helpful WordPress links

    Don’t forget to search Youtube; you can find some excellent WordPress tutorials there.

    Basic principles of good web design

    Here are a few principles to follow when designing your Web site and content. A lot of these suggestions will apply to print materials as well.

    The designer’s favorite acronym*:

    C Contrast creates visual interest and indicates relationships (or lack thereof) between content. Emphasize differences between unrelated content by making it really different — for example, use a large, fancy font for the title of your page, and a simpler, more straightforward one for page text. Small differences between separate items — like two slightly different fonts on the same page — ends up looking like a mistake rather than a design feature.
    A Alignment of design elements on a page creates a strong vertical line that encourages the user’s eye to move through the document in exactly the way you want it to. Every item on the page should be aligned with other items: The left edge of your paragraph heading should be aligned with the left margin of the text, with the left edge of a photo or graphic, etc.
    R Repetition lets users know at a glance that they are (still) on your site. Repeat design features like navigation, colors, text alignments, and graphic elements across your pages, and keep them in the same place on every page.
    P Proximity helps users know what information is related to each other. Group related information together — for example, the date and time of an event should be next to or directly below the event name, not in another area of the page. Keep sections of text close to their headings, and use more space between the end of one section and the heading for the next.

    * This acronym is credited to — and conveyed a bit differently by — the great Santa Fe designer Robin Williams. Read her books, they will help you.

    Get people to read your content!

    • Don’t center text unless you have a good reason to, and definitely never center an entire paragraph; left-aligned text is much easier to read, and left-aligned headings over left-aligned paragraphs is a modern, sophisticated style.
    • Use bulleted lists, and keep your items as short as possible.
    • If you have a longer item or paragraph of text, emphasize significant words and phrases. This information will draw the user’s eye and help them determine if the paragraph contains the information they’re looking for.
    • Use short, descriptive paragraph and list headings. Take advantage of the html h1, h2 etc. heading tags to help both users and search engines identify the content of your documents.
    • Leave plenty of white space. Don’t feel like you have to fill up every square inch of the page; documents with adequate white space are more appealing to look at and easier to read.

    Pay attention to what others are doing — and not doing

    Like every other area of life, there are fashions and fads in Web design – and certain elements went out in the 1990s. Using any of the following (unless you have a very good reason) will make your site look dated and amateurish.

    • Content that flashes or moves, including text headings, marquee (scrolling) text, and animated GIFs.
    • Brightly colored text on a brightly colored background. Not only is it outdated, it’s hard to read too.
    • Overly cluttered pages. Don’t incorporate too many gadgets into your site — do your users really need the local weather, your industry news feed, and AP headlines on your home page? Limit your content to relevant information that helps users do what they came to your site to do, and don’t distract them with extraneous bits of unrelated information.
    • Too much personal information. Unless it’s a personal site, skip the family photo album, your favorite hobbies, and a list of links to all your friends’ sites. Limit links and info to things that are directly relevant to your organization or business.
    • Flash “splash” pages. You may think it’s fancy and cutting edge, but a Flash landing page just means your users have to wait and click an extra time to reach your site’s content. Do you really want to take the chance they may decide to spend that time searching for your competitors instead?
    • Music or video that autoplays. Most users find this annoying, especially anyone who is surreptitiously surfing at work. They will not look kindly upon your site if it outs them to the boss by playing your favorite tune at full volume while they scramble to find the volume control.

    Photos and Your Web Site

    Photographs on the Web are different from photographs for printing, either as snapshots or within a publication like a brochure.  Photos for printing usually require at least 300 pixels per inch for quality results; screen resolution, however, is a maximum of 72 pixels per inch.  This is why it’s difficult to get a good quality print from photos saved to your computer by right-clicking within a web browser.

    Therefore, when you’re sending photos to me for placement on your website, you can usually reduce their size with photo editing software to make uploading quicker.  Picasa is a free photo editor available from Google.

    You must have the legal right to use photos you place on your website. This usually means you have taken them yourself or obtained them from their legal owner. By emailing me a photo you are certifying that you are legally permitted to use it on your Web site.

    Stock photography is another good source of photographs. Morguefile.com is a source of royalty-free photos; these may not be the highest quality but you can usually find very serviceable photographs there, especially of people. Two good sources to buy reasonably-priced professional photographs are iStockphoto.com and Shutterfly.com. I have accounts with both of these sites and can obtain photos for you usually for around $15 per photo.

    Help me choose: WordPress v Joomla!

    WordPress and Joomla! have quite a bit in common, even though they were developed for different purposes. They are both free software products with many add-ons available, with vocal communities of both supporters and detractors. From a client perspective, however, it’s important to understand what distinguishes them from each other, so you can make the choice that best suits your needs.

    WordPress was originally developed as a blogging platform; so, for organizations that want their website to include a blog, it’s perfect right out of the box. There are tons of free “themes” (design templates) and plugins, which usually work pretty well, but can be somewhat inflexible, though that is starting to change. There are also developers who will create a custom theme for you, for a price.

    WordPress is a terrific option for small to medium-sized websites that don’t need a lot of interactivity. It’s also perhaps the easiest content management system to learn, which makes in-house editing a real possibility. Because of its relative simplicity, however, it’s not really a good choice for larger, more complex Web sites with a lot of content and the need for various applications to interact with visitors.

    Joomla!, on the other hand, was intended to be a full-fledged content manangement system from the get-go. It’s open-source, which means that anyone with programming skills can develop templates and applications that will work within it — and thousands of developers have taken advantage of that. There are Joomla! add-ons to accomplish almost any Web-based task anyone might wish. This means great time and cost savings for clients — instead of having to pay a programmer to develop a custom application, you can download a Joomla! plug-in, configure it, and you’re set to go. There are also many free templates and a good selection of reasonably priced, professionally designed templates to choose from, to give your site a more custom look. You can even commission your own template, though this is a more pricey option.

    Joomla! works best for medium- to large-sized sites with lots of content that needs to be organized in a structured way. It’s also a great choice if you need to create user accounts, since it has this capability built in. This level of complexity, however, does come with its downside; the learning curve for managing Joomla! is quite steep, especially for those who are not confident with computers and/or the Internet. This means that developer support will most likely always be necessary for at least some tasks.

    Whatever CMS you choose, be sure to upgrade to the newest version as soon as you can, understand any attendant security concerns, and back up your site regularly!

    Joomla! basic training

    Crucial Joomla! Links

    Joomla! main page
    Absolute Beginner’s Guide to Joomla!
    Joomla! User Roles
    Joomla! Support Forum

    Search! Search!

    Use the search engine of your choice; many answers can be found by searching “how to _______ Joomla!”

    Joomla! Information Structure

    Section (not visible)
        Category (not visible)
          Article (visible; this is the content of the site)

    Logging in

    Two places to log in:

    Front end (website)    http://www.yoursitename.com/
    Back end (admin area)    http://www.yoursitename.com/administrator/index.php

    Why log in to front end?

    • View protected content
    • Edit articles

    Why log in to back end?

    • Edit articles
    • Add new articles & menu items
    • Add media (photographs, pdfs, etc.)
    • Add/manage site special features (events calendar, directory listings, contacts, shopping cart, etc.)

    Working With Content

    Most web pages are Articles. You can edit them while logged into the front end, or you can add new or edit existing articles in the back end using Article Manager. Don’t forget to set access level when adding new protected items.

    Some pages are Section or Category Blog pages. These do not contain any content themselves, but rather display the articles in the category specified. To add items to these pages, add a new article to the relevant section & category and it will automatically be displayed.

    Articles that do not belong to a section or category that has a blog page will NOT display automatically. If you add a new article, you must create a menu item for it or a link to it from another page; otherwise, users will have no way to access it.

    When adding or editing content, be sure to set the access level! It defaults to Public, so when adding a protected page, you MUST set the access level to Registered or above, in order to limit who can view it. This applies to Articles, Sections, Categories, Menu Items, Events — everything you work with in Joomla! has an access level. Always be aware of this when adding protected content.

    Add photos, pdfs, or other documents or assets using Media Manager, under the Site menu. In Media Manager, scroll down to below list of files to find upload box; click “browse”, choose file to upload from your computer, then click “Start Upload.” Please note, file names CANNOT contain spaces, so rename your files before uploading if necessary. Place files in appropriate subfolders if applicable, to make them easier to find later. For example, photos go in the “stories” subfolder.

    Creating Links in Joomla! using the JCE Editor Extension

    Creating links to content (other articles) within articles:

    1. When you’re editing the article where you want to place a link, highlight the text you want to use for the link.
    2. In the toolbar at the top of the editor text window, choose the fifth icon from the right in the bottom row. It looks like a two-link chain with a plus sign on it. When you hover over it, the tooltip says “Insert/Edit Link.” Click this.
    3. In the window that pops up, click the plus sign next to “Content.”
    4. Click the plus sign next to the section containing the article you want to link to.
    5. Click the plus sign next to the category containing the article you want to link to.
    6. Click on the name of the article. Link shows up in URL text field above.
    7. At the bottom under Attributes, choose the appropriate setting: “Open in this window” if you are linking to another internal web page that will have your site’s navigation; if it is a pdf or a link to another website, choose “Open in new window” so that a window with your site in it stays on the user’s screen.
    8. Click “Insert.”

    To change an existing link, just place your cursor anywhere on the link text and follow the same instructions to select a new article or file to link to.

    Creating links in articles to .pdf files:

    1. Upload the pdf through the media manager as above.
    2. When you’re editing the article where you want to place a link, highlight the text you want to use for the link.
    3. In the toolbar at the top of the editor text window, choose the fifth icon from the right in the bottom row. It looks like a two-link chain with a plus sign on it. When you hover over it, the tooltip says “Insert/Edit Link.” Click this.
    4. In the window that pops up, click icon next to the URL field that looks like a little icon with a magnifying glass.
    5. Click on the pdfs folder in the list at the left-hand side of the window.
    6. Click the plus sign next to the category containing the article you want to link to.
    7. Click on the name of the file you want to link to. Link shows up in URL text field above.
    8. At the bottom under Attributes, choose “Open in new window” so that a window with your site & navigation in it stays on the user’s screen.
    9. Click “Insert.”

    The path to the file will always be the same as long as you put the pdf in the correct folder (images/stories/pdfs/filename.pdf). If you name your files simply so they’re easier to remember, and use only lower case letters, then it’s easier to type the link in manually if you need to, in the URL text field in the “Edit/Insert Link” dialog box.

    Discussion forum post on creating a link to a .pdf
    Article on creating links, including screenshots

    How to add a menu item

    Search engine optimization and Joomla!

    A general article about Joomla! and SEO

    the basics of meta tags

    using meta tags in Joomla!

    How to use Google Analytics with Joomla!

    Congratulations! That’s the end of basic training — but it’s only the beginning of your adventures with Joomla! Make use of the links in this document, the Joomla! website, and discussion forums to continue your exploration.

    What is a Web host, and why do I need one?

    A Web host provides you with the resources to make your site available over the Internet. Unless you have your own Web server in the back room (and hopefully a competent staff to manage it), you’ll need an account with an organization that provides this service.

    To use a vastly oversimplified metaphor, think of the Internet as a giant network of file cabinets. When someone wants to view a Web site, they electronically request the folder that holds the Web pages that make up the site they want to view, and their browser displays it for them. A Web host, then, is sort of like a big electronic file cabinet that holds the folder that holds your Web pages, which make up your Web site.

    There are various levels of Web hosting services. Some hosts, like Google Sites, WordPress, and Yahoo!, will host your site for free. However, the “cost” of this kind of hosting usually is that you display ads on your site. These ads provide the income that pays for your free hosting. You may or may not have any control over what ads are shown — you could end up displaying a direct competitor’s ad right next to your own content! Another drawback of “free” sites is that your URL or Web address will usually contain undesirable elements like the name of the host in some form, such as www.yoursite.big-host-sites.com. This is not acceptable for most business Web sites. You need a hosting account that will work with your own domain name, www.yoursite.com, and for this you will usually have to pay.

    The next level is often called “shared hosting.” This means you purchase space from a Web host which physically stores your Web pages on a server that is shared with other sites. Sometimes there are concerns about security and resources with shared hosting, especially if you are handling sensitive data or have a large amount of traffic, but usually shared hosting is perfectly adequate for most small organizations.

    Reseller hosting is a type of shared hosting. This means that someone has purchased an entire server from a larger Web hosting company and resells space on that server to defray the cost. For example, a web designer or IT consultant might want control of their own server to host their own site, write and test software applications, etc., but they might also sell some of that space to their clients who need hosting space. You can purchase shared hosting through many national and local companies, some of whom provide extras like shopping carts, email addresses, advertising credits, or 24-hour phone support as part of their packages. See the links below for more information.

    For larger organizations, it is possible to host your site on its own server, but this level of service is beyond the budget and needs of most small businesses and nonprofit organizations. However, you can read more about the different types of web hosting here.

    Below you will find links to some companies that provide hosting services. aeweb does not endorse any particular hosting company and will be happy to upload your site to any host of your choosing.

    GoDaddy: Their economy hosting is plenty of space for a small to medium site.

    InMotion hosting: The “launch” option is adequate for small sites.

    Blue Host

    Siteground

    Southwest Cyberport: A local (Albuquerque) hosting option

    Search engine optimization

    As a matter of good web design and accessibility, all our sites include meta tags, image alt tags, and other basic search engine optimization (SEO) features. However, SEO is a huge, complex field, and we are not qualified to advise you on marketing issues. If your main purpose in building or updating your Web site is to increase search engine ranking, traffic and/or sales, aeweb recommends contacting Jan Zimmerman at Watermelon Mountain Web Marketing, (505) 344-4230. Jan is a nationally recognized web marketing expert, and has written several books on the subject, so you can’t find more knowledgeable help.

    If you don’t have a budget for professional SEO assistance, the following resources can help you organize your own campaign:

    Web Marketing For Dummies by Jan Zimmerman

    Search Engine Optimization (SEO): An Hour a Day by Jennifer Grappone & Gradiva Couzin

    Both of these books provide excellent insight into building your site’s traffic and page ranking over time. Also, check out the Beginner’s Guide to SEO, a good basic online resource.

    Once you have your SEO campaign in place, aeweb can help by making the technical changes and additions to your Web site that you’ve determined you want.