Hanna Bernard – Graphic Designer: After almost ten successful years in Sweden, Hanna moved to the Bay Area/Silicon Valley and took her company with her. In the Bay Area, she had the pleasure to work on several projects for some of the biggest, most well-known high-tech players in the Silicon Valley such as Sun Microsystems, Cisco Systems, Siemens, Baan, UC Berkeley, and Netscape, among others.

Drop Box sample

Is my website mobile friendly?

To truly test if your site is mobile friendly (or “responsive” which it also is called), you can use Google’s test page here » Simply add your site’s domain (address) and it will give you a report of what’s not mobile-friendly on your site.

 

Then, there is one very quick way to find out if your website is visibly mobile friendly by “grabbing” the bottom right corner of your browser window with the cursor/pointer and make the window really narrow.

If your website rearranges the content so you still can see everything by only having scrolling up/down, then your site probably is good.

If you also have to scroll sideways, your site is not mobile-friendly and most search engines will punish your site by ranking it lower in a search.

Mobile friendly site

On a regular screen:

On a mobile screen:

Only need to scroll up/down to see all content as it reformats to fit the narrower screen.

Not mobile friendly site

On a regular screen:

On a mobile screen:

Note the scroll bar sideways as well as up/down. That means some of the content will end up outside of the screen on smaller devices and you would need to scroll sideways to see everything.

Pacific Crest Gallery’s website

1st Draft — home page

Design notes — top to bottom:

  1. Sun art will be replaced with actual logo
  2. Big photo/text is a slideshow of images with unique text for each image. Can be used for specials, seasonal, featured, etc. Links to product’s page.
  3. Three center blocks. Content is just suggestion. You decide what goes here.
  4. Four footer blocks. Content is just suggestion. These four blocks can be used as needed.

pcg_layout

IntraPoint PPT Template

Scandinavian Executive

Webbdesign, 1a förslaget

Det stora fotot längst upp kan vara en slideshow med 3-4 foton. Vi kan antingen ha välkomsttexten statisk eller byta ut text när det är en annan bild — kanske spinna på era 4 huvudrubriker?

Om vi gör det kanske välkomsttexten borde placeras lite längre ner på hemsidan istället. Upp till vad ni tycker är viktigaste informationen.

Här kan ni se temats mobilversion.

scandinavian_executive_layout

What’s the difference between a Page and a Post?

Pages are static content that are not time dependent. Normally, your website’s “static” content is used on Pages, like the About, Services, Contact etc. pages.

Posts are a dynamic content type. They have a timestamp and will be listed on your website in reverse chronological order. Each post is assigned to a Category. You can also Tag your posts. Posts are displayed in an RSS Feed.

Blogs use Posts as they can be organized in a manner so the reader easily can find a post about a specific subject or from a specific time.

Add a page

Add a page

  • Go to “Pages —> Add New”

    Screen Shot 2013-10-10 at 2.08.08 PM

  • Follow these steps to add and format your page’s content:
    • Add your headline (this is also what the page’s name will be)
    • Add the page’s content in the content area
    • Format your content using the formatting tools
      Screen Shot 2013-11-22 at 11.06.40 AM
    • Click “Publish” when done — you have now created a new page!
  • Do you want to add your new Page to your site’s navigation bar? Instructions here.
  • Full instructions here »

Add a post

Add a post

  • Go to “Posts —> Add New”
    Screen Shot 2013-10-15 at 9.17.11 AM
  • Follow these steps to add and format your post’s content:
    • Add your headline (this is also what the post’s name will be)
    • If the content is copied from somewhere else (Word, internet, etc.) you need to insert it without the old formatting as this most likely will create conflicts with your website’s formatting settings). Make sure you click the little “T” icon to “paste as text,” which will strip out any formatting and related issues.
    • Add the post’s content in the content area
    • Format your content using the formatting tools
      Screen Shot 2013-11-22 at 11.06.40 AM
    • Select the Category this post will go in (categories are set up for each website’s needs, you check which one of the available categories this goes into — or, you can also create a new category if you need to).
    • Click “Publish” when done — you have now created a new blog post!
  • Full instructions here »

Format your text

Formatting

There are two modes of editing: Visual and Text. Choose the mode by clicking on the appropriate tab. Visual mode gives you a WYSIWYG editor. The Text mode allows you to enter HTML along with your post text.

Screen Shot 2014-01-10 at 2.25.35 PM

Our instructions below are based on using the “Visual” mode so make sure that tab is active before you move ahead.

In Edit Page or Post view, you have a formatting panel that you use to format your text.

Screen Shot 2014-01-10 at 2.15.42 PM

When you highlight a selection of text, you can apply various formats or functions to that text using the tools in the formatting toolbar. Note! You must have the text highlighted for the formatting to apply to it (see sample below).

Screen Shot 2014-01-10 at 2.17.12 PM

