Lorelle on WordPress

In this section of Lorelle’s WordPress School free online course we are exploring the web browser, our gateway to the web, and how it impacts our use of WordPress.

In this tutorial you are going to learn some very basic features and functions of the web browser:

• The Address and Search Bar
• The Right Click Menu
• Keyboard Shortcuts

While this may seem academic for most of you, I’m always surprised at how few students and clients of mine know how to find the address of a website to copy or change, don’t know how to right click or even that this is an option on a mouse, nor how to use the most simple of keyboard shortcuts that are universal across almost all software, online and off.

There is no shame in not knowing, and now it is time to learn as these are browser features and functions you will use every day with WordPress.

Here are a few terms and web browser features I will be referring to during these tutorials.

• Screen: While WordPress refers to each of the Administration area interface as Screens, when I refer to a screen in these tutorials I mean the screen of your computer.
• Window: Software works in windows, even if you are not using Microsoft Windows. They are the interface windows for each program. If you have Microsoft Word open, it would be open in a window. If you have Firefox open, it would be open in its own window. You may have multiple programs open at the same time, each one in a window, and some programs will allow you to open it multiple times, each one in a separate window. Think of windows as sheets of paper on your desk. The page you are reading is on top, but the others are sitting there waiting for you to read. Just switch to the page to bring it to the front to work on that page, and the others will slip behind. There is no need to file each page away every time you switch to another, then dig it out when you need it a minute later. That wouldn’t be useful nor efficient. Leave the windows open you need. Your computer can take it. It’s designed to do so. It hurts nothing and makes your computer experience faster and more enjoyable.
• Browser Tabs: A browser tab is a “window” within a web browser that allows you to have multiple web pages open within a single window of the application. They are typically featured at the top under the address bar.
• Address Bar: The area at the top of the browser window with the address of the web page you are viewing.
• Browser Menu: The browser menu is the access area to change the browser’s settings and use features and functions of the program. Many web browsers are minimizing the control areas of their screens, removing the standardized File, Edit, View, Help, etc., menu options from the top of the window to a three bar drop down menu. Click it to access the menu options.

Address and Search Bar

All web browsers place the address bar at the top of the web browser window, even on mobile devices. Look for the URL for this website at the top of the window.

To copy a website address, known as a URL, to use in your WordPress site to link to a web page or website:

1. Select the link in the web browser address bar
2. Copy the link
3. Switch to your WordPress site tab
4. Type in the words you wish to link to, select, and click the Link button
5. Paste in the link in the link form
6. Type in the Title with the site name, article name, or a description of what the reader will see if they click the link
7. Click Insert Link

More specific details on using links may be found in the link tutorial for this course.

Having trouble accessing the address bar or search?

Your first keyboard shortcuts to learn are:

• Move to Address Bar – CTRL+CMD+L: Jumps your cursor to the address bar.
• Move to Search Bar – CTRL/CMD+K or E: If the browser has a separate search bar, which Chrome does not, it moves the cursor to there so you can start typing your search words. (E is for IE and Opera)

Let’s dig deeper into the search feature on web browsers.

Search Feature

You may type in google.com to start your search, or use the one that comes with your email like AOL or Yahoo, but did you know you can search right from the address bar without going through a web page first?

Most web browsers permit searching directly from the address bar. Type in the words you wish to find information on and hit enter. The browser will use the default main search engine.

Chrome doesn’t offer a secondary search form, but many do. It is next to the address bar and labeled Search. To initiate a search, type in the word(s) you wish to find and hit enter.

Don’t like your search engine? In December 2014, Firefox switched their default search engine to Yahoo in an effort to promote choice and innovation in choosing a search engine. When the Google agreement as a partner with Firefox came up for renewal last year, Google didn’t want to play, but Yahoo did. While this is beneficial to Firefox and Firefox users in many ways, many felt confused and betrayed as they didn’t understand what was going on.

You have a choice as to which search engine is the default search engine in every web browser you use. To set the default search engine:

1. Go to the Menu of the web browser and look for Options or Settings, typically a gear shaped graphic
2. Go to Search Engines or Search
3. Set the default search engine
4. You may also add or remove other search engines. These are available on the search bar through a drop down menu allowing you to switch between search engines.

The Web Browser Right Click

I think that the right click menu is one of the most powerful and ignored tools we have in our computers. In the web browser, it is a shortcut to a world of options.

Each web browser offers different features and functions under the right click, but most of them are standardized.

