Drakenhart Studios

Welcome to Themes

Themes, also known among some as “skins”, consists of the html, css, and images that make a site look the way it does. Those UI (User Interface) designers who do not do a lot of back-end coding can, feasibly, work up a Theme. One doesn’t need a lot of design skill, not with all the tutorials and help sites out there today. But taking that Theme from Image Mock-up to final product requires a little bit more effort.

What it requires is the ability to understand a given CMS (Content Managemnt System) and how it outputs the data it manages. The level of difficulty in doing this depends entirely on what you are trying to accomplish.

Levels of Complexity and Difficulty

Making a skin using the defaults that come with a CMS is the easiet way of handling this. Because so many designers want something unique, the defaults are rarely seen as much as one might come to believe. But this doesn’t make the site look or feel unique even if the defaults aren’t used as much. It still seems like a re-colored clone.

The next level consists of designing an entire site the way you want it to look, while taking into consideration the “parts” that the CMS Outputs. For instance WordPress outputs a header, footer, content area, and sidebars (if they are enabled). Since this is automatic to any given CMS, you need to design with these sections in mind and determine what goes where as you work.

The next level consists of tweaking the existing code either by applying small hacks or re-arranging how things show up on a given page. You may wish to change the front page into a semi-static landing page with RSS feeds that show up in the sidebar, for example. This requires an understanding of how the CMS’s system handles such extras, if it does at all, and how outside code might effect the final output. Any good designer knows well that a small bit of stray code can cause havoc in how a site looks when it is viewed!

Beyond this is the Intermediate to Advanced coding techniques that can transform how a given CMS outputs entirely. This often requires an innate understanding of how the system handles data, and may well require a non-coding designer to learn more then their fair share of coding. The options here for most UI designers are to either learn how to code in depth, learn the basics and stay away from the more advanced coding tricks, or hire someone else to do it for you! What a designer chooses is entirely up to them and there is no “wrong way” of doing it, as long as the site looks good and does what you want it to do!

Wire Frame FIRST!

Even before the Mockup comes the Wire Frame. What this looks like is entirely up to the one doing the design. Personally I work out a flow chart first, and as I work on this I doodle ideas into the corner of my notes. From this flow chart and doodles I make a rough wireframe that gives me an idea of the general layout and feel of the site.

Wire frames helps you to see the flow of the site, and to get an idea of what you are going to need in what areas. It is essential for the final mockup in the same way an outline is essential for a good research paper!

Once you have your wireframe (and notes!) then you can get to working on the mock up itself!

Mockups

A mockup is a graphic representation of what you want to site to look like. This includes the base body design (the elements that won’t change), the look of the individual pages and their content (Lores Ipsum fills in text nicely in case you aren’t sure of what to write), and what images are being used for each! Each individual page should have a mock up. Layer them all properly and name them (if the graphics program you have allows you to name your layers). This will reduce the wasted time from searching for a particular element later.

Mock ups should be of the final size, and take into consideration the different browser sizes. Yes there are some people who still use older monitors whose max resolution for websites are 600×800. Thankfully they are in the minority now, but you need to keep in mind that they do exist and keep the important information in the center. Anything non-essential to your site (advertisements, links outside of the site, etc) can be on the “wings”, but the main product and content needs to be easily accessible.

Make the Mock Up into Code

So now that you’ve decided on what to do, and how far into the code you are going to go, what’s next? Take the mock-up and write the base markup and CSS. I cannot stress enough how important this step is for keeping organized and focused on the final goal! Do all of your mark up first, make sure it works, try to break it to find out what happens, test the css in different browsers, get friends to test it in other browsers, do what ever you need to make sure the design code itself is functional.

Why? When something goes wrong later you can be certain, at least, that it’s not something in the design code that is malfunctioning! Also, this framework gives you the foundation you need for making Themes look good. This is what the site is suposed to look like after all, right?

After this, then you can get into the nitty gritty of dividing up the sections of a site into the parts needed as per how the CMS handles outputting. This part can be a little bit tricky depending on what your overall scheme for a site is and how you are going to handle it. Generally many sites rely on PHP in order to output. Understanding how PHP works will be a great help to any designer who finds themselves working with it.

W3Cschools section on PHP is a great place to start! There is also PHP.net which is more of a walk-through tand explains a lot more in plain language (until you get into the more technical stuff). Tizag has a lot of beginner tutorials and explanations. I found them to be slow, mostly because I was too excited to start with the basics. But I have to enforce, baby steps, learn the basics first. When you are looking at the CMS output code you’ll at least be able to read it! That is the first key to successfully tweaking the PHP output code!