These are the available options, top left to bottom right:

Top row of tools:

  • Screen Shot 2014-01-10 at 3.02.16 PM – Bold
  • Screen Shot 2014-01-10 at 3.02.20 PM – Italic
  • Screen Shot 2014-01-10 at 3.02.25 PM – Strike through
  • Screen Shot 2014-01-10 at 3.02.29 PM – Bulleted list
  • Screen Shot 2014-01-10 at 3.02.33 PM – Numbered list
  • Screen Shot 2014-01-10 at 3.02.37 PM – Quote (creates a block of text that stands out – the look of this on your own website may look different as each website has its own custom fonts and layout:)

Quote Sample: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

  • Screen Shot 2014-01-10 at 2.21.23 PM – left, center and right justified.
  • Screen Shot 2014-01-10 at 2.22.34 PM – Link and unlink tool. More info here »
  • Screen Shot 2014-01-10 at 2.23.40 PM – Read more link and distraction free writing – not used much.
  • Screen Shot 2014-01-10 at 2.33.33 PM – Show/hide second row of formatting (click this if you don’t see the following tools)

Bottom row of tools:

  • Screen Shot 2014-01-10 at 3.03.54 PM – explained in detail below
  • Screen Shot 2014-01-10 at 3.03.59 PM – Underline
  • Screen Shot 2014-01-10 at 2.35.33 PM – Justify text (even right and left margin)
  • Screen Shot 2014-01-10 at 2.36.06 PM – Text color
  • Screen Shot 2014-01-10 at 2.38.56 PM – Paste as Plain text (T) or Paste from Word (W). Copy text from RTF or Word files and paste into these tools to keep formatting when inserted.
  • Screen Shot 2014-01-10 at 2.40.52 PM – Remove formatting. If you paste text directly from another webpage or Word it sometimes bring with unwanted formatting. Highlight the text and use this tool to remove all formatting.
  • Screen Shot 2014-01-10 at 2.42.05 PM – Inserts special characters into your text.
  • Screen Shot 2014-01-10 at 2.42.09 PM – Indent/outdent one step
  • Screen Shot 2014-01-10 at 2.43.49 PM – Undo, Redo and Help

Paragraph format samples – NOTE, each website has it’s own custom formatting set for these formats. But this gives you the idea even if your website’s fonts might be very different from what’s shown below:
Screen Shot 2014-01-10 at 2.44.27 PM

Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

Address:
Company
P.O. Box 1234
Stateline, NV 89070
preformatted

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Log In

Log in

  • Click “Log In” in your website’s footer area.
  • OR, add “/wp-login.php” to the end of your domain name in the browser’s address bar (example: www.mywebsite.com/wp-login.php).
  • In the login window, enter your username and password (supplied to you by your web developer).
    Screen Shot 2013-11-22 at 11.09.18 AM
  • If you select “Remember Me,” the computer will save you username/password for this particular website. Not recommended on you’re not using your own computer.

How to find Help

Help is always nearby

As long as you are logged in to your website, you can always click the “Help” tab at the top right corner of your screen. This tab has the information you need, depending on which page you are on and what you’re trying to do. Very useful!

product_caramelapples

Here’s an example of the Help sections available in “Edit Post” view:
Screen Shot 2014-06-17 at 9.39.26 AM

If you don’t find what you are looking for, simply click the link for “Support Forums” in the bottom right corner of the Help tab window and you will be taken to WordPress’ Support Forums where you can type in a question or search phrase.

Then there’s also the WordPress FAQ directory where you can find answers to many starter questions.

Help I messed up! I trashed a page by mistake

Let’s say you accidentally delete a Page or Post only to realize you shouldn’t have… Well, it’s not so bad. The Page or Post will stay in the “Trash” until you empty the trash manually.

Here’s how you restore (“untrash”) a Page or Post from the Trash:

  1. Go to Posts —> All Posts or Pages —> All Pages (depending on what you want back).
    Screen Shot 2014-06-13 at 5.03.02 PM
  2. At the very top of the directory of all your Pages or Posts, look for the “Trash” link and click it.
    Screen Shot 2014-06-13 at 5.05.42 PM
  3. Select the Page (or Post if you’re in the Post’s Trash) that you want to restore and click “Restore.”
    Screen Shot 2014-06-13 at 5.07.11 PM
  4. Your Page is now moved out of the trash and back into your directory of All Pages (or Posts).
  5. Your page is back in the directory as well as on the site!
    Screen Shot 2014-06-13 at 5.08.39 PM

Help, I messed up! I accidentally erased the content on my page or post!

WordPress automatically saves your work as you type so you don’t have to worry if your computer crashes or you make a mistake. Want to go back to a previous version? Not a problem. Every time you hit save, WordPress creates a snapshot that you can restore with a single click.

What if you accidentally erase the text on a Page or Post and hit “Publish” when you shouldn’t have. It happens to the best. That’s why we know how to fix it 😉

