The folks at Scientific Properties were satisfied with the clean look and feel of their previous website, so we didn’t do any design work for them.  The primary goal of the redevelopment project was to bring the site onto the WordPress platform so that it could be more easily maintained and updated.  Before this it had almost no backend to speak of and editing it required use of a code-generating WYSIWYG tool that produced messy, inconsistent formatting and even messier code.

We rebuilt the entire site from the ground up, mimicking the visual aspect of the former site but making improvements to the information architecture and stylistic consistency where needed throughout the site.  We took careful steps to lay a strong foundation for SEO and write clean, standards-focused code and used Javascript to replace several dynamic elements that had been done in Flash on the old site, such as the slideshow on the homepage and the interactive directory map (pictured below).  The over-arching goals of the project were to modernize the site from a technical perspective, help consolidate the content into a more coherent and structured architecture, and make updating the site as intuitive and simple as possible for the folks at Scientific Properties.

The WordPress theme we wrote for Golden Belt makes extensive use of custom post types and custom fields which make adding special types of content like artist profiles and directory listings very straightforward in the admin panel.  We also included our usual admin panel tweaks – stuff like removing unused menu items, defining custom user roles to hide unnecessary configuration options and potentially dangerous capabilities from less experienced users, and more.  The old flash galleries were replaced with vastly more flexible and efficient customized NextGen gallery templates.

The project also included functionality for a secondary ‘mini-site’ with condensed content and a layout optimized for the touchscreen kiosk located in the Golden Belt main lobby.  The kiosk site pulls from the same content and back-end as the main site, but uses special templates optimized for the kiosk interface and is focused on the interactive map, events and directory areas of the site – things people might want to use in the lobby when visiting Golden Belt – rather than the rest of the content.

In the end, we arrived with a website that was visually very similar to the clean look and feel of the previous site, but with much stronger information organization and stylistic consistency as well as being vastly more convenient and efficient to quickly update and add content.  Take a look for yourself at goldenbeltarts.com!

• Professional web design experience with an emphasis on creative and interactive UIs
• Experience with iOS (Android development a plus)
• Experience with cross-browser, cross-platform development
• Familiarity with, and experience in, cloud computing
• Familiarity with, and experience in, MySQL/SQL
• Strong HTML5, CSS, JavaScript skills
• Familiarity with one or more of: Photoshop, Illustrator or Fireworks, along with a passion for clean
• interface design

For some of you, that may have conjured up an image of your physical space – the front-facing building your customer sees as he drives or walks by. If that’s the case, you’re hoping they slow down enough to size up your business or to look in at the window display in the few seconds it takes to walk by.

Sadly, this type of introduction to potential customers happens less and less. Main Street is no longer the same as it once was. Your business’ physical presence isn’t the way potential clients initially discover – and more importantly, validate – your business.

About 12 months ago, I saw a very powerful demonstration of this simple fact.

My fiance (now wife) was researching potential wedding vendors in the triangle. She was gathering her resources on everything from venues to DJs in Durham, Raleigh, and Chapel Hill. She had a list of ads from bridal magazines, friends’ referrals, searches on Google, and even business cards from a bridal show she had attended. I watched her painstakingly type in every single one of the websites she gathered and then I saw how quickly she made a decision.

Within 5 seconds of landing on the homepage, she knew whether or not this vendor was a valid candidate for our wedding.

She closed website after website before I counted to 5. For the vast majority, not one single services page was even opened, not one interior gallery page viewed. Our multitude of options was almost instantly narrowed down to the 2 or 3 websites that carried across the online persona of what she saw as a viable option. Those 2-3 vendors in each category were the only ones she deemed worthy to earn our business.

Being a web designer I had always known this, but seeing it happen right in front of me really brought it home. Your business’ website is the new storefront on Main Street. You have just enough time to catch their eye before they pass by and you’ve lost potential business.

As we all browse, it’s just staggering how many poorly designed sites make the wrong first impressions for reputable businesses. Your online clientele (whether they realize it or not) has been trained – by literally 1,000s of websites and countless hours of web browsing – to be able to discern what they feel is a reputable businesses by a simple glance at your homepage. An incorrect assumption has a lot less to do with the true viability of your business and a lot more with how you approach your online presence.

