Glossary For Mobile First Web Design
Accelerated Mobile Pages (AMP) – Theses are lightweight versions of desktop pages that load quicker because they use far less code. AMP is an open source HTML framework originally created by Google as a competitor to Facebook Instant Articles and Apple News. AMP is optimized for mobile web browsing and intended to help webpages load faster.
Setting Up and Testing AMP for WordPress: A Quick Guide by WP Rocket
Best AMP Plugins For WordPress? 5 Options Compared by WPRocket
Bootstrap – is a website design framework enabling faster and easier design. It includes HTML and CSS based design templates for forms, buttons, tables, navigation, modals, image carousels, etc. Also Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops. What is Bootstrap? A Short Bootstrap Tutorial on the What, Why, and How by Toptal
Breakpoint – This is a responsive design term, a breakpoint is the “point” at which a website’s content and design will adapt to a change in user screen size so as to provide the best possible user experience. The best practice is to design for your smallest screen size first i.e. Mobile First design. With larger screen sizes there will come a point at which the design looks bad and this is when you add a break point. Defining Breakpoints by Responsive Design
Browser Caching – every webpage consists of a number of files, browser caching helps by storing some of these files in the website visitors browser so that if the visitor returns to that page within a certain time the page loads more quickly. Browser caching is switched on by the web designer using the .htaccess file.
PageSpeed: Leverage browser caching by GTmetrix
Child Theme – A WordPress Child Theme allows you to change aspects of your site’s appearance at the same time preserving your theme’s look and functionality, which is contained in the Parent Theme (A parent theme is a complete theme which includes all of the required WordPress template files). All themes,– excluding child themes, are parent themes.
Child Themes by WordPress.
Core Web Vitals – Google’s Core Web Vitals (CWVs) are a new set of measurements designed to improve the experience of your webpage’s visitors. CWVs include Page Speed, Resposiveness and Visual Stability. Google has defined the following as the Core Web Vitals”:
- Largest Contentful Paint, which is the time it takes for a webpage’s main content to load. This should be 2.5 seconds or less.
- First Input Delay (FID)– The time it takes from when a user first interacts with your site i.e. when they click a link or tap on a button to the time when the browser is actually able to respond to that action. Ideally this should be <100 ms.
- Cumulative Layout Shift: This is a measure of a webpage stability. Sometimes you can be reading an article on a webpage and suddenly elements move around the page and you then have to find your place again. This movement is called a Layout Shift. Cumulative Layout Shift is a measure of the amount of unexpected layout shift of page content. An ideal measurement is less than 0.1. Optimize Cumulative Layout Shift 05/05/20 by Web.Dev
- Core Web Vitals by Google
- Core Web Vitals Measurements – Performance, Accessability, Best Practices & SEO
- Performance Audit by Google
- Lighthouse by Google
CSS – This stands for Cascading Style Sheets, Style being the important word.In web design HTML is used to structure a web page defining things like headlines and paragraphs, and allowing you to embed images, video, etc., CSS defines the style of the webpage, including the layout, visual effects and background color.
CSS Media query – This is a CSS code that allows webpage content to adapt to different screen sizes and resolutions. Media queries are a fundamental part of responsive web design and are used to customize the appearance of websites for multiple devices. Media Queries Definition by TechTerms
Graceful Degradation Design – this is a way of designing a webpage that fits the largest screen (desktop) first and then adapting it to fit smaller screens. This is the opposite of Progressive Advancement Design.
Gravatar Cache – This allows you to create a local cache with optimized copies of gravatars. The optimization is accomplished by resizing the avatars to the sizes used on your site, in addition to optimizing the images internally. This can be obtained by using a WordPress plugin Optimum Gravatar Cache
Gutenberg is a recently introduced editor used in WordPress. Up to the introduction of Gutenberg the basic WordPress editor was powered by the open-source TinyMCE editor, which had changed very little over the years. Getenberg has been designed to be a lot more like website and page builder tools such as Wix and Squarespace. In Gutenberg the content is set into individual ‘blocks’ such as a pragraph block, an image block ets. Gutenberg has many different types of blocks covering the elements you would normally use in building a WordPress page.
Gutenberg, How to Use the New WordPress Block Editor by CodeinWP
What is gZip compression? by StackOverflow
.htaccess file – short for ‘hypertext access’ file. It is a distributed server configuration file, which configures the server only in the directory the .htaccess file is in, i.e. a specific directory. This could be the root directory for your website or an /images or any other directory. Mainly used on Apache web server.
Introduction to the .htaccess file and how it works by Daniell Morell
Image Optimization – There are two parts to Image Optimization 1) Speed optimization and 2) Correct Image File Naming.
- Image Speed Optimizatin occcurs when you reduce your file size as much as possible without sacrificing the image quality. It’s purpose is to lower your Page Speed.
- Image Name Optimization. This involves correctly naming the image file, the alt attribute etc. to enable the image to rank on Google.
If you use the WordPress Theme WPOptimal then your sites images can be speed optimized semi-automatically (and very quickly). Here’s what you need to know about image optimization for SEO 29/04/19 by SearchEngineLand. 5 essential image optimization techniques for web and mobile apps by BlogImagekit
Latency – This is the time, usually measured in milliseconds, it takes for data to be transferred between its original source and its destination i.e. your website and back again. There are two types of latency 1) Internet latency, the time taken to get to your router and network latency, which is the time to get from your router to your device. Low latency is high speed. Latency become more important if you are gaming or exchanging high volumes of data.
- Implement caching on your WordPress site, this can reduce HTTP significantly.
- Reduce the number of external HTTP requests. Each of these add latency.
- Use a content delivery network (CDN). DNS plays a part in TTFB, so use a good DNS provider.
- Take advantage of the HTTP/2 protocol.
Lighthouse – An open source tool for running technical web page audits, developed by Google. It it analyzes the following criteria of a page: page load speed, Progressive Web App, Accessibility, Best Practices and SEO. Lighthouse is incorporated in Googles PageSpeed Insights.
Searchmetrics Glossary – The Dictionary of Search Engine Optimization and Content Marketing
Mobile First Webpage Design – This is where your webpage is designed, in the first instance,for the smallest screen, such as a smartphone and only then designed for larger desktop screens.
- A Hands-On Guide to Mobile-First Responsive Design by Uxpin
- What is Mobile First Design? Why It’s Important & How To Make It? 21/12/17 by Medium
Mobile First Indexing – where Google evaluates the mobile version of a webpage for ranking purposes. Google started using this algorithm in 2016.
Announcing mobile first indexing for the whole web 05/03/20 by Google
Mobile-first Indexing 04/11/16 by Google
Open Source – this usuallry refers to software for which the original source code is made freely available to other software developers so that it can be modified and improved. WordPress is an example of open source software. The WordPress development community is global and all collaborate and contribute to the project.
Page Speed or Page Load Speed– This is a measure of how fast the content of your webpage loads on your smartphone, table or desktop computer. It is usually slower for mobile devices than for desktops. Page speed can be further subdivided into “Page Load Time”, which is the time taken for all the content of your page to load and “Time to First Byte”, which is the time required for your device to receive the first byte of information. Google recommends a page load speed of under two seconds and has indicated that this is one of factors used by its algorithm to rank pages.
Page Speed is also very important for user experience particularly on mobile devices. Slow Page Speed results in higher visitor bounce rates and lower conversions to sales. Page Speed by Moz
Your Page Speed can be measured using Google’s Page Speed Insights.
See also Site Speed.
Placeholders – When building a webpage a developer often uses some form of placeholder for text and/or images. This is often because we want to get on with building our website but do not have the information or images we need. The best way to do that is with real content, but when you don’t have it because your client has not given it to you, then next best thing is to use placeholder for text and images such as. You can use loremipsum text or its many variations for text, and a solution like placeholder.com for images.
Progressive Advancement Design – this is designing a webpage firstly for the smallest devices (smartphones) and then adapting the design for progressively larger screens (tablets and desktops). This is the opposite to Graceful Degradation.
Progressive Web Apps (PWA) – This is a technology that combines mobile web and mobile apps to create a superior mobile experience. A PWA is installed on smartphone like a normal app. Visitors can come back to your website by launching the app from their phone and interact with your website through the app interface. Your returning visitors will experience almost-instant page loading. By using appropriate WordPress plugins you can convert your WordPress website into a Progressive Web App.
Super Progressive Web Apps
Responsiveness – This is the ability of our webpage’s ability to adjust to different screen sizes i.e. desktop and smartphone screens. Alternatively it is a measure of how quickly your webpage reacts when a visitor clicks on a link or button.
Responsive Webpage Design – A design technique that ensures pages fit the screen sizes of different devices, i.e. smartphones, tablets and desktops. Additionally the user experience on all devices must be good.
Site Speed – This differs from Page Speed in that it measures and averages the Page Speed for a range of different pages. The two are often confused. About Site Speed by Google
Smartphone Googlebot – Googles webpage crawler for smartphones.
Theme Framework – A WordPress Theme Framework is created as a Parent Theme allowing the user to develop a Chlid Theme. A Parent Theme contains the functionality of the theme whereas the Child Theme holds the custom styling. Developers can then create a child theme to add custom styling while leaving the functionality aspects of it to the Parent Theme or Theme Framework. Thus if the theme developers decide to update the parent theme, say because of a security issue, this can be done without modifying anything in the child theme.
What is a WordPress Theme Framework? Pros, Cons, and More by WPBeginner
Third Party Scripts – These are scripts that are purchased or provided by a third party vendor and embedded in your website. They can and often slow down your page load speed. They can include ads, analytics, widgets and other scripts designed to make your site more dynamic and interactive.
Some examples are:
- Social sharing buttons, Facebook, Twitter, Google
- Video player embeds from YouTube, Vimeo etc
- Iframes, often used for adverts.
- Analytics & metrics scripts etc. etc.
TTFP or Time For First Byte – the time it takes from when a device makes an information request to it receiving its first byte of data from the web server. TTFB is important for website optimization since the faster the TTFB, the faster the requested data is delivered to the device’s browser.
UX – user experience
Viewport – The viewport is the user’s visible area of a web page on a device such as a smartphone, tablet or desktop machine. The size of the viewport varies with the device, being smaller on smarphones than on a tablet or a desktop. Before 1912 and the release of the first smartphones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Viewport Meta Tag – You should include the following <meta> tag in your web pages:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
This gives the browser instructions on how to control the page’s dimensions and scaling.
Virtual Viewport – Mobile phones with small screens display pages in a virtual window or viewport. The main issue is that narrow screens make the virtual viewport shrink to display all areas of a web page, which often does do not look good. Setting up the <meta> viewport tag is the most effective way to improve how web pages look on smaller screens.
- Responsive Websites: Setting the CSS Viewport Meta Tag 08/08/17 by bitdegree
- Using the viewport meta tag to control layout on mobile browsers by Mozilla
Website Wireframe – This is also called a page schematic or screen blueprint and is a visual guide that represents the page layout or design of the webpage’s content, including all the required elements and the website’s navigation, and how they all work together. Wireframes are created with the aim of arranging the various elements that go to make up a webpage to best accomplish the reason why a person visits that page.
Yslow is an open source project tool that analyses 34 rules that affect web page performance. The tool works on multiple browsers including Chrome and Firefox.