Here’s what you do if you need to bring back the previous version on a Page or Post:

  1. Go to the “Edit Page” (or Edit Post) for the page you edited incorrectly or accidentally erased the content on.
  2. In “Edit” view, go to “Screen Options” and make sure “Revisions” is selected.
    Screen Shot 2014-06-16 at 9.45.58 AM
  3. Scroll down to the “Revisions” tab (below your content editor window).
    Screen Shot 2014-06-16 at 10.10.03 AM
  4. Select a revision that’s the latest one you did BEFORE you made a mistake that you want to have undone.
  5. Your current page’s content will now be compared with the revision you chose. If you want to restore the older revision, simply click “Restore This Revision” and the page will be restored to an earlier version, overwriting the edits you made that you didn’t like.Screen Shot 2014-06-16 at 10.11.15 AM
  6. You can now redo your edits to your page without the mistakes 😉

Add a link to another page or website

To add a link in your text that links a word to another page or website, do the following:

  • Highlight the word or name in your text that you want to hyperlink
    product
  • With the word highlighted, click the “Link” icon
    product
  • In the Link window, either select an existing page to link to:
    product
  • OR, an external website (copy and paste the url from the site you want to link to, don’t forget the “http://”) — it is recommended you select “Open link in a new window” for all external links so people don’t get linked away from your website.
    product

Add an email link

To add an email link like this:

hanna@highmarkdesigns.com
or
email me

Follow these steps:

  1. Type the text you want as your email link.
  2. Highlight the text
    Screen Shot 2014-08-26 at 9.18.20 AM
  3. With the text highlighted, click the “Link” symbol in the formatting bar
    Screen Shot 2014-08-26 at 9.18.57 AM
  4. Insert the following in the url field — mailto: followed by the email address:
    Screen Shot 2014-08-26 at 9.19.53 AM
  5. Click “Add Link”
  6. Your email link now has an underline to indicate it’s been linked:
    hanna@highmarkdesigns.com
  7. You can also add an email link the same way to an image or a word.

Upload and link a document (PDF or Word)

  1. Place your cursor in the text where you want your file link to be
  2. Click “Add Media” to upload your PDF or Word document
  3. In the “Add Media” window, type a title for your download link
    Screen Shot 2014-08-26 at 9.34.48 AM
  4. Click “Insert into post” and you will have a link like this in your text:
    My Word Doc
  5. If you want your file to open in a new window (preferred) instead of opening in the current window, do the following:
    1. Highlight your file link
    2. Click the Link tool in the toolbar
      Screen Shot 2014-08-26 at 9.18.57 AM
    3. Check the “Open link in a new window/tab” option
      Screen Shot 2014-08-26 at 9.38.29 AM
    4. Click “Update”
    5. Done.

Note! There is a difference between uploading a PDF v.s. a Word document. Web browsers can’t open and display a Word document, and will download the Word file directly to the user’s desktop instead.

If you upload a PDF to your page, the PDF will open in the browser window instead of download when clicked. The user then has the option to download the PDF if he/she wants to.

Layout Settings

You can choose the layout of your page based on what’s available for your specific theme. Most theme has a default layout set that includes a sidebar. The “default” means that each time you create a new Page or Post, the default Layout is used.

But let’s say you are creating a page with something wide in the content and you don’t want it squeezed in next to a sidebar. Instead, you can select a page layout that doesn’t have a sidebar.

There are two ways to change the Layout Settings:

  1. In “Edit” or “Add New” view for your Page or Post, scroll down below the text editor window to the “Layout Settings” area* and select the layout that fits your content. Your options in the case below is Content/Sidebar, Sidebar/Content or Full Width.
    Screen Shot 2014-06-17 at 9.29.28 AM
    * If you don’t see the “Layout Settings” area, go to Screen Options and make sure Layout Settings gets enabled.
  2. Under “Page Attributes” in the right sidebar. Click the drop-down under “Template” and select the template (layout) you want for your current page. The selection might vary from theme to theme.
    Screen Shot 2014-06-19 at 8.57.10 AM
    * If you don’t see the “Page Attributes” area, go to Screen Options and make sure Page Attributes gets enabled.

Add an image or media

Add an image or media

  • You can upload and insert media (images, audio, documents, etc.) by clicking the Add Media button

    Screen Shot 2013-10-10 at 2.15.20 PM

    You can select from the images and files already uploaded to the Media Library, or upload new media to add to your page or post.

  • If your site is updated to the latest version of WordPress, you can just drag/drop your image into the content area (in Edit view) without using the “Add Media” button.
  • To create an image gallery, select the images to add and click the “Create a new gallery” button.
  • Full instructions here »
  • You can also embed media from many popular websites including Twitter, YouTube, Flickr and others by pasting the media URL on its own line into the content of your post/page. Please refer to the Codex to learn more about embeds.