• Back and Forward: There are back and forward buttons above the address bar in the browser but why move your mouse from where it is to access them? Just right click and choose back or forward to move through your web page browsing queue in the same tab
• Reload/Refresh: Like the back and forward buttons, there is a reload or refresh button on the address bar, but use this to minimize your mousing.
• Save Page As/Save As: Want to refer to a web page again or keep it in a folder on your computer for viewing offline or for reference? Use the Save As feature and the web page and its content and images will be saved as a web file and attached folder on your computer. Keep your reference web pages saved in a specific folder so you can find them later. This is accessible also from the menu via the mouse and through the keyboard shortcut CTRL/CMD+S.
• Favorite/Bookmark: Firefox and some other browsers (not Chrome) offer quick bookmarking from the right click menu. This is also accessible through the keyboard shortcut CTRL/CMD+D.
• View Page Source: As covered in a tutorial, there is a right click menu option to view the web page source code under the hood. This is also accessed by the keyboard shortcut CTRL/CMD+U on most browsers.

There are other right click menu options and many browser add-ons and extensions that add more features and functionality that we will cover later in this web browser tutorial.

Keyboard Shortcuts

Keyboard shortcuts keep your fingers on the keyboard working. Time spent reaching for the mouse or screen wastes time. The sooner you learn these simple and frequently used keyboard shortcuts, the more you keep your hands on the keyboard and the faster you use WordPress and blog.

Most keyboard shortcuts involve the use of the CTRL or CMD keys plus another key or two, or the combination of keys plus mouse clicks.

The best keyboard shortcut to improve efficiency in the web browser is the CTRL/CMD+F, the find or search on a web page. You know what you are looking for. Why read through everything on the web page to see if this is THE answer to your question? Hit the keyboard shortcut and type in the words you are looking for and move through the web page to the answer. If it is the right place, then move back to the top and read through at your own pace. This shortcut key is fairly universal among all contextual programs such as word processors and text editors.

The most common keyboard shortcuts are for editing:

• Copy: Select the text and hit CTRL/CMD+C to copy
• Cut: Select the text and hit CTRL/CMD+X to cut the text to move it somewhere else
• Paste: Place the cursor where you wish the text or content to be and hit CTRL/CMD+P to paste
• Undo: To undo your last attempt, hit CTRL/CMD+Z. If the software or app permits, repeat the keyboard shortcut to undo back several steps.
• Move to Top/Bottom of Web Page – CTRL+Home/End: Get to the bottom of a web page and need to go to the top to click a link in the top level navigation or to content at the top? These will move you up and down the web page easily, and do the same with most contextual programs like word processors and text editors.
• Move Down or Up One Screen: Maybe moving to the top and bottom is too drastic a shift and you just want to scroll up or down within the web page. The spacebar will take you down a screen and SHIFT+spacebar will take you back up.

I use these daily with WordPress content, copying, cutting, and moving things around and pasting them in place. And if it weren’t for undo, especially multiple undos…oh, agony. I use the undo constantly to fix my mistakes or change my mind.

Some more used daily when writing and editing and developing your story ideas and research for content include:

• Save: CTRL/CMD+S to save the file you are working on (word processor, text editor, etc.). In the browser, it works the same as the Save As feature.
• Bookmark: CTRL/CMD+D to save the web page to your bookmarks or favorites
• Close Tab/Window: To close a tab in a browser or a window of a program, you probably move the mouse up to the upper right corner or wherever that small universal X. The keyboard shortcut to do this faster is CTRL/CMD+W.

Having trouble reading the words or seeing the screen? To zoom in or out and increase or decrease font sizes and your perspective on the web page, CTRL/CMD+Plus/Minus. CTRL/CMD+Zero returns the screen to normal view. You can do the same with the CTRL/CMD key and the scroll wheel of your mouse.

Have you seen Eddie Izzard’s video from the finale of his concert tour “Glorious?” He addresses the issue of technofear, the fear of breaking the Internet, in a beautiful skit, celebrating his technojoy. While it has language found irritating to some, this is worth a watch as he demonstrates several keyboard shortcuts and the frustrations we all have toward our computers.

One of my favorite mimes he uses is one of my favorite keyboard shortcuts, the escape key. Want to stop a web page loading? Hit escape. Many times I’ve clicked a link without meaning to or find a web page trying to load, going on and on and on. Hit escape to stop the process. If you need to reload, use the F5 or keyboard shortcuts listed below. I use escape on a regular basis to stop a process in the browser and reload. It saves bandwidth and time.

Another one he mentions is the keyboard shortcut to print, CTRL/CMD+P. It can be challenging to hunt through the menus to find the print command to print out a web page for reference or later reading, and this is the key.

