With the current post-Thanksgiving surge and subsequent lockdown, I am feeling ANGRY at people who deny the pandemic and won’t wear a mask or social distance, because they SPREAD the virus even if they themselves don’t get sick. Or they take up ICU beds if they do get sick. Even if I take the recommended precautions, they are not perfect and for success they rely on a low positivity rate.
I have added mail order shopping for dry goods, to reduce the frequency of my grocery store visits. I think I’ve got it down to once a month, but It takes me extra time to plan my purchases and recipes so carefully. And results in freezer and fridge gridlock right after a grocery trip. I’ve made these changes in spite of the difficulty, because something that gives me pleasure and keeps me healthy is eating tasty, fresh, homemade food. Plus I no longer do carryout since the pandemic started.
Will I be able to get into the grocery store on my next trip (Costco) now that shopper capacity is restricted to 20% of capacity? Or how long will I need to wait in line to get in, even during senior hours? I’ll likely be shopping indoors near the same amount of people as a month ago, but with a higher positivity rate, the chance of getting infected is higher. (As I mentioned above.) Even though I’m better off than most, I still don’t like this situation!
Serve pages FAST on mobile devices. Stripped-down pages load quickly because of less data and cached on Google servers.
AMP pages are displayed only when clicked on from Google search results, and only to mobile users.
Your AMP should offer a user experience equivalent to the corresponding non-AMP page, as much as possible
Google favors AMP pages
Backlinks to AMP pages found through Google search won’t transfer any link equity to your site
Limitations
AMP HTML: no forms allowed.
Limited JavaScript. All CSS must be inline and is limited in size.
It’s not clear why can’t an AMP page link to non-AMP page that contains the form: “”AMP pages must be recognized as being fully isolated. There is no navigation to the rest of your site, nor is there support for your homepage, blog indexes, etc.” Really? Doesn’t this rule break the web?
How important is it for WP theme to be AMP-compliant? All the standard templates are plus Genesis Framework and two Genesis child themes. Docs claim other themes can be made compliant with minimal changes
AMP pages’ enhanced load speed and boosted search rankings come with an ironic trade-off: backlinks to AMP pages found through Google search won’t transfer any link equity to your site.
Strategies to implement AMP:
Use WordPress AMP plugin
Code your AMP pages by hand, as separate pages, and served from a folder within the main website (my untested idea)
Steps for WordPress and how it works:
Install the AMP plugin, configure for reader mode (another mode codes ALL pages as AMP)
https://wordpress.org/plugins/amp/
Install Yoast SEO plugin if not already there
Install the plugin “Glue for Yoast SEO & AMP”
– might be needed to config AMP for more than single post pages
Create your AMP
– create AMP pages in AMP HTML
– set your AMP link strategy
– create the two canonical links in the <head> section of both pages via Yoast
Add structured data to enable AMP-specific features in search results e.g. in top pages carousel – step might be optional
Add structured data to enable AMP-specific features in search results.
Check your AMP and fix problems
– AMP must be valid in order for Google to accept/index
Update the Google Cache for your AMP – get your AMP onto Google servers
– How? And, Google cache is part of why pages serve so quickly
Check AMP at Google Search Console
– Search Appearance > Accelerated Mobile Pages
– it may take some time (how long?) for your AMP to appear
Some Details:
How to tell Google there’s an AMP variant of your web page? We add information about the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>.
WPBeginner: brief introduction, there’s gotta be more, such as how to update Google cache?
– set “reader” mode if you want to set up a limited set of AMP pages, for the most important or most visited pages
– focuses on changing APPEARANCE of AMP – why?
– Yoast plugin? will set up the canonical URLS
amp.dev: Specifics for implementing AMP outside of a CMS, should be helpful in using WP AMP plugin
Getting Started with AMP on Google Search: https://developers.google.com/search/docs/guides/enhance-amp
Codelabs: Seem like tutorials to learn AMP, E.g. the AMP Foundations “lab” is here:
https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-foundations/#0
Tools and Resources:
Validate AMP pages: article is here: https://amp.dev/documentation
AMP test tool is here: https://search.google.com/test/amp
Validate structured markup on pages: https://search.google.com/structured-data/testing-tool
– Google does not penalize websites for not using AMP.
– alternatives: improve your website’s speed and performance on mobile to compete for mobile search audience
I was surprised to see that my big client’s LIVE website was automatically updated to WP 5.0.1. It appears my client is letting SiteGround’s auto updater do this. What is your philosophy of allowing WordPress automatic updates vs. doing them manually?
I see WPBeginner describes how we can fine tune the type of auto updates by installing the Easy Updates Manager plugin:
It’s highly rated, does anyone have experience with this plugin, or recommend a different plugin, or would you rather set variables in wp-config.php to configure the auto updates?
WordPress default is to auto update WP core minor updates only. However you can control: whether to automatically update plugins, themes, WP core MAJOR updates, or disallow ALL auto updates.
More info on this topic, including pros and cons of auto updating, can be found here:
https://www.wpbeginner.com/wp-tutorials/how-to-disable-automatic-updates-in-wordpress/
Note that the likelihood of a WordPress update breaking your website can depend on whether you’ve modified core WordPress files of your website, or whether you have a LOT of plugins which can conflict with each other.
My preference is to apply ANY update manually, at a time of my choosing, so I can backup before, apply the updates, then check the website. But that’s time consuming. Has anyone experienced a WordPress (or plugin) update that broke a website? What turned out to be the cause?
Changing the Alignment of a Picture within your PostCreating a Link Within a PostEditing a Link: Setting a Link to open in a New TabWhat was This About? Anyway, Here’s How to Switch Between Visual and Text Mode in the WordPress Post Editor
The add new post form appears. Make sure the Visual tab in the editor is in front. Fill in your title and text and check the category (KQED Perspectives). Fill in the date in the “publish” block upper right, which determines the ordering in the Perspectives widget.
Fill in Your Post’s Content: Title, Text, Category, Date etc.
Creating a Link
Also fill in the Perspective’s date within the post text along with a link to the audio version:
Start by copying the date and link from another Perspective.
(Oops I got lost – edit/update needed!)
Once you can see the old link (in that other Perspective), click anywhere within it, to make an edit link short form appear. Hit the little pencil to paste in the new Perspective link (from your other browser tab)
Hit the link options icon to be sure the link will open in a new tab
Hit the little blue “apply” arrow to save your link changes.
Choose Link Options to Open a Link in a New Tab
Hit publish to publish your Perspective.
Finally, check your work from the front end. If your Perspective is the newest one, it should appear first in the list. Make sure your audio version link goes to your intended page. Make any necessary corrections.
Check Your Work , from the Website’s Front End
Optional: add tags to your post
Adding tags for SEO seems redundant in this case, as the title is already “Christmas Cards” – but as author you may have other meaningful words in mind.
Some websites may use the tags to find/show posts according to their tags. At such a website the purpose would guide you as to the words.
I figured how how to override an arbitrary file in a child theme. It is ALMOST as simple as placing the override file in the corresponding folder for the child theme. The step I didn’t know about, was to add a require_once() for the specific file in the child theme’s functions.php. Here is my example step by step:
My example is how to replace the font list in Customizr theme, with my own font list.
1) If I were to “hack” the parent theme to make this change, I’d change the file wp-content/themes/customizr/core/init-base.php
2) Make a copy of core/init-base.php, make your changes, and place it in the child theme’s folder: wp-content/themes/customizr-child/core/init-base.php. Note you must create a “core” folder in which to place init-base.php — you must replicate the full path of the overridden file (or whatever file you refer to in step 3).
The overriding file is in the “core” folder
3) Modify your child theme’s functions.php to include the overriding file, by adding the following line:
When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). Because the parent template’s style.css is replaced by your child theme’s style.css, and your style.css resides in the root of your child theme’s subdirectory, get_stylesheet_directory() points to your child theme’s directory (not the parent theme’s directory).
Here’s an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme’s directory structure.
Adding the “require_once” line to the child theme’s functions.php
4) Upload the new file and the modified functions.php to your web server, and the next time you access the font choices in the customizr, you’ll see your new font list.
I found a setting at Customizr, my favorite WordPress theme, which let you choose between “Flat (Classical) Design” and “Material (Modern) Design.” Maybe you have already heard of Flat Design, which means no 3D objects: no shadows, gradients, glow effects etc. I started my reading here:
At the top of this page are three examples of flat design that help us to “get it.” From my previous reading on flat design I had concluded that besides no 3-D, flat meant single page websites with no sidebars. “Flat” as in “no hierarchy.”
Summary:
Users are so familiar with the web that they won’t need the cues provided by 3-D. Others blast flat design for being non-intuitive and trendy. I agree with the latter.
The Nielsen Group (we like Jakob Nielsen since way back) doesn’t like flat design either, mainly because it lacks signifiers on clickable elements. They say “Flat 2.0” may be a better alternative, aka “Material” design:
This article stated that now users are so familiar with the web that they won’t need the cues provided by 3-D. I disagree: I miss tooltips and I don’t like flat edges that make one window blend into another. Though wherever something can be done without, it makes for a cleaner design and one that fits better on a handheld.
The article continued with quotes from web designers saying that flat design aids cross device compability (responsive layout) and in fact led to usability improvements such as bigger input fields, larger buttons, or larger and more legible text. (I agree with those usability improvements, just don’t waste my space with GIANT text if I read your mobile-first page on my desktop.)
However the bottom third of the page is full of feedback blasting flat design as discrimating against the disabled and the elderly and in general wasting people’s time as they try to figure out the page. It’s fun reading, a lot of good rants in there, some of my favorites:
It gave me a sudden appreciation for the gradients, drop shadows, and other design elements I’d taken for granted in more traditional desktop UI – these are useful hints that aid accessibility that we’ve sacrificed because “flat looks cool”. To really judge good design I think you have to show it to users who have never seen it before. All UI is learned, so people will catch on eventually, but my own opinion is that good UI (and good design) should be intuitive – e.g. is that flat rectangle a button?! Hell if I know, guess I’ll click to find out.
Good design is about respect for a user’s time. Sure people can figure out how to wade through an interface with less than obvious cues, but how can you justify stealing even milliseconds from your users? Bad design sucks the life out of humanity and flat design sucks hard. It’s nothing more than wire framing with a little added color. It’s lazy at best and criminal at its worst. When I see plain text acting like a button I hear Christopher Guest’s voice telling me “I just stole one minute of your life, how do you feel?”
Flat Design
It’s like saying “we’re going to remove all signs in a metro station because passengers know it well and the corridors will look cleaner”.
On to
Flat Design: Its Origins, Its Problems, and Why Flat 2.0 is Better for Users
As long as in-line text links are presented in a contrasting color, users will recognize their purpose, even without an underline. (I’ve been doing this for a long time. I often make the underlines appear on links only upon hover)
When Flat Designs Can Work: the potential negative consequences of weak signifiers are diminished when the site has a low information density (is this a good thing?), traditional or consistent layout, and places important interactive elements where they stand out from surrounding elements.
What’s your web design philosophy? What WordPress themes or Joomla templates support this philosophy? Do you have a web page you’d like to show us and point out the main features that contribute to its usability?
An effective promotional post would include a sentence or two (call to action) and an image illustrating your message that linked to a spot to read more. But how to do that? Here’s the best I can find TODAY:
Facebook builds a “Link Preview” if you type a space character after your link.
Prepare your link, message, image, and start your post.
Suggested image size is 560 pixels wide. It will be displayed at full post width, so set the height with that in mind.
Write your message in its entirety, followed by your link and a space
The space will trigger a “link preview” (see picture on right)
Editing a Facebook post: options to upload a photo
The link preview appears to take text from the web page’s meta description tag, and let you cycle through a few images from the page. You can’t edit the meta description part of your post.
If you don’t like any of the pictures or the meta description, you can remove one or both using the tiny faint “X” upper right. That leaves you with the text of your post and an option to UPLOAD a photo.
Facebook ready to post
I don’t see a way to use a photo already existing at your Facebook account. So you must upload from your browser/PC.
The only way to close the image window is to hit the blue “Post” button lower right.
Finished Facebook post, containing a link and a photo.
To the left is the resulting post. My link goes to the URL shown, the photo goes to … not the link, but to some details about the photo.
To summarize, if the page you link to generates a Facebook link preview that you like, visitors may actually click through to your call to action page. If the page you link to doesn’t generate a suitable link, you can upload a photo that may draw visitors’ attention, but only the most dedicated visitor will seek out the tiny text of your URL and click it.
What is your experience creating Facebook posts with links?
I took my screenshots, and described my experience, using Facebook as of April 25, 2017. Have you noticed any improvements since then that you’d like to share?
Our chief Facebook poster at Santa Clara FireSafe Council taught me a communication method today, that I’ve shared with my budding Facebook team at Bicycle Exchange. She says it’s a way for Facebook to be a conduit to your own website. Or any link you want to promote. Maybe this technique will help you too.
Postscript: I believe the ideal link would be words or a picture that link to the action page. However Facebook will only let you post a “link preview” it builds from the page; or you must spell out the link and upload a photo from your browser/PC. The photo can only link to the Facebook photo comments panel. As described in my tutorial.
Facebook post that links to a web page
Our Facebook team at Bicycle Exchange has used this “conduit” technique to recruit more volunteer bicycle mechanics. For example, Ivan has created a post that links a photo to our website’s “Contact” page. Here’s the technique I learned:
1) Identify the action you want the person to take as a result of the post.
2) Identify the photo which describes the action, event, news or fact.
3) In a sentence or two describe the thing and summarize the action you want the reader to take.
4) Link the action words, or the photo (or both?) to … something.
5) The “something” in our case can be a page at the Bicycle Exchange website.
Here’s how to float an image left or right using JCE editor in Joomla, using your template’s custom styles.
Image inserted into article in Joomla JCE editor
1) Create your article in the JCE editor, and get it far enough along that you have your text and image added to the article. Put your image just ahead of the paragraph or list containing the text that’s to be floated alongside the image.
Open the styles pull-down menu
2) Click on your image, then click on the styles pull-down menu to open it. There are a bunch of styles there to choose from, listed in no particular order. Scroll down to find the styles img-right and img-left.
Click to apply the style, observe that the image now floats to the right of the text
3) For our example, click the style img-right and note the image now floats to the right of the text in the JCE design view window.
4) Notice too, that the image now has a thin black border. That is part of the CSS img-right style for this website, as well as custom margins all around the image.
How it works: For each Joomla website I create two custom CSS styles for floating images left or right. I name them something like img-left and img-right, or image-left and image-right. These styles will also apply the border and margins to the image, to match the style of your website.
Front end view, image floated right with thin black border
The margins keep the text some distance from the edges of your image. For an image floated to the right, I set the right margin to zero and the other top, bottom, and left margins to some small distance.
Extra credit: These custom styles go into the custom style sheet for the Joomla template, named something like custom.css. In JCE editor global configuration I specify the location of this CSS file, so that the JCE design view window preview shows your article as it would look with these custom styles applied.
