By Deb Pang Davis
Your website is the “mothership” of your marketing platform. Ideally, it is at the center of your online branding and marketing efforts. Your website is where you want your audience to ultimately go to find out more about how you can solve their problems or help achieve their vision. It is where a considerable portion of your content lives and breathes.
So, while you don’t have to spend a lot of money on your website, it is a critical investment. Plan to devote significant time to keep your marketing and branding content fresh. It assures a consistently rewarding experience for your audience and compels them to come back for more. You want them to think about you when an assignment or project crosses their desk or they have an opportunity to make a referral.
Start With a Solid Foundation
A rewarding, engaging website requires a solid foundation and structure to keep your images, text, video, audio, products and more available to your audience. It needs to be well-built, even “future-proof”, to deliver a positive experience for your audience 24-7 and through any device they use to access your mothership.
Keep in mind that while your audience (a.k.a “users”) may not actually see the underpinnings of your solid foundation, they will notice, especially when something “doesn’t work” or “doesn’t feel right”. The goal of a solid foundation is to minimize a negative experience for your users and keep website maintenance manageable for you. Spending a lot of time under the hood to keep things running smoothly means less time spent creating content that is fresh and vibrant.
“User experience,” a term some of you may already know, is, in a nutshell, how someone feels when they interact with your website (or any product you create). So, whether you use a hosted template or theme-based website platform such as Photoshelter, Zenfolio, Squarespace or WordPress.com or decide to go the self-hosted route using a content management system such as WordPress, ExpressionEngine or Perch with a hosting service provider (BlueHost, EngineHosting, CanvasDreams or MediaTemple) here are a few things to keep in mind so your mothership (and brand) hums smoothly and is positioned to adapt as devices evolve.
Performance, Reliablity and Data
- Use a reputable hosting service provider that can provide excellent security, has minimal downtime, and is responsive. Ask about uptimes and traffic requests. Don’t automatically go for cheap. There is nothing worse than hearing a prospective client say “I went to your website and it was down.” or worse, they just leave and never come back. For your sanity, try to sign up with a company that has 24/7 tech support or even better, human-to-human support. Get recommendations from friends and/or your website designer.
- If you choose to go self-hosted, choose a content management system (CMS) that allows you to easily update and manage your site. Ideally the backend (were you edit and create content) isn’t hard to use or clunky. Be sure to ask your web designer/developer about their CMS of choice. Do some research before you commit. Ask for others’ experiences. One size does not fit all.
- Don’t miss an opportunity to connect with visitors using smartphones or tablets. At the minimum, offer a “responsive” CSS alternative design. Some templates and themes offer this feature “out of the box.”
- Use HTML typography instead of images of text. (The exception could be your logo, though be sure to include the name of your company in the img tag’s alt attribute.) HTML text loads much faster than images. If you are dying to use fonts other than Georgia, Helvetica, Arial or Times New Roman for example, check out services such as TypeKit (Adobe), WebInk or find out more about the CSS(3) rule, @font-face.
- Optimize images to keep page load times small.
- Size images for retina displays. See this excellent, but lengthy, explanation about retina displays and sizes by Smashing Magazine.
- Measure the effectiveness of your online marketing efforts with analytics. It’s crucial that you understand not only how many people are coming to your site, but when they are coming, how long they are staying and where they are going on the site. Hosted website solutions offer very simple to moderate analytic tools so make sure you can add tracking tools such as Google Analytics or Clicky.
Content Drives Design
For better or worse, content is the term broadly used to refer to every meaningful communication asset you publish on your site (text, images, video, audio, blog posts, testimonials, awards, biography, resumes, etc.) and elsewhere (tweets, statuses, pins, etc.). Having a full understanding of the types of content you plan and want to deliver to your audience can significantly inform the visual direction and structure (organization) of your website. Remember this:
Content is Design.
Design is Content.
Design without Content is meaningless.
Whether you hire a web designer for a custom site or plan to DIY, these steps will help you get a clearer grasp on the overall architecture of your website. It may also help to define the structure of your individual web pages. It will definitely save a lot of time when you start adding the paint, especially if your website is rather large.
- Do a content audit. Determine what content already exist (if doing a redesign) or what new content you need to create. Some questions to ask yourself: How does the content relate to each other? What is missing? Do you need to create new content? How can I leverage my content to be used in multiple ways?
- Create a site map. Use a mindmapping tool such as MindNode, SlickPlan, OmniGraffle, pencil and paper or sticky notes. Use any of these tools to make connections between your pages and establish the overall hierarchy of your website as a whole.
- Create a wireframe for each page. Fancy tools are not required. Grab some blank paper and draw some boxes with content labels so you can see how each of your web pages can be structured (layout and hierarchy). This is a great visual method to see how each type of content relates to each other and how web pages connect to each other. To view examples of “high fidelity” and “low fidelity” wireframes, check out I Love Wireframes.
Just as you spend hours researching and talking with your subjects before actually making pictures, “Brain time” is crucial before uploading your first photograph or choosing a color for your website.
A Search-engine Friendly Photography Website is a Sustainable Website
Remember that your website is series of individual pages (if not, it should be) connected by (internal) links. Think of each page as an opportunity for your audience to make a landing on your mothership (internet marketers call them “landing pages”). Any page of your website can also be connected to other web pages at other motherships by external links.
Ideally, your website will recieve a lot of “inbound links”; links that link to any of your web pages using high-quality keyword phrases (a.k.a “anchor text”). The number (and quality) of inbound links adds to your credibility with search engines such as Google. For example, a link from The Boston Globe will be more valuable than a link from your neighbor’s personal blog.
A well-designed website is a combination of high-quality content, code and visual design. So, a well-designed website is, in an ideal world, also a search-engine friendly website.
To help search engines deliver relevant content results, it’s important to take steps to provide compelling, useful content. The more your audience places value on your content by linking to it, the more reason search engines come back to your web pages to read and rank them.
So, increase your chances of discovery with the following SEO recommendations:
- Use keywords to summarize and contextualize your content. Use keywords that you would use when doing an internet search for the same content. Include them in your header tags (h1, h2, h3), image alt attribute and within your page copy; however, it is crucial not to go overboard. The goal is to sound approachable, engaging—human.
- Include meaningful page titles per page. The page title shows up at the top of your browser window and is the heading of search results. Use keywords specific to your webpage. Limit your character count to 70.
- Include a description per page. The description shows up immediately after the title in search results. Limit it to 160 characters so use this to work in concert with your page title.
- Create well-sructured HTML pages. Using HTML tags in the right hierarchy (Example: h1, h2, h3) allows seach engines to “make sense” of the content on your site. Good hiearchy informs search engines which content takes priority.
- Put image captions in the image tag “alt” attribute. Search engines “read” words but it can’t read images. The “alt” attribute in images tags helps search engines associate important keywords to your images.
- Create clean and friendly URLs. Yoursite.com/sports/final-four-basketball-2013/ is better than yoursite.com/one/sub/000000ahsekbk#. Your URLs are essentially the navigation paths you provide for your users. URLs are also an opportunity to use keywords which can help improve the rank of your web pages in search results pages.
- Include metadata in images. Unfortunately the stealing of images is rampant and it is a sheer pain in the butt to spend countless hours tracking every website, publication, organization – domestic and abroad — who have stolen your intellectual property. Image search is here to stay so, the information you embed into your photographs can help you track your images across the web. Avoid losing your images to “Orphan Works”. Educate yourself and work as a community to educate the public. Resources such as Photoshelter’s Copyright Guide and ASMP’s Copyright Tutorial are great places to start. Consider tools such as Stipple and IMGEmbed to help track and maintain attribution.
- Tag your content. If you have the ability to tag your content, use tags and categories to help define and organize your content. It can help visitors discover and find related content; however, don’t go overboard. And, avoid the tag cloud unless you can integrate it tastefully. (See Ami Vitale’s website)
Design to Satisfy
Design for your audience. Design around content. Design to build trust. Remember, the content you create and include on your mothership is for your audience; not for you. Provide information that answers their questions. Keep the focus on their needs. What content can you include to help answer their problems, minimize their fears and fulfull their desires?
By having a strong sense of your audience and understanding your brand, you can edit, structure, strategize — design — to create the best possible experience of you without being present. And of course, make sure the visual tools such as type, color, size, contrast, white space, etc., present your content effectively. It’s a no-brainer that your photographs should be presented in the best possible way. If you find yourself stuck on choosing colors and type for example, go back to your brand qualities. Ask yourself what colors and type match and communicate my brand?
Here are a few content and visual design suggestions to help your audience get some satisfacation:
- Start with great copy. Pictures are not enough. Words and pictures are a powerful combination. Remember, search engines don’t “see” pictures. Avoid “corporate-speak” and write in the first person. Work with a marketing-smart copywriter who can help you optimize your pages for search and resonate with your audience.
- Create an engaging About page. Make it easy for your audience and potential clients to quickly get to know you. Include an image but ditch the baby photo. People want to see who are you today. Show your self!
- Make it easy to contact you. Email addresses work well in footers but having a contact form is more convenient for mobile. Provide both on your contact page and include your social media profiles. Limit the form fields to information you really need. No one likes to fill out lengthy forms.
- Minimize bells and whistles. Good visual design means knowing when to quit and even remove design elements. Avoid noobie attempts to seem “more creative” by using combining too many effects, animations, typefaces, colors, background patterns, etc., in an attempt to “stand out”. Remember, the focus should be on your content.
- Use Type Well. If you DIY, educate yourself on the basics of using type. For example, typefaces with a large x-height (Serif: Georgia; Sans-serif: Verdana) can run a bit smaller and still be readable. Contrast between the color of the type and the background should be high. Readability is paramount to a positive user experience.
- Testimonials and Awards. These quickly convey what Arizona State University Professor Emeritus of Psychology Robert Cialdini calls, “Social Proof”, a principle of influence or persuasion. This is your chance to have others sing your praises. It gives you immediate credibility.
- Make navigation clear and simple. With navigation, “creativity” works against you. Make navigation easy to see, keep labels simple and avoid too much animation. As Steve Krug says, “Don’t Make Me Think”. Don’t make people feel frustrated or dumb. And, with mobile dominating the marketplace, be sure your navigation buttons are easy to click on mobile devices.
- Consider Touch. Smartphones and touch screen device use has been consistently on the rise. Make sure the buttons and links on your website are large enough for your audience to “click” with ease. White space can help make “clickable areas” easier to use.
- Keep your gallery/portfolio names simple. You may know what that story label means but most people won’t. Simplify but communicate clearly and try to avoid the traditional newspaper contest buckets. Work with a picture editor you trust to help you organize, restructure you images into, for example, themes or qualities.
- Avoid the kitchen sink. Tempting as it may be to include a lot of photos, edit to your audience and leave them wanting more. Brides love looking at other weddings. Wedding photographers may have more images than a portrait photographer. And whatever you do, avoid uploading high resolution images. Not only does it bog down loading times, you’ll make it easier for someone to use your images on a billboard.
- Promote Sharing by including share buttons. Use Add This or custom icons for social media tools. Make it easy for your audience to “Like”, “Tweet” or “Plus 1” your content. This doesn’t necessarily mean having buttons galore on every page for every photograph.
Get your website up and running. Start with something simple. Make choices and edit to your brand. There are so many inexpensive website solutions available today. Really, there’s no excuse to not be online. If you have the desire to go custom and when you have the money to go custom, get in touch with a reputable web designer. What is important is that your website is easy to use, is easy for you to maintain, has great content, is mobile ready and ultimately serves, reaches and engages your audience.
Next: Blogging to build a loyal and active audience
- Robert Cialdini
- ASU, W.P. Carey School of Business, “The Gentle Science of Persuasion, Part 3: Social Proof
- Scrappy Content Can Juice Up Your Brand by Pam Slim
- Content Strategy for the Web by Kristina Halvorson
- ASMP’s Copyright Tutorial
- Photoshelter’s 2013 The Photographer’s Guide to Copyright
- Don’t Make Me Think by Steve Krug
- How to use CSS @font-face
- Ami Vitale's Tasteful Tag Cloud Example
- Smashing Magazine article on resizing images for Retina displays.
Hosted Website Solutions
- Behance (Behance is included with a Adobe Creative Cloud subscription. Learn more.)
- Cargo Collective
Wordpress Template Builders
- Ultimatum: Real Drag and Drop Layout Builder
- ithemes Builder
- Headway: Drag-n-Drop Wordpress Theme Builder
- Pagelines: Drag-n-drop framework for Wordpress
Web Font Services
About Deb Pang Davis
Deborah Pang Davis is an Assistant Professor in the Multimedia Photography & Design Department at S.I. Newhouse School of Public Communications. She teaches typography; web, tablet, print and motion design in addition to marketing and branding for undergraduate and graduate students. She continues to design print and interactive solutions for photographers and other right-brained entrepreneurs.