When working with a WordPress site, you are constantly refreshing or reloading the web page, especially using the Two Tab Preview Method, you will use the following keyboard shortcuts, saving you time and micro-muscle movement involved in the search for the reload button on the browser toolbar.

• Firefox and others: F5 or CTRL+Shift+R (full refresh) (Firefox only)
• Mac – CMD+R

One of the most important reasons for WordPress users using the reload or refresh functions of a browser is to reload the web page so you may see changes in WordPress content and design as you are working on your projects. However, the job of the browser is to also speed up your web browsing experience. It saves data and design elements to your computer’s hard drive to make reloading the page faster on the next visit. This makes it problematic for seeing the changes you make as you work on the website. The following section explains this and how to overcome the problem when you make changes and nothing happens.

Understanding Browser Cache

To speed up the web, most web browsers save web pages in temporary Internet file directories on your computer. When you revisit the page or site, these reload from your computer rather than downloading and transferring the information from the web every time.

The process is known as caching and the files are called the cache.

While this process helps typical web users, it is detrimental to the process of web design and development. One of the earliest tutorials in the WordPress Codex, the online manual for WordPress users, was dedicated to this topic: “I Make Changes and Nothing Happens.”

Make a change in the content or design or code of a web page or site and the browser will continue to show you the previous version rather than the current version. This has frustrated web designers and developers for decades.

To work around this web browser feature, here are some tips.

• Force reloading/refreshing of a web page after making changes to the code or content.
  1. In Firefox use CTRL+Shift+R for a full refresh.
  2. On Mac use CMD+R.
  3. Unfortunately, this doesn’t always work. Make several attempts before clearing the cache of the browser.
• In WordPress, when previewing a post using the Preview function, sometimes refreshing the page will show changes.
  • If it does not, switch back to the Post Editing screen and click PREVIEW again (or Right Click > Open link in new tab on Preview button). A refreshed preview will appear in the tab next door.
• If the browser cache issue persists, you have two options.
  • Use a different web browser. Either start fresh with a new browser or open the web page you are working on in one browser and edit from another.
  • Clear the browser cache.
    • Go to Tools or Options and look for the feature to clear the browser cache.
    • In Firefox, it is Tools > Options > Privacy > Clear Recent History. In Chrome, it is Tools/Options > Tools > Clear Browsing Data.
    • NOTE: Avoid clearing your passwords and logins, just the browsing history.

For more information on browser cache and clearing it:

• How to Clear Browser Cache in Firefox, Safari, IE, Chrome, and Opera | Digital Trends
• Want to Browse Faster? Stop Clearing Your Browser Cache
• 16 Ways to Clear Your Browser’s Cache – wikiHow
• Internet Explorer 9, 10 and 11 (Win) – Clearing Cache and Cookies
• Delete your cache, history, and other browser data – Chrome Help
• How to clear the Firefox cache | Firefox Help

More Information on Browser Navigation and Shortcuts

I’ve barely touched on the features and functions found in today’s web browsers to make your web browsing experience faster and more efficient. For more information on web browser keyboard shortcuts and other navigational features:

• The Complete Keyboard Shortcuts List You Must Have” from Lifehack
• Standard Browser Keyboard Shortcuts – Coding Horror
• Firefox and other Browser Keyboard Shortcuts (Comparison Table) – DMCritchie
• Table of keyboard shortcuts – Wikipedia, the free encyclopedia
• 47 Keyboard Shortcuts That Work in All Web Browsers – How to Geek
• 65 Keyboard Shortcuts for Internet Explorer 8 – Shortcut World
• Accessibility Help – Use the Keyboard to Navigate Screens (US Requirements Keyboard Shortcut List) – US Social Security Office Website
• Browser Shortcuts For Internet Explorer, Chrome and Firefox – Webopedia
• Keyboard shortcuts – Chrome Help
• Keyboard shortcuts – Perform common Firefox tasks quickly – Firefox Help
• Web Browser Guide for Bloggers” on The Blog Herald by Lorelle VanFossen

Assignment

Your assignment is to go through these features, the right click, keyboard shortcuts, and all the ways of moving in and around a web page and practice, practice, practice.

Incorporate these navigational shortcuts and features into your day-to-day browsing experience. Compare how long it takes for you to do the same actions on the keyboard compared to moving your hand to the mouse.

Also note your body position. Web experts and developers often worry about how so much time spent glued to our computers is impacting our health and body. I’ve noticed people sitting more upright when they stay on the keyboard and slouch, often leaning toward or away to the side, when they shift to the mouse.

There is more web goodness coming up next.

Join us in our discussions on this assignment in our WordPress School Google+ Community and let us know about how you use the mouse and keyboard to efficiently navigate the web and WordPress.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism