Thoughtful Website Design Banner

Since the goal of The Helping Home is to offer solutions for those who have safety, functional, and accessibility needs at home, it is important that the website itself boast these very same qualities for the best user experience. Read each section below to learn about the built-in features that make this site safe, functional, and accessible.


Safe

Safe Banner

Here is a list of the security measures The Helping Home takes to keep visitors safe:


H.T.T.P.S.

A quick glance at the URL bar while browsing this site will show “h.t.t.p.s.” at the beginning of the URL. The “s” at the end of this prefix means that The Helping Home website has a secure connection. Some web browsers may also show a small padlock icon to indicate that the site is safe:

Secure padlock https

The Helping Home uses encryption technology to protect visitors’ information and protect the integrity of the website itself.


Managed Hosting

Many websites use shared hosting because it is a very economical solution. Unfortunately, shared hosting opens up a site to hacking attacks that may be brought against any neighboring sites that are a part of the hosting company’s shared server. To avoid this sort of collateral damage, The Helping Home uses a managed hosting solution that has greater security measures than standard shared hosting. Furthermore, this site’s hosting provider also includes two layers of firewalls and performs periodic file system scans to find and prevent intrusions.


Up-to-date scripts and software

The scripts and software used to run The Helping Home are automatically updated as soon as new patches become available, which helps shut down phishing and malware that hackers use to steal information.


Secure C.M.S.

The Content Management System (C.M.S.) that The Helping Home uses is well-established and regularly releases security patches to reinforce potential vulnerabilities and stay ahead of threats.


Functional

Functional Banner

There are several features the site employs to improve its overall functionality:


Breadcrumbs

The navigation on The Helping Home is set up in such a way that visitors can quickly understand where the page that they are currently viewing is in relation to the rest of the site. This type of navigation is called breadcrumbs; it’s like leaving a trail of breadcrumbs in the forest to help find the way back. Users can see the path that leads to the current page and easily click on the titles of the previous pages to jump backwards.

Breadcrumbs example

In the example above, the About page is currently being viewed and it is one step away from the Home page. Users can click “Home” to immediately be taken back to the Home page. Every page on the site includes breadcrumbs to help streamline site-wide navigation.


Table of Contents Menus

Many of the resources on The Helping Home are extremely in-depth, and thus, very long. Rather than force users to scroll through lengthy pages to find a certain section, each guide features a table of contents menu at the right side of the page that enables visitors to quickly jump from one section to another at the push of a button. Although this page is short enough to avoid needing a table of contents menu, one has been provided nonetheless to demonstrate how it works. Simply select a title from the menu to scroll to the appropriate section.


“Back to top” button

At the bottom right-hand corner of each page is a button that users can click to scroll all the way back to the top of the current webpage. This “back to top” button is particularly useful when the need to return to the top of the page arises while reading one of the long-form guides.

On wider-sized screens, the button displays as follows:

Back to top button - desktop

Smaller-sized screens display a more intuitive button:

Back to top button - mobile


Sitewide search bar

Several pages throughout The Helping Home website include a search bar on the right side of the screen that allows users to search the entire site for specific terms. Those who have a certain topic they are trying to find covered on the site may benefit from using the search feature. This page includes a search bar at the top right above the table of contents menu.


Sitemap page

Although navigating the site is fairly straightforward, some users like to have an overall view of all the pages on the site to understand the big picture. The sitemap page shows every single page on the site and how the site is organized. Visitors can use the sitemap page to jump to a specific page by merely clicking on the title. A link to the sitemap is included in the footer at the bottom of the website. And here’s a link as well: link to Sitemap page.


Accessible

Accessible Banner

The following features help make the site more accessible:


Responsive design

It doesn’t matter what type of device is used, the website will automatically reorient itself to match any screen size: phone, tablet, laptop, desktop, and even oversized monitors.

Responsive design for phone, tablet, laptop, and desktop screens


Alt tags

Every image on The Helping Home includes a bit a code called an alt tag. An alt tag (also called alternative text) is a brief description of the image so that screen reader devices can properly describe the image to users who are visually impaired. The alt tags help visitors with low vision better understand the full website experience.


Periods in acronyms

Another helpful feature for those with screen readers is including periods in acronyms (such as typing H.O.M.E. rather than HOME). A screen reader interprets HOME as “home” and H.O.M.E. as “H,” “O,” “M,” “E.”

The Helping Home website places periods in between the letters of acronyms to ensure that screen readers communicate the information to users correctly.


Tabbing order

For visitors who cannot use a mouse to navigate and rely solely on the keyboard’s “Tab” key, the tabbing order on every page of the site is set for optimal efficiency and convenience.

Outlined elements

Home button with dashed borderClickable elements on the website (such as buttons and links) show a dashed border when highlighted with the “Tab” key and also when selected (either with a mouse click or by pressing the “Enter” key after tabbing to the element).

Outlining elements with a border like this helps users who are tabbing to know what element is currently selected. Furthermore, these dashed borders help users see what they selected, which can be helpful in the event of an errant mouse click.


Horizontal rules and white space

The Helping Home website uses a simple design to improve readability. Horizontal rules (lines) break up the content into blocks that benefit all visitors (see the lines on this page that divide it into three sections: Safe, Functional, and Accessible). The site also utilizes white space to create contrast, which offers another kind of visual separation that makes reading easier.


Descriptive links

Any links to internal pages and external websites are made up of brief but descriptive anchor text to help visitors better understand the link and more easily see what text must be clicked to visit the linked page. The link anchor text displays as bold and green.  This is a link to The Helping Home’s “About” page.