Once you get the repeating sections done (header, footer, and sometimes but not always the sidebar(s)) you can work on how the content in the main content section will output. This can change from page to page. So keep in mind what your intents for each page are, and always refer back to your wireframes and mockups! I relate this habit to checking my algerbra notes during a test! By checking your mockups and wireframes you keep focused on the end result rather then get lost in the code.

By the time you get all the sections coded, it’s time to test it. (If you have a Windows Vista Machine I highly suggest you DO NOT try to install a virtual server unless you KNOW exactly what you are doing!) Best way to do this live is to have a mock-site set up, with a live database, et al. This way you can test it in a live environment.

It is highly suggested that one does NOT just upload the site to it’s final home for testing. This can cause problems on a number of levels! It can interfere with user experience, as well as cause problems with the site’s database in case something in the code is messed up. The Search engine spiders and bots could crawl your site and come up with poor reactions, and you wouldn’t even know it until later when you check your statistics! You could even drive traffic away from your site as well.

It’s a messy process. Find a place or way to test it before setting the site live.

Generally most computer OS (Operating Systems) can’t or won’t parse PHP. Windows NT was the server version of Windows and will display PHP. There are virtual servers you can set up and configure on your machine, but in such cases you should always back up the computer you will be using to do this in case something bad happens.

Once things are tested and working, it’s go-time. You should have a functional site that looks good and works!

More in this Series:
(tba as posted)

I love making dynamic menus of all kinds, and trying to find ways to merge various forms and sorts of dynamic menus. What I don’t like is making menus that rely on any code other then CSS. It’s a personal preference of mine as I find that it keeps site speed faster. Now understand, often it doesn’t scrape off a lot of time, but for image-heavy sites every little bit counts.

There is a nifty version of the horizontal menu called a “Sliding Doors” menu. In this the background image(s) are set up so that they grow or shrink with the size of the text. This keeps your Menus looking beautiful and retains their dynamic styling even when text is expanded greatly.

A List Apart, one of my favorite resources, has an interesting take on the sliding door menu style. Yet as I was working on the newer version of my own menu, I decided to test the CSS to make sure everything validated properly. I was surprised to find that in the CSS 2.1 validation that an error occurred. It wasn’t a critical error and was more of a specific need for the CSS level of validation as per the W3C rules for CSS 2.1, but it was enough to make me wonder.

For me to validate “clear” (with no Errors at all) I had to add a width selector to part of the CSS Style for the menu. Apparently a float requires the width selector to be within the same style.

#main_nav li {
float : left;
width : auto;
margin : 0;
padding : 0;
background : url(../images/right_menu_border.png) no-repeat right bottom;
}

In the tutorial from A List Apart this wasn’t listed, and to be honest it’s not entirely necessary (at the time of this article) because leaving it out doesn’t effect the code’s function. It’s merely needed in order to validate the CSS for level 2.1 in the clear.

By Adding auto to my width selector I filled in the requirement for clear validation without effecting my layout.

What is SMO?

Well, SEO (Search Engine Optimization) is all about setting your site up to be a grand winner in the search engine “races”. You work on meta tags, descriptions, word-density in your static pages. and so much more. But is SMO related? In a way yes, but in a very different way.

SMO is a term to describe the use of Social Networks like Facebook, LinkedIn, My Space (and to some lesser extent ever YouTube) and more in order to further expanded an individual’s or business’ marketing reach. By using these sites to advertise their products or services, they end up reaching new audiences. Many individuals and businesses will create their own profile, or build a business profile and then have others in the greater community link to them, subscribe to them, favorite them, and more dependent upon what the particular social network uses.

Examples of How this Works

LinkedIn, for example, is a professional’s social network. This place is an example of the original definition of the term “networking”, outside of the digital web. People search through their list of contacts for other contacts in companies or groups in order to make new contacts. Doing this gives people a broader perspective and a much greater reach when it comes to new jobs. Many jobs would prefer people who come recommended by a current employee, rather then search through submitted resumes from job-listings.

So how does SMO effect a strict social network like LinekedIn? Groups, associations, profile advertising, and discussion boards.

People in certain groups will advertise their services. If done once or twice, especially when you are new to the group, this is a good thing. It lets people know not only who you are but what you offer in the way of skills. Just don’t repeat your profile or resume, since they can view that if they wanted to by clicking on your profile link. But, this can become spam-ridden and may annoy many of the groups members if one posts repeatedly the same thing, or even versions of the same thing. It is also an easy way of loose a group’s membership as people leave it for other similar groups, so it’s best to do this with caution and a dash of common sense.