On the new Digital Main Street, you have about 5 seconds before a potential client makes an assumption about your business. A good web design firm can do a lot to ensure its the correct one for your business.

Responsive design is huge these days and it was referenced in many of the breakout sessions. With the increasing proportion of mobile device visitation, having a site that is capable of conforming to a particular screen is a huge advantage to delivering your message no matter how a site visitor comes to you. The presenter stressed that responsive design is not an afterthought, but an intentional decision made early in the planning of a project. As for getting started, it’s important to identify which content is core to your site’s goals and message. This is no small feat when you only have 3-1/2 inches of screen width!

Another interesting takeaway was learning that SEO goals can be pursued by telling stories. In an effort to identify which site visitors were helping to achieve a site’s goals, the presenter described creating fictitious personas, complete with demographic and psychographic profiles. These were virtual people with particular buying habits, interests and behaviors. For the five personas created, content and landing pages were tailored for each. When Bob the Outdoorsman visited, for example, he was greeted with a landing page that evoked natural splendor and outdoor hobbies like camping. Subsequent site visitation was analyzed to determine which of the visitor personas was most impactful. All of a sudden, the site owner knows which of the personas responded well and ultimately contributed towards the site’s goals. This knowledge can then be used to further refine the site’s messages and strategy to its greatest efficiency.

The day and a half at Internet Summit reinforced that this technological landscape is in rapid and constant motion. Best practices today will be replaced with lessons learned and applied this time next year. The challenge to stay current and relevant is part of the fun of working in such a dynamic industry. We’re glad to be in such good company as my colleagues at the Internet Summit and fortunate to be bringing back valuable approaches for our clients’ benefit.

In my last post, I presented the case for hiring a professional photographer. I still believe this is the best option for most businesses, but I also realize that sometimes that isn’t always possible. Luckily, there are some great resources out there for stock photography, if you’ll only follow a few simple rules:

1. Consider what type of photos would be appropriate for your business.
Photos should not be treated as merely objects to fill space on your site, they should support your overall message as a company. A pretty photo of a beach is nice, but makes no sense on your accounting website. It would be better to find images related to your industry, either in a direct or indirect way. Sometimes an abstract theme may work – maybe a play on words – like the name of your company or your business’ location – or symbols and industry-related objects.

2. Try to choose photos that resemble your geographical region.
If you’re looking for appropriate photos, remember – things like palm trees in the background are a dead giveaway that this can’t actually be a photo of your employees in Iowa. Even things like similar architecture of homes and buildings compared to your area can help photos feel more genuine and local.

3. Stick to a similar style of photography throughout.
Think about the amount of light, the quality of color, and consistency of content. For example, it would be a poor decision to choose several photos of similar content, but one taken in broad daylight, one in dark indoor light, and a third isolated on a white background. When at all possible, try to see if there are multiple photos available that were taken by the same photographer. In most cases, the photographer’s style will be similar throughout their body of work, helping your photos work together as a cohesive set.

4. Try to choose photos that aren’t too “stocky.”
This is a difficult concept to explain, and I can’t really say what it is about a photo that sometimes gives it away as being stock. But there is a certain quality – that “this could be the fake photo of a smiling family that comes in a tabletop picture frame” feel, that we definitely want to avoid. Also, don’t choose photos that you’ve seen used in another place. If you recognize a stock model from a cereal box, then you don’t want her representing your company on your website.

5. Don’t just grab photos from Google!
This should go without saying, but there are some serious copyright infringements you could run into by swiping photos from someone else’s site. Don’t do it.

6. Let us help you out.
At Cuberis, we’re happy to suggest photos for clients’ websites. We can look through our own stock library, perform a stock search for you, or you can browse our most used source for stock photos, thinkstockphotos.com. We’ll be happy to offer our advice on what photos will and won’t work, and most importantly, how to avoid that mysterious “stocky” quality.

What is SEO?

SEO stands for Search Engine Optimization and refers to a broad set of techniques and practices that are designed to improve the visibility of a website in search engine results.  SEO practices take advantage of the way search engines like Google and Yahoo index websites and rank search results in order to improve the ranking of a particular website in search results relative to other similar sites.

