Brian Nelson Films

A way to Advertise my Business

When I started my video production company I quickly realized how important it was to have a website not only as a way to look professional but also a place to show off your work and be found on search engines. I spent a lot of time looking at different website builders such as SquareSpace and Wordpress but at the time I had limited knowledge around this space. I wanted a website I could build myself and not be limited to templates where every site looks the same. I also knew that my site didn't need to have a lot of dynamic features as it was mostly a brochure website, so I decided to code it all myself with HTML, CSS, and JavaScript.

Choosing a Design

I wanted this website to look as good on mobile as it was on desktop. I made use of @media queries in my CSS to check for the size of the device and styled it appropriately to make it look good. One of the biggest challenges was creating a mobile menu that was simple and easy to navigate. While doing research around UI/UX (user interface/user experience) design I came across this image:

Image courtesy of LukeW.com

Showing that the top of the screen is hard to reach on mobile, so I decided to put my navigation fixed to the bottom of the screen. This would allow users to easily move from page to page.

Implementing SEO

Knowing that search engines were going to be the best way for potential customers to find my business. I made use of metadata listed in the head of my website to set related title, description, and keywords based on what type of searches I wanted to show up for.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Boston based videographer, Brian Nelson Films specializes in athletic, commercial and Real Estate videography.">
<meta name="keywords" content="Brian Nelson, Brian, Nelson, Brian Nelson Films, Nelson Films, Boston videography, Boston video, Boston filmmaker, athletic videos, commercial videos, real estate videos, real estate tours">

<!-- social media -->
<meta property="og:title" content="Brian Nelson Films">
<meta property="og:description" content="Brian Nelson Films, a Boston based videographer.">
<meta property="og:image" content="socialpreview.png">
<meta property="og:url" content="http://briannelsonfilms.com/">

<meta name="twitter:title" content="Brian Nelson Films">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@brianelson_">
<meta name="twitter:description" content="Brian Nelson Films, a Boston based videographer.">
<meta name="twitter:image" content="socialpreview.png">


<title>Brian Nelson Films | Boston Videographer</title>

Along with metadata I also made sure to use the correct Headings on each page to give an additional influence to Search Engines.

Feel free to check out the full website or look through the GitHub repo