Also, in group discussions, I’ve found people tend to offer their services as a way to “help”. Or they will offer their services, or examples of their services, in discussions in order to try and illustrate a point. This is okay is some few instances, but shouldn’t be a regular reaction as it looks very self-centered and unprofessional. There are ways to advertise your skills without making it look painfully obvious, but more on that in another post.

MySpace is a place where individuals or businesses can put up their own MySpace account. This allows for all sorts of communication and self advertising. If people want to friend the account, they can then get updates through MySpace’s PMing (Private Messaging) System, or by following the accounts updates. They can even leave comments and have discussions with others who follow the same company.

This can also become spam-filled as some businesses PM or send updates that are generally not necessary. So think before you advertise. Please.

Facebook has it’s groups that a user can become a “fan of” and follow their updates. One can set up an individual account as a business account instead.

Online Forums related to your site’s content are another place you can get your socializing groove on and get more interest in what you do.

Twitter, and it’s like, can alert people to new events, or you can add twitter to your site in order to keep people up to date just on what you are doing. (Good for clients.)

Any community or online tool (like YouTube and Flicker) that allow commenting or comment sharing can in turn be used to drive traffic to your site.

Even your Blog, if you allow comments to your posts, can be used as a powerful marketing tool. You could just as easily link to other posts (or help promote a friend by linking to their posts) as a reply to a comment on your own blog.

Other’s Blogs offer the same benefit in return.

The options are endless if you know what to look for in a Social Network.

So what is Social Media Optimization?

I’ll give you 3 guesses and the first two do not count.

SMO is about promoting your site, business, project, or product (what ever it is) by infiltrating the Social Media Networks. Then through trial and error, finding the best ways to get these various sites to work for you. Please take heed that what may seem the more obvious way to manage this, may in fact be an over-used, spam-like way instead. Do some digging to see how other businesses do what they do and take notes to later compare.

Now, this has a variety of positives and negatives to be taken into consideration, including search engine requirements.

This can give you outside links from other out-side sites, which does help a little bit in promoting your site in the search engine wars. This however can also be detrimental, as many of these social networking sites may not be related to your site’s content. Also, you’ll need to check and make sure you are getting that link-back power by comparing old site stats to current sites stats.

It can also offer another form of “free” advertising. You just need to make sure that the Social Network will allow such advertising, as some may be more restrictive of something they are not getting a revenue share out of when often many social networks do not charge end-users for their services.

My Opinion?

Networking lands us job, tips offs, advice, suggestions, help, mentors, new friends and more. The internet has always been just an expansive network, so this is merely another way of using it as a powerful tool to make those important connections to others.

In my opinion it is the accessibility, making the world both a much smaller and larger place. It is the ability to share information, media of all kinds, ideas, and communicate in a more direct, faster, and more intense way. This is what makes social networking, and the communities that pop up around such sites that cater to their needs to connect with each other, that make up a lot of the differences.

Yet, this can create yet another form of spam. In turn this can hurt your site.

So how do you combat it?

1. Know you Social Media Network Platform: Forums, twitter, and more are all similar in that people can connect and interact, but they all have different issues when it comes to optimizing your interaction with them for your best effort.
2. Contribute: IE. Don’t be a troll or spammer. Offer something of use to the community in order to expand your network of contacts and connections.
3. Watch your links! Too many of them from any one site or place can cause you to loose footing in your SEO. Don’t threaten those standings by silly mistakes.
4. Socialize: Depending on what your Niche is, generally speaking, will decide where you go to interact. Be polite, professional in many cases, but be yourself. Don’t sell yourself as something you are not or you’ll be labeled a faker.
5. Interaction: Politeness, and understanding that text-based communications doesn’t always offer us an insight into one’s personality, is key in many of these communities. Don’t judge. Get to know people and be polite about the questions to toss at folks. Watch how you write the words you use. Also remember to not read into what someone has typed, as cynicism and sarcasm can be overlooked and the text read as aggressive instead of “funny”.
6. Be real: Don’t expect to throw a few links or un-helpful comments at a network and expect to get returns. Like word of mouth Social Networks that are used poorly can backlash in ways that are crushing. Treat them with respect, sincerity, honesty, and not a purely marketing mindset. Be real, because such abuses will get you labeled and those labels will follow you for a long long time to come.
7. Try not to use it as a marketing tool alone! See #6. Social networks are for networking, getting to know people, and interacting with people. Not for trawling for more traffic. Please. Do. Not. Trawl.
8. Content: Yes Content. You’ll see me “preaching” content quite often because that is really what a user wants to see. Meat on the bone and not plastic, fake, toy-that-looks-like-meat.

