The CoffeeCup Guide to

Responsive Website Design



  • Author
    Bob Visser CoffeeCup Guru
  • Design
    Mateo Carrasco Master of Art
  • Edits
    Suzanne Norvell Tutorial Jedi
  • Document Version
    Version 4.0 October 11, 2019
  • Production Rights
    CoffeeCup Inc. Fresh software, warm people.

The Page Manager

The Page Manager provides you with an index of all the project pages. Add, duplicate, delete pages or rearrange their order. This panel also contains input controls for the head and footer sections. Here you can add the page title, specify metadata, keywords, link-in resources such as JavaScripts, or create a Favicon.

Page Manager

To launch the page manager click on the Pages menu icon and choose Manage Project.

Manage Project

Page Tree

The Page Manager is the command center for all the pages in your project. A list of each page in the project will be listed along the left side. Clicking on the page name will open up it’s properties for editing.

If you want to rearrange their order, simply click the arrow to the right of the page name and drag and drop it to the location of your choice.

Favicon

At the bottom of the page tree, there are icons to Add A New Page, Duplicate, or Delete the currently selected page.

Page Name

The Page Name is used in the web link. For example, the web link would be 'www.example.com/page-name'. When you create links between pages you’ll insert the page name.

Link

Remember to never use spaces within your page names. If your page names are multi-words long, always use hyphens to separate the words, or smush them together to make one long word.

For example, if you have a Button Link or Link element that you want to the food page, the link would be formatted as the page-name.html

Page Title

The Title is used to show the title of the page in the "title bar" of a web browser. The element serves the purpose of being your headline or "one line string" for a given page and is perhaps the single most important component when it comes to search engine rankings. Its contents are almost always the title that search engines use to list your website in their results pages (SERPS).

For maximum effect, the title should be no longer than 60 characters (including spaces) and have correct grammar. Be sure not to abuse this element by "stuffing" it with keywords. This increases the chance of search engines banning your web page and simultaneously decreasing the likelihood of catching the visitor's attention—neither of which are a good thing!

Language

The Language dropdown allows you to set the language tag for the page. This is read by the search engines.

Favicon

Import a graphic and set it as your Favicon using the drop down feature. Short for 'favorite icon' this is a tiny graphic that appears in the web browser tab when your site is opened.

Favicon

These icons are also used by mobile phones when saving a webpage to your favorites or bookmarks.

Favicon

Use the drop down menu to select a local or online source for your site's favicon.

Description

The Description gives you the opportunity to provide a brief description of the contents of the web page. The recommended length for this tag is 128 characters (including spaces) for cross-engine compliance.

Although you may wish to extend its range to a 200 character maximum, which is permissible so long as you do not "stuff" it with keywords and the description is an accurate reflection of the contents of the web page. If the description is worded correctly it can significantly increase the quantity of traffic driven to your website.

Use Global

If you want pages to share the same properties, use the checkbox ‘Use Global'. This will apply the settings to all the pages.

For Keywords & Description, if global items are specified, A box below will pop up just in case you would like to also configure page-specific content.

Keywords

Keywords should be words or phrases that you people use when searching for a site like yours. Each keyword for your website should be accurate enough to describe your site's content, yet general enough for potential customers to use as a search phrase in the search engines.

Keywords in total should be no longer than 250 characters (including spaces) in length, should contain no repeated words or phrases, and each word should be comma delimited.

The Head is the simply the <head> </head> section of your page. Here you can insert links to external JavaScripts, CSS and more. While the Footer gives you access to the area before the closing </body> tag. You can insert JavaScript and other items here as well.