Home Page or Landing Page
The Design phase ended with the creation of a wireframe diagram for the home page or a landing page. A home page is the first page people reach when they enter in the address of a website, and should be designed to clearly show what the site is about and how to find whatever information is being sought.
A landing page, on the other hand, is a page other than the home page which people will land on directly from external links, most often Google Search or online advertisements. It features a particular product, service, or offer and requires special layout and content to receive that targeted traffic, making it clear what to do next.
The first step of the Development phase is to convert that home page or landing page wireframe into a WordPress page. This first requires coding HTML content for the main section of the page, and finding or developing images. Next, we position a drop-down (horizontal) or accordion-style (vertical) menu based on the wireframe, and add links to blank pages. Last, we add content to other regions (left and/or right sidebar, footer, etc.) as required.
Plugins
Home pages and landing pages may require image sliders (carousel slideshows), contact forms, or other dynamic content. These elements are provided through accessory programs that are plugged in to the basic WordPress software, aptly named “plugins.” These are either developed by the WordPress core team or by members of the community who submit them for inclusion in a common library.
There are many tempting free plugins that promise all manner of enhancements to configuration appearance, functionality, security, and other areas. As a matter of practice, we only use whatever plugins are necessary for a website to preserve fast load time and easy troubleshooting.
Generally, for any given function there are many plugins to choose from, each with a free version (powerful enough to get chosen) and a premium version (with more features). We choose the plugin which has the broadest install base (the most people using it), the best reviews, and the best match for the site’s needs.
Chosen plugins are then installed onto the web server safely through WordPress, and configured to match site requirements. For example, image sliders require settings for transition type and speed, and size of images displayed. After these settings are made, and images are uploaded and added to a given slider, the “shortcode” for that slider is placed on the page.
Themes
Just as plugins are submitted by WordPress core and contributor coders, so are pre-made side designs known as “themes”. There are thousands to choose from, and each provides different colors, layouts, and special features. Our task is to match a theme to the site, and then customize that them to match the existing branding of the site we are upgrading from. Browse a set of themes used by a previous class.
Each theme in WordPress’s gallery includes demo page, where sample content is available to try out. We look for themes that are “mobile-responsive”: they work well on cell phones as well as desktop screens. To test for this, we shrink our browser window to various sizes (e.g. iPad, iPhone) and watch how the elements on the page adjust to match.
In order to provide the special functions that themes offer, they may come with many associated plugins of their own, which can slow down a site’s load speed. To compare the load times of three potential candidates, we use website speed test sites by Pingdom, and Google. All things equal, we pick the faster-loading theme.
Once a theme is installed, we can fine-tune our home or landing page to match the wireframe and branding of our client’s old site.
Build-Out
From here, we set to the work of adding in all of the rest of our website’s pages and plugins, accomplishing as much as we are able before quality assurance testing, which begins the next step of ADDIE, Implementation. Because we are in a course with a limited time frame, we are rarely able to complete an entire site in time, so we focus on the parts that will be most difficult for our clients to do on their own.
During this stage, we import code from the existing site, and make sure all of our code is clean of any cruft and inline styling, and we also make sure everything is properly indented with line breaks where they should be. After checking the code, we check all of the buttons, making sure they lead to the correct webpages, and of course that they work as intended. We also check all of our plugins and widgets, making sure they’re in working order, as well. We can add more plugins and widgets in the alpha and beta testing periods if needed, but during this stage, we just want the bare-bones of the website, to build it up and flesh out later.