This encompasses everything from general practices like steady new content, good code that is easy for search engine crawlers to read and strategic targeting of various important keywords related to the website’s topic to more nuanced technical applications such as URL canonization and 301 redirects.   There is also a distinction between on-page (or on-site) SEO and off-page SEO – the former concerns techniques to improve your website itself and the latter deals with off-site techniques to increase visibility such as backlinking and competitive analysis.  We’ll get more into the specifics later in the series.

Why is Good SEO Practice Important?

This one is a bit of a no-brainer: good SEO means you will reach more people, which is the primary goal of just about every website out there, whether it is a business, non-profit, personal blog or anything else.  Strong SEO means that you are maximizing your organic traffic – people who arrive at your website “naturally”, e.g. arriving via search engines or external links rather than getting there via advertising, email newsletter, or other web marketing techniques.  The better your SEO practices are, the higher your ranking in search engine results will be, and consequently you will receive a lot more organic traffic than you would otherwise.

How Do Search Engines Work?

Major search engines like Google have a complex (and sometimes esoteric) methodology for how they find, index, and rank websites on the internet to use in returning search results.  Search engines use automated bots known as spiders that traverse the web indexing websites and their content in a process known as crawling.  Crawling never ends – once a spider has indexed the current version of your website it will note its existence and return again later.  The frequency with which a particular website gets crawled is dependent on a lot of factors like page rank, external links, and the frequency at which the website publishes new content.

Spiders build an index of keywords and phrases that is used to rapidly execute search queries.  However things are far from that simple – there are innumerable other factors that determine how a website is ranked in search engine results besides pure keywords.  Google’s PageRank is a good example – a value assigned to each website Google crawls based on a complex algorithm that takes into account all sorts of things like external links, the rate at which the site outputs new content, the length of time the site has been around, and many others.  Google makes changes and improvements to its search and pagerank algorithms hundreds of times a year!

Good SEO principles and practices attempt to take advantage of this system by providing content, metadata, and keywords in a way that maximizes the benefits of these search and ranking algorithms for your website.

Conclusion

You should now have a pretty good understanding of the concept of search engine optimization and why it is important to website owners, and a solid foundation for learning some of the specific practices and techniques encompassed by the SEO umbrella.  Later articles in this series will specifically address good and bad SEO practices and provide a more detailed glimpse at some of the most important do’s and don’ts in the realm of search engine optimization.

Picked up some WordPress schwag too

All the sessions were videotaped and will be available to view on WordPress.tv in a couple of weeks. In the mean time, here is a brief overview of a few of the sessions we attended, highlighting the new info I look forward to making a part of my workflow:

Using AJAX in Your Plugins (The Right Way)

by Thomas Griffin

I’ve been using AJAX in my plugins for about a year now, ever since I started writing plugins for the sites I develop. Part of me was really curious to know have I been doing it the wrong way?? I first learned how to use AJAX in plugins from various tutorials that I found through the WordPress codex, so I was pretty sure I was doing okay. And after sitting through this presentation, I was happy to know that I have in fact been doing it correctly. What is complicated is that WordPress has different ways of using AJAX when it is on the admin side and viewer facing side. To make it a little more confusing, it also has different functions you have to use for using AJAX for users who are logged in versus not logged in. Thomas’s presentation was about how to use AJAX on the viewer facing side for both logged in and non-logged in users. He was kind enough to put his presentation online, so I look forward to following his tutorial the next time I need to build some AJAX functionality in a plugin. In addition, he emphasized the importance of internationalizing all plugins. All the plugins I’ve written have been for internal use, but I look forward to writing one for general distribution. I’ll definitely make sure to internationalize!

Responsive Design with the Breakpoint Framework

by Les James

This was by far my favorite session. We have been itching to switch over to using a CSS preprocessor like Sass or LESS for a while now. But it would mean changing our workflow, so we have held off. I’m now absolutely convinced that it is the right way to go. This session was about the Breakpoint Framework, which is a grid system Les created that uses Sass. It makes responsive design look so easy that I question why every website isn’t responsive. Basically, it uses columns and gutters of predetermined widths to figure out which design to display on a variety of devices. That system makes it possible to have a mobile optimized site that works on a bunch of mobile devices that have slightly different screen sizes. No more worrying about if it will look great on an iPhone but broken on a Samsung Galaxy S3. The real take-away was how important designing on a grid is for responsive design. And to design mobile first and cascade up to tablet and desktop designs. Framelessgrid.com was suggested as a great resource. The great news to me was that the CSS works on all modern browsers and all IE back to IE6.

