Your landing page is not only the first thing clients see, it is also the first thing search engines see! It is crucial to create a landing page that not only looks great, but is also well equipped and SEO (Search Engine Optimization) prepped.
This is the first entry of a three part blog series on creating your own SEO ready CSS landing/portal page using our templates. Each entry in this series will get a little deeper in functionality and SEO allowing you to have more portal buttons and more text. To see the “Photo Stack” template in actionclick here.
So, for those of you that just want a simple, customizable one button, SEO ready portal page, then simply download the files, do a tiny bit of simple editing completing steps 1 – 5, and you are good to go. While this article may seem long, the estimated time to complete steps 1 -5 for a complete beginner is less than 1 hour. So you have no excuse!
However, for those that are interested, these tutorials will also go one step further to help all of you DIY photographers out there learn a bit more about web design, CSS, and HTML coding and most importantly SEO (steps 6 – 9). Good news, though, it is really much more simple than it looks and sounds. So, without any further adieu, let’s jump right in.
The first thing you will want to do is download the files for the Photo Stack landing page by clicking here.
The files are organized into the following:
/design_files – These are the files used in the design process. We used Adobe Illustrator to create the layout, and thus we have included the .AI file in case any of you want to take the editing one step further and customize the design further. There is also a screenshot so you can quickly see the template design without loading it in the browser.
NOTE – there are no files in the /design_files folder that are actually used by the website. So you don’t need to upload it when uploading your website to your server.
/images – These are the image files that are used by the website code. You will need to upload these to your server when you have finished customizing your site.
index.html – This is the actual landing page itself. It contains all of the content of the page. It is named index.html because it is going to be the first page viewed when a user types in your website URL.
splashcss.css – This is a CSS (Cascading Style Sheet) file that is used to stylize the index.html page. It basically defines the look, placement and location of elements, colors, etc inside of the index.html file.
Before you can upload your landing page, we need to customize it so it is for your studio rather than for Lin and Jirsa Photography! Don’t worry though, we are going to walk you through each step, and once you finish you are going to revel in your new HTML editing skills!
i. Open the index.html for editing – You can open the index.html file in any standard text editor such as Notepad or Wordpad, or a code editor such as Adobe Dreamweaver. If you do open the file in Notepad or Wordpad, just make sure that you don’t change the file extension (.html) when you save the file. It should always read index.html
ii. Understanding the web page structure – Webpages are broken into two main parts, the first being the <head> of the document, which is everything located inbetween the <head> </head> tags and the second being the <body> which is everything located between the <body></body> tags.
The <head> of the document is going to contain information that is used by the server, browser, search engine, etc which are for the most part not visible to the person browsing the site. In fact, your first step in SEO is actually writing out the content within the <head> of your document. In addition, style information, scripting languages, meta tags, and more are going to be contained in the head of your html document. All of which are considered “under the hood” and won’t be viewable by the person browsing the site.
The <body> of the document is going to contain all of the content which your viewers will see and read. Your images, text content and everything else you want viewers to see goes within the <body> of your page.
iii. Customizing the <head> section – There are three areas you are going to customize in the <head> of the document. Each are marked in the index.html file by comments. Comments are descriptions and explanations in the code that are marked so they are not displayed by the browser. HTML comments are denoted by anything that goes within the <!– and –>. The three areas you will edit are discussed below:
Title (Line 16) – The <title> tag is a short piece of text that will be displayed on top of the browser window and is the most important tag within the <head> of your document for SEO (Search Engine Optimization). So you want to make sure it is brief, descriptive and under 70 characters in total length. To edit this section, simply place your title text in between the <title> </title> tags. An example could be “Lin and Jirsa Wedding Photography and Engagement Photography.”
Meta Description (Line 9) – Yet another tag for SEO, the <meta name=”description”> tag is mainly used by search engines as the little bit of text copy that describes your site. For example, in Google, if you typed in Lin and Jirsa Photography, the text description that shows up below each search result is pulled from the meta description tag when declared. So, it is important that this section contain a brief little summary of your studio and services. Google only reads the first 150 characters, so we advise you keep it under 150 characters in length. To edit this section, simply place your text between the ” ” marks after content =
Meta Keywords (Line 12) – While not as important today for SEO as it was in the past, the<meta name=”keywords”> tag is used by search engines to categorize what your site is all about. Today, search engines such as google place much more emphasis on your site <title> along with the actual content contained in your site in order to properly categorize and index your website. In this section, you want to place about 10 keywords or less that describe your website and studio services. For example, “wedding photography” , “wedding photojournalism”, etc. Remember, less is more. If you exceed 10 keywords, search engines may ding you for “spamming” keywords. To edit this section, simply place your keyword text between the ” ” marks after the content =
Ok, good news, you are almost half way there already! We just finished the <head> of the document, and now we just need to edit a little of the <body> of the document and then we are done!
iv. Customizing the <body> section – The only thing we need to change with the<body> of the document is the URL link that will point to your site, but we are going to need to change it in 4 places.
Line 32 <a href> – <a href> is an HTML tag that stands for an Anchor Hypertext Reference, or otherwise known as a link/URL (yeah, seriously, why didn’t they just call it a link to begin with?). Currently, all of the links point to a dummy location which is https://www.YOURSITEGOESHERE.com. I wrote it that way so that it would stand out =). So, as most of you have guessed by now, you want to place the link of the site that you want this portal page to link. To do so, simply replace the https://www.YOURSITEGOESHERE.com with wherever you want it to link.
Line 39 – Same change as above, this time it applies to the picture sitting on top of the picture stack.
Line 42 – Same change as on Line 32, this time it applies to your logo.
Line 51 – Same change as on Line 32, this time it applies to the text “ENTER FLASH PORTFOLIO”
Now, all of your links should be pointing to the right location. Also, keep in mind that if you don’t want the text to say “ENTER FLASH PORTFOLIO” simply change it to whatever you do want it to say! Such as “ENTER WEBSITE” or whatever floats your boat!
OPTIONAL – On each of our landing pages we included a tiny link in the footer that gives SLRLounge and Lin and Jirsa Photography a little bit of link love. We mention it here because we don’t want to seem sneaky by hiding things from you.The link text is very small and virtually unnoticable, so we ask that you keep the link on the site. However, if you must remove the link, then we ask that you add the following code snippet to any one of your sites. You can do it in a blog entry, or on a remote resource page somewhere on your site, it really doesn’t matter. This will help us to keep providing you with these free, professional tutorials and resources for free. Here is the link code:
<a href=”https://slrlounge.com” target=”_blank” description=”Wedding photography tutorials, tips and resources”>Photography Tutorials, Tips and More at SLRLounge</a> a website by <a href=”https://www.linandjirsa.com” target=”_blank” description=”Los Angeles Wedding Photography”>Lin and Jirsa Los Angeles Wedding Photography</a>
Great job! We are now done editing our HTML and the only thing we have left to do is customize the images.
v. Customizing the Images – Obviously you don’t want to use our picture and logo for your site, so here is how to change it. Be warned, this is so easy that it might just confuse you.
Replacing the Logo – To replace the logo, simply create your logo and size it to 200×60 (200 pixels wide by 60 pixels tall). Save the file as logo.png and replace the current logo.png file contained in the /images folder. Viola! Now your logo is on the site.
NOTE – If you save the logo file as a .jpg you will need to change the code on line 42 to read images/logo.jpg rather than images/logo.png. Otherwise your image will not be displayed.
Replacing the Top Image – To replace the image on top of the picture pile, simply create whatever image you like and size it to 420×200 (420 pixels wide by 200 pixels tall). Save the file as front-picture-image.jpg and replace the current front-picture-image.jpg file with your new file!
That’s right, you just customized your own landing page by editing HTML! You can preview it by double clicking on the index.html or loading it into your preferred browser.
Now that we are done customizing, all you need to do now is upload the site! If you are unfamiliar with this process, keep reading.
i. Connect to Your Site – Connect to your site by using your browser web admin panel, or using an FTP software. If you need FTP software, we recommend using FileZilla as it is quite reliable, and best of all FREE! You can download it by going to Downloads.com or by clicking here. Your FTP connection information can be found in your server’s control panel, or by calling your hosting company.
ii. Upload the Files – After you have connected to your site, simply upload everything but the /design_files folder to the servers root directory. Usually, the root directory will be the default directory that your FTP will connect to. Make sure that you keep the file structure the same though. The images need to be within the /images folder and the index.html and splashcss.css file need to both be in the root directory.
iii. Check Your Homepage – If everything went well, then you are live! Go check out your site by typing in the URL to your homepage.
No explanation neeeded here, you all know what this is.
For those of you that want to get a little more in depth and do some CSS editing, this section is for you.
Cascading Style Sheets or CSS for short looks a little complicated, but it isn’t bad at all. In fact, it is simply a document that contains descriptions of how you want certain html elements to look, and where to be placed. For the most part, the CSS file is quite intuitive and readable. But, here is a little crash course on CSS to get you started in editing your landing page (for more detailed information on all the different attributes and styles, W3 Schools is a great free CSS learning resource).
i. CSS applies to HTML tags – CSS works by simply defining style attributes that get assigned to HTML tags. For example, if you open and view the splashcss.css file in any text or code editor, you will notice that each CSS attribute has the following format:
name {
property:value;
property:value;
}
The “name” is simply the name of the HTML tag you wish to affect (referred to properly as a “selector”). For example, on line 54 of the file you will see body { } which assigns styling to everything in the HTML <body> </body> tags. After declaring the name, you start with a { which denotes the begining, and end with a } which denotes the end of the styling for the “name” selector. All of the attributes you then want applied to the “name” tag would go between the { and }. Each styling attribute is referred to as a property and is followed by its given value.
On line 59 you will see p { } which assigns styling to text inside the paragraph<p> </p> tags
On line 48 you will see * { } the asterisk means that you want to assign those styling attributes to the entire document denoted by the *
So, if we want all of the text inside of the <body> tag to default to Times New Roman and be 10px Tall you would type the following into the CSS:
body {
font-family: “Times New Roman”;
font-size:10px;
}
Now, all text within the <body></body> tags in our HTML will default to 10px Times New Roman. You can see how powerful CSS can be because instead of changing describing the font/size and other attributes multiple times throughout the HTML file, we can do it once in our CSS document and apply it to every page throughout an entire site!
ii. Why Cascading? – So what does the Cascading in Cascading Style Sheets mean? Well, this is the most difficult concept in CSS to understand, and be happy because it really isn’t all that difficult. Cascading simply means that each style rolls down from parent to child in your HTML. In other words, above we changed the text located within the <body> tag to 10px Times New Roman. This means that every element that is contained within the <body></body> tags will also have that same default style applied. So<body> is the “Parent”, and anything inside is the “Child.” Child elements are also considered Parents though to whatever elements are contained inside of them.
So, anything applied to a Parent applies to the Child within. If you want to change the style of the Child, then you need to create another CSS style attribute that applies to the child.
IMPORTANT NOTE – Styles that are applied to a Child element override any styling that cascades down from a parent element.
To help clarify, here is a snippet of HTML code:
<body>
<div id=”text”>
<p>This is our test paragraphy</p>
</div>
<body>
Before explaining, let me just note that a <div> is simply a container for something in HTML. So, in this example <body> is the Parent of the <div> named “text” and <div> is the Parent of the paragraph element <p>. What does that mean? That means anything applied to <body> applies to the <div> called “text” and also to the paragraph element <p>; Anything applied to the <div> element applies to the paragraph element <p> and anything applied to the paragraph element <p> only applies to itself.
So, what if I want most of the text in the <body> to be in Times New Roman except for that tiny piece inside of the “text” <div> container. Well, I would write the following in my CSS:
body {
font-family: “Times New Roman”;
}
#text {
font-family: “Arial”;
}
Now, all text in the document will be Times New Roman, except for whatever is within the “text” <div> as assigned by the #text CSS code. Don’t worry too much about syntax right now. The goal for now is to simply understand the CSS, and be able to edit it, rather than create it on your own.
Ok, so now you should have a basic understanding of how CSS elements “cascade” from parent to child elements. You can also start to see how effective and powerful this form of styling can be.
iii. Studying splashcss.css: So now, let’s go look back at our CSS file splashcss.css. You will notice that I have placed attributes for items that users may likely want to change at the very top of the document. The rest of the attributes are located below from line 44 on down through the document. So, a quick explaination of the first few items to help you get started.
The * { } on line 8 applies a site wide style (denoted by the *) to set the font to first Arial, if Arial is unavailable, then it chooses Helvetica, and if Helvetica is unavailable it will choose any sans-serif font.
The a { } on line 18 applies a site wide style to every anchor tag (URL) <a href=””></a> to change the decoration, weight, color and size of the link text.
The a:hover { } on line 32 applies a site wide style to every anchor tag (URL) when being hovered by a mouse. So, when hovered, all links on the site will be underlined.
You should now have a basic understanding of how CSS works and how it applies to your HTML document. Now, its time to read a little more and start playing around. Remember, CSS styles can not only affect the looks of an element, but also the positioning.We recommend reading through the CSS tutorials at W3Schools and start playing around on your own. Simply make a copy of the files you downloaded on this tutorial, and start playing around. Don’t worry if something breaks, you can always go back to the original, or download everything again from here.
If you found this article useful, share the love! Tweet us, comment below, send us a link, Digg us, it’s all good!
If you would like to help us keep SLR Lounge alive, please include this link code anywhere on your site:
<a href=”https://slrlounge.com” target=”_blank” description=”Wedding photography tutorials, tips and resources”>Photography Tutorials, Tips and More at SLRLounge</a> a website by <a href=”https://www.linandjirsa.com” target=”_blank” description=”Los Angeles Wedding Photography”>Lin and Jirsa Los Angeles Wedding Photography</a>
By: Lin and Jirsa Wedding Photography, Los Angeles and Orange County Wedding Photographers
_______________________________________________________________________________
If you’ve found this article informative, please consider donating below:
_______________________________________________________________________________
Get Connected!