Above all treat your networks with respect and don’t expect them to give you what you need and then not give back. That will also be remembered. Share, help, offer services, advice, knowledge, information as much as you can without crippling your business.

Resources:

• Infogle: What’s different about social-media optimization.

No tips, no tricks, no insider trader info, just facts. Common sense facts!

SEO. I’m sure plenty of you have heard of the term. Even better some of you may know what it is and how to go about doing it. Some may only know the “old way” that most search engines are rejecting for better and more exacting options. For those that don’t read on. For those that do skip down a bit.

What is SEO?

SEO is a short form acronym for “Search Engine Optimization”. What this is or does, is offer the search engines information to try and get your site to the top of the lists. Most search engines have different algorithms for trying to find the best sites that match the terms being searched for and then return that list to the end user. Knowing the tricks of these algorithms is what SEO is all about.. or was.

Yes I said was.

Many of the Search engines are changing their tactics. Why is that? Spam, spam-ad-sites, scam sites, people who abused the system in order to get to the top of the charts and then shared those tricks for money. Sure business is about money, but not about dishonesty. Dishonest business eventually get caught and go under! Don’t be one of them and you’ll do just fine!

No really!

Changing Winds, New Practices

So how is SEO changing? You want to know the trick to it do you? Sorry there is no real trick because the search engines and their programmers are just getting smarter. The key to ranking high and ranking well is really attached to content.

Content may be “King” and design “Queen” but the rest of the court has come into their own and are being considered as a way to rate your sites. Yep you heard me. It is about the network you’ve developed and how it relates to your content.

No, not social media. That’s a part of it, to be sure, but it isn’t the end of it. It is about how your content, meta tags, titles (header, links, etc), image description, and the other aspects of web usability all interlink into your end-user’s experience. No kidding.

End-User is my word for ‘God’

Okay it isn’t actually, but I think I got my point across whether your initial reaction is a knee-jerk “WHAT! Blasphemous!” or a hearty chuckle as you get the “joke”. It is about what the End User wants and how they interact with your web site. The key to good SEO is about what you are offering to the greater whole, and how relevant it is to what the end-user has asked the search engines to find for them.

How many times have you written in a search engine for something and found…, nothing. Or Ultimate Crap! (echos like a bad horror movie) Or what’s worse, you end up with sites that try to sell you stuff in that patented single column, center-justified, giant RED LETTERS!!!!!!! With lots of little exclamation marks! All of the text talking about how awesome their product is and how it will change your life!!

Crap. You know it and I know it but they were “Optimized” for the search engines to find. So the search engines got sick of it, got working on it, and got smart, real smart.

You see each search engines for the most part (sans a few I may not know) are a business in and of themselves. Google stock is actually traded! Their business relies on satisfying the end-user. You, me, and everyone else that uses search engines to find what we are looking for online.

So it isn’t about “what is the newest trick”. Good, solid SEO is about the correct procedures to follow as well as what NOT to do!

DO

• Meta Tags:Meta tags may not have the same importance or weight they did years ago, but they are still important in declaring what your document is about. Pick a handful, not too many, and avoid repeating words.
• Titles Tag: Use these as often as you can. Where ever they need to be use in an area that you have content. This helps to describe what it is the content is about, be it a link, and image, or other media!
• Links: Popularity and links go hand in hand. Whether is it because of negative feed back (ie. people saying ‘Oh wow take a look at THIS crap!’) or positive feedback (ie. ‘Wow how cool and useful this is! Check it out!’) people will link to your site. This is noticed by search engines. The more important the site that links to yours, the more relevant a site that links to yours, the better your chances at gaining page rank!
• Link Relevance: Only link to, or try to garner links from, sites relevant to your own. It is a logic pattern that improves your ranking. A search engine looks at irrelevant links as someone would look at a dog for sale in a food store. It makes no sense to them.
• Content: What is your site about? Is is a broad beast with a lot of information (about.com), or is is a specific creature with refined tastes and requirements (elfwood.com). Perhaps it’s a hybrid of both (tutorial sites that have strict requirements), or a community site based around one topic (ConceptArt.org).
• ** Notice that most of the sites I’ve listed here are also art-related… because my content is primarily art-related. If my site were more tech-centered I might link to Wired, or the Food Network site were I making a more food-centric site.
• Use of Robots.txt: ‘Nofollow’ and ‘follow’ rules help the sites know what pages to crawl. This can be used smartly to limit the amount of repetitive links, or to offer the engines a broader range to crawl through your site. If you have a “links” page with a LOT of out going links, so much so that it is hurting your site, try this: make it a “nofollow” and then blog about some of these sites instead. This way your links get their attention but the engines get CONTENT.
• Write: Yes write new content. If you site is very static (basic art gallery styled site) add a “professional twitter feed”, or if you don’t want to add a blog to your site, grab a free one from any of the various providers and have it’s rss feed show up on your site as a “news” section.
• Giving: Whether it’s a blog entry, a review of someone else’s product, or a partnership link, share the love. The links given out to others may reciprocate links back to you. In the Blogosphere, often when an author finds out he’s been written about, they may write about you or make a note in their journals about the article. People love attention! Give them some love!

