rayelliott
/
hugo-blog
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
This repository has been archived on 2020-10-30. You can view files and clone it, but cannot push or open issues or pull requests.
hugo-blog/dist/blog/posts/stanthams/index.html

357 lines
16 KiB
HTML
Raw Normal View History

add dist directory
2020-04-17 17:22:23 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Ray Elliott">
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Charles Stantham Legal Services"/>
<meta name="twitter:description" content="Developing a website using WordPress, OceanWP and Elementor."/>
<meta property="og:title" content="Charles Stantham Legal Services" />
<meta property="og:description" content="Developing a website using WordPress, OceanWP and Elementor." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://rayelliott.dev/blog/posts/stanthams/" />
<meta property="article:published_time" content="2020-01-20T18:55:00+00:00" />
<meta property="article:modified_time" content="2020-01-20T18:55:00+00:00" />
<base href="https://rayelliott.dev/blog/posts/stanthams/">
<title>
Charles Stantham Legal Services · RayElliottDev
</title>
<link rel="canonical" href="https://rayelliott.dev/blog/posts/stanthams/">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE&#43;rA=" crossorigin="anonymous" media="screen" />
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
<meta name="generator" content="Hugo 0.68.3" />
</head>
<body class="page stanthams colorscheme-auto">
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="https://rayelliott.dev/blog/">
RayElliottDev
</a>
<span class="primary-menu-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
</span>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
</label>
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
</li>
</ul>
</section>
</nav>
<div class="content">
<section class="container post">
<article>
<header>
<div class="post-title">
<h1 class="title">Charles Stantham Legal Services</h1>
</div>
<div class="post-meta">
<div class="meta-tag posted-on">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
</svg>
</span>
<time datetime='2020-01-20T18:55:00Z'>
January 20, 2020
</time>
</div>
<div class="meta-tag reading-time">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
</svg>
</span>
5-minute read
</div>
<div class="taxonomy">
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/categories/portfolio/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
</svg>
</span>
Portfolio
</a>
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/wordpress/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
</svg>
</span>
WordPress
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/elementor/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
</svg>
</span>
Elementor
</a>
</div>
</div>
</header>
<div>
<img class="featured-image" src='https://rayelliott.dev/blog/images/stanthams/large-1.jpg' alt="Featured image"/>
<p><strong>Charles Stantham</strong> are a firm of made-up solicitors who decided they wanted me to make up a <a href="https://stanthams.rayelliott.dev/">website</a> for their firm.</p>
<p>The site is a fairly basic brochure site with no particularly special requirements.</p>
<p>And so, for this relatively simple site I decided that a ready made customisable theme would be used.</p>
<h2 id="the-theme">The Theme</h2>
<p>The theme I chose, that would be a starting point for the site, was <a href="https://oceanwp.org/">OceanWP</a>.</p>
<figure class="icon-inline oceanwp-icon">
<img src="https://rayelliott.dev/blog/images/logos/oceanwp-blue-icon.png"
alt="The OceanWP icon."/> <figcaption>
<p>There were a number of reasons why using OceanWP is appropriate for a project such as this:</p>
</figcaption>
</figure>
<ul>
<li><strong>Quick</strong>. Using such solutions can cut development time considerably &ndash; especially important for low budget sites.<br>
Instead of building a site completely from scratch, a general, existing theme can be highly customised.</li>
<li><strong>Flexible</strong>. Although not as flexible as a bespoke theme, OceanWP is highly customisable.<br>
For features that can&rsquo;t be created or modified within the theme a child theme can be created and these features added on that way.</li>
<li><strong>Extensible</strong>. Many features are provided as extensions to the base theme.<br>
It is also not difficult to add custom functionality if needed.</li>
<li><strong>Lightweight</strong>. There are a lot of popular page builders available for WordPress.<br>
Not all of them are, relatively speaking, as lightweight or well coded.</li>
</ul>
<p>There are, however, <strong>disadvantages</strong>.</p>
<p>One of those being bloat.
Pre-built themes are typically designed to provide for very broad and general use cases.</p>
<p>A lot of this functionality will never be used by any one theme and so will only serve to, at best, clutter the interface.
At worst, they slow the site and increase the likelihood of vulnerabilities.</p>
<p>Purpose built themes and design elements will always be leaner and more efficient.
We can also be sure they contain clean, well written code (if coded correctly of course).</p>
<p>In some cases, performance issues may not be so apparent for small sites with few users.
However, these become much more of an issue once the number of visitors is scaled up for bigger sites.</p>
<p>So, when working with WordPress, developing a theme from scratch will be faster, more efficient, and result in
a leaner theme.</p>
<p>However, this is not always possible given time and cost restraints so compromises may need to be made.
In these cases a &lsquo;site builder&rsquo; may be the best option.</p>
<p>As there were some minor customisations required that were not possible through the theme&rsquo;s interface, a child theme was created.</p>
<figure class="medium">
<img src="https://rayelliott.dev/blog/images/stanthams/large-5.jpg"
alt="A screenshot of the website of the Charles Stantham law firm."/>
</figure>
<h2 id="the-plugins">The Plugins</h2>
<p>The main plugin used was <a href="https://elementor.com/">Elementor</a>.</p>
<figure class="icon-inline">
<img src="https://rayelliott.dev/blog/images/logos/elementor-icon.png"
alt="The Elementor logo."/> <figcaption>
<p>Elementor is a &lsquo;<strong>Page Builder</strong>&rsquo; that provides component based building blocks that can be added to a WordPress site and customised.</p>
</figcaption>
</figure>
<p>This has the advantage of speeding up development time considerably but brings disadvantages similar to those discussed above for using OceanWP.</p>
<p>Again, for this particular project, I felt the advantages outweighed the disadvantages.</p>
<p>Apart from Elementor, a limited number of other plugins were also used:</p>
<ul>
<li><a href="https://wordpress.org/plugins/contact-form-7/">Contact Form 7</a>.<br>
For a basic contact submission form, this is perfectly suitable.
For more complicated requirements I would use Gravity Forms due to its better developer oriented features.</li>
<li><a href="https://wordpress.org/plugins/addon-elements-for-elementor-page-builder/">Elementor Addon Elements</a>.<br>
This was required to add Google Maps integration.
It would have been better to add this feature as a leaner, custom plugin, but for a site with a low budget, this is an acceptable compromise.</li>
<li><a href="https://wordpress.org/plugins/gdpr-cookie-compliance/">GDPR Cookie Compliance</a>.<br>
Very important for any site since the GDPR regulations came into force.
A custom plugin could have been used, but for this very specific functionality, the benefits of an actively developed, tried and tested solution, outweigh the benefit of developing a plugin from scratch.</li>
<li><a href="https://wordpress.org/plugins/better-wp-security/">iThemes Security</a>.<br>
Security is a big issue with any WordPress site.
I find this plugin provides good security (in addition to any server side security measures used).</li>
<li><a href="https://wordpress.org/plugins/updraftplus/">UpdraftPlus - Backup/Restore</a>.<br>
Regular, offsite backups are another essential component to any website.
UpdraftPlus handles these very well.</li>
<li><a href="https://wordpress.org/plugins/wp-fastest-cache/">WP Fastest Cache</a>.<br>
It is always better to use server side caching such as Nginx FastCGI cashing or Varnish.
However, in cases where this isn&rsquo;t practical, this plugin is a competent solution.</li>
<li><a href="https://wordpress.org/plugins/wp-mail-smtp/">WP Mail SMTP</a>.<br>
It can sometimes be a little tricky getting mail working when using WordPress within Docker containers.
This plugin provides a simple solution.</li>
</ul>
<p>For an actual production site where Search Engine Optimisation is important I would also use a plugin to cover this.
I find <a href="https://wordpress.org/plugins/autodescription/">The SEO Framework</a> to be the least bloated, competent plugin to achieve this.</p>
<p>With WordPress, it is essential to test the speed of the site before and after adding any plugins, especially for ones not used before.</p>
<p>It is also very useful to look over the source code of any plugin.
Seeing how well written this is, can be a good indicator of the likely performance of a plugin and we can see how seriously security considerations are taken.</p>
<p>Also essential, for any WordPress site, is to limit the number of plugins used.
An unnecessary amount of plugins will almost certainly slow a site down and increases the risk of introducing vulnerabilities.</p>
<h2 id="the-summary">The Summary</h2>
<p>So, in summary, there&rsquo;s not much to be said about the actual content of the website.
It&rsquo;s a fairly basic, low budget, brochure site.
The kind of site, that many small businesses will be looking for to give their business a presence on the web.</p>
<p>More interesting are the justifications I covered regarding the development choices made.</p>
<p>The primary purpose of the site is to provide information about the business. It is important that this is presented in an easy navigable fashion and the information is given in a clean, uncluttered, easy to digest manner.
All of which I feel is achieved in the design choices of the theming and layout.</p>
<figure class="medium">
<img src="https://rayelliott.dev/blog/images/stanthams/stanthams-team.jpg"
alt="A cropped screenshot of the website of the Charles Stantham law firm."/>
</figure>
</div>
<footer>
<section class="see-also">
<h3>More of my Portfolio Articles</h3>
<nav>
<ul class="see-also-list">
<li>
<a href="https://rayelliott.dev/blog/posts/flowmm/">Flow Model Management</a>
</li>
<li>
<a href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
</li>
<li>
<a href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
</li>
</ul>
</nav>
</section>
</footer>
</article>
</section>
</div>
<footer class="footer">
<section class="container">
© 2020
Ray Elliott
<span id="cs-mode-container" class="cs-mode-container">
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
</span>
</section>
</footer>
</main>
<script src="https://rayelliott.dev/blog/js/script.js"></script>
</body>
</html>