Using Git With WordPress

by Glenn Ansley

We at Cuberis have been wishing we had some kind of version control for whenever more than one developer is working on a project. But that also means taking time away from working on clients’ projects and revamping our workflow, so it always gets put on the back burner. This session was helpful in really understanding the differences between Git and Subversion. It also helped drill home the importance and convenience of version control. When we start using Sass or LESS we will have to start developing locally. Then we will absolutely have to store our code in a repository so it can be checked out to whichever computer we happen to be working from. Glenn provided tons of helpful resources in getting started with Git on his github. Some repositories that were mentioned were github.com, bitbucket.com, and beanstalkapp.com.

Real world example:  I recently purchased my first house, and I want to paint the exterior with a color more to my taste. I subscribe to a couple of daily deal sites, and a few days ago I got one that included a deal on exterior house painting. I clicked on the link, and was hugely disappointed by the unprofessional quality of their website. Now there were many issues aside from their lack of photography, but the glaring problem was that these folks didn’t have any photos posted of their work. No before and after shots (which could have been very powerful for that sort of business), no photos of the staff, no photos related to their business at all. At that point, I decided not to pursue this business. How many others do you think clicked on that link and decided not to hire these painters? I’d be willing to bet that their site visits surged while their coupon was active, but that they got very little new business.

Look folks, photos are important. They tell us about your business in ways that are difficult to measure. You want prospective clients to know that you care about your work, that you are proud of your products and services, and that your business is professional. Sure, you can write all that down, but let’s face it – it’s easier to click through a gallery than it is to read a long paragraph. The absence of that gallery reduces the chances that anyone will read up on your company. Imagine an Apple website where rather than beautiful, clean, professional photos of their products, there are instead blurry, yellowed photos of a product taken on a cell phone’s built-in camera. Would people click to learn more about these projects? Would we still stand in line for hours to buy them? Without the clean, beautiful photography, would Apple have ever become the powerhouse it is today?

You may be asking, “But Cuberis, I don’t have any photography!” There’s an easy answer. Hire a professional photographer. Now I know everyone and their mama has a digital SLR these days, but ask yourself – would you pay yourself to take a photo? Not only do photographers have a vast set of knowledge ranging from composition to lighting, working with a professional photographer is valuable, because they can take into account how the photography will be used on your site. Chances are, if you’re early in the design stage, you’ve seen some wireframes of your new site. You know roughly what the size and dimension of your photos will need to be. If you’re even further into the site design, you know if the site is mostly white based or darker in composition. Let your web designers share this information with your photographer. If you hire a photographer but do not give them any additional information, you may end up with beautiful photographs which cannot be used on your site at all, due to an incorrect orientation, lighting, or scale. Ideally, we’d like to work with your photographer to be sure that the photos and the website will work together in perfect harmony.

I can’t stress the value of good photography enough. Too many people see it as an afterthought, something they can just churn out on their own at the last minute. Trust me, investing in professional photography will provide your business with incredible content, not only for your website, but perhaps to display in your own business and use in marketing materials for years to come.

The WordCamp Setup

WordCamps happen all over the place! They are community-organized conferences where developers and users get together to share things they’ve learned and get to know each other. There are a variety of people speaking on topics on 3 tracks: Users, Power Users, and Developers. Each session is 50 minutes long and recorded to be shared on WordPress.tv. So WordCamp is open source, just like WordPress!

The Sessions

There are about 20 sessions scheduled so far and it seems like there are more each time I check. Here are the ones we are excited about attending.

• Mystery Speaker - 50 Shades of WordPress
• Les James – Responsive Design with the Breakpoint Framework
• Jonathan Stephens – Typography:Internet::Butter:Southern Cooking
• Thomas Griffin – Using AJAX in Your Plugins (The Right Way)
• Glenn Ansley – Using Git with WordPress
• Doug Cone – Writing Secure Code for WordPress

We might need to do rock, paper, scissors to see who gets to sit in which session if they overlap too much.

Check back the week of November 5 for a follow-up post about our time at the Camp. We’ll let you know which sessions we sat in and some highlights of what we learned. Hopefully we’ll have some great photos too!