DO NOT

• Meta Tags: No stuffing meta tags in your header. Don’t use the same word over and over again in different forms, spellings, or formats. That will penalize you!
• No Link Farms: DO NOT become a link farm! Do not link to everything in the world, especially if it doesn’t relate to your site content! This reduces the power of your out-going links, and makes you look like a link farm to search engines.
• No Link Farmers: Like Link-Farming do NOT farm for links. It is spam, it annoys people, and eventually leads to people not believing your authority or authenticity!
• Link Relevance: I cannot stress this enough. Do NOT link to that which has no relevance to your site. Don’t bother with links from sites that are not Relevant to your site.
• Out-links-In: In other words what links to your site and from where? Confused? Okay, in short the engines also look at where links are coming from that point to your site! So those links that are relevance are equally as important!

Simplify if you can. Keep the main links on a front page to between 3 and 6 if at all possible.

• Content: Do not fill a site with dirbble, crap, or otherwise un-useful, unhelpful tripe. Be mindful of the focus of a site and try to keep that focus fresh in your mind always as it is updated.
• Affiliate Links: Are they hurting your rankings? What you didn’t know they could hurt your rankings? It really depends on the search engine you are optimizing a site for… yes the same way a designer must keep in mind different browser types. Ironic? I think so. Go read the different engines’ policies.
• Masking links: Some Browsers penalize your site for having affiliate links. In some cases people offer you ways to “get around this issue” by masking the links. There are a number of ways to do this, but can in the long run hurt your site. So I suggest that folks do not do this. See above. I would suggest limiting the links instead to the highest payouts, or those that are specifically relevant to your site.

Shocked?

I hope not. This is very common sense. People want content. They want to learn or share that content if they are impressed by it. So write good content and as your popularity grows so too will your engine rankings. Give something back to the net then just spam. The more focused the site the better off you are.

If you find out that you are interested in a lot of different things, take the risk to start a blog, a second, or third site based on these other hobbies. Link to them from your other sites. Just again, don’t over do it.

Content in moderation that educates rather then entices. Don’t sell, share. ~ Drakenhart

WordPress got wise, real wise. They’ve started to populate their new domain, WordPress.tv, with videos. This tickles me in ways I can barely begin to describe.

First: I’m a person who is very much supportive of people using the proper ending to their domains. The endings were created to help differentiate between content types. This way people would know from first glance just what the company is, does, and it’s intents.

• .com –> Commercial Business (Drakenhart Studios.com is being held by a friend currently. Lost contact.)
• .net –> Network (We are in our own way a network. Rather then just offer you our business end and sales pitch, we offer a form of community and continued service. Links to places that benefit our clients and viewers, and connections to our clients’ sites for people to check out!)
• .org –> Organization, like the World Wild Life Fund or the Red Corss, etc.
  
• .tv –> Television of other form of video media. (Thus WordPress.tv offering a site Full of helpful, online walkthroughs and tutorials. Bonus!)
• .biz –> General Business
• .us –> General Web Site located in the United States
• .info –> Informational site, often like a wikipedia and the like.
• .me –> No joke, this is a website that is about you.
• .mobi –> Mobile phones. Yep.

And so forth…

Why else? Video Tutorials rock in my book! Reading a manual and jumping back and forth between pages, versus  actually seeing what is being describe are two very different ways of learning. “Visual” people learn best by watching or interacting. “Abstract” people learn best from reading or looking at diagrams. I am a visual leaner rather then an abstract-text learner. So watching the videos as they -show- me what to do is exceedingly more helpful then slogging through pages after pages of Codex – of which some of it is not up to date!

Down side / Up side: It is not a “community” per say. Only certain people are allowed to post videos, unlike YouTube. This means a greater quality. This also means slower wait times as they put up more and more specific tutorials. They have to put the basics up first!

Go check it out!