Responsive Web Design

One of the major trends in websites over the last few years has been Responsive Design.  Responsive Design is way to design and program a website so it looks good at any screen size.

This is import because of the way we are currently interacting with websites.  Not only do we view them on our desktop computer, but on our various pads and smart phones.  Websites need to be easily navigated regardless of the size of the display screen.

Using various techniques involving html5, css3, and javascript a website can be programmed to adjust its layout based on the size of the display.  No longer are sites shrunk down to tiny size on a pad.  There is not need to create and maintain a totally separate website for smart phone use.

When using a smaller display: menus can be simplified, multiple columns can become one column, images can be rescaled to fit.  All while maintaining the same data architecture.

Kirk Peters Studio has done nothing but responsive content since 2013.  We are well versed on the latest techniques to make your site accessible across the most number of devices.

Content Management Systems

Content Management Systems (CMS) have become crucial part of website construction.  Clients want to have greater and easier control over their sites content.  They do not want to have to engage a web expert when making simple modifications to their website.  This is where CMS comes in.

There are many different CMS with which a website can be built. However, since you want a system with a lot of community support, one that will continue to be supported in the future, and one with a lot of third party plugins, you really should go with one of the big three: WordPress, Joomla, or Drupal.

All have there pros and cons, but you really can’t go wrong with any of them.  The major areas which which to look for in a CMS are easy of use, flexibility, and security.   To oversimplify, the easiest to the hardest would be WordPress, Joomla, Drupal.  By sacrificing ease you can increase flexibility and security, so I would reverse the list when it comes these two areas.

With a knowledgeable programmer any of the CMS can be perfectly flexible and secure, so Kirk Peters Studio usually likes to work with WordPress.  However, we can build a site in any CMS the client requests.

 

 

Kirk Peters Content Management System

Now with all Kirk Peters Web Multimedia Studio websites, customers can have a custom built content management system. A password protected backend to the site, the manager allows users to be able to add, delete and reorder the pages on the site. It is also possible to modify page content in a very simple online text editor. The Studio can create many custom feeds (blog entries, news articles, portfolio pieces, etc.) for use on the site. Feeds can be added to, altered, deleted from and reordered. The content manager can also be used to upload and manage files on the server.

The advantage of Kirk Peters Studio Content Manager is the simplicity. Prepackaged content management systems (such as joomla) can be a hassle to install. Their use can be hard to learn, due to the over amount of functions, most of which will never be needed. Our quick and easy content management system is custom programmed just for one particular site, containing the functionality needed for that site and that site alone.

Call Kirk Peters Multimedia Studio today and ask how we can integrate our content management system into your website and take control of your websites maintenance.

Another New Web Design for the Studio

The Kirk Peters Web Multimedia Studio web site has a new look.

The Studio has been busy and we needed a new design to be more portfolio orientated. Now it is more convenient to view projects the Studio is working on.

One of the special characteristics of the new design is that it is virtually tableless. There are many advantages to using CSS techniques to style the content rather then tables. For starters, loading is much quicker, as sections of the site will begin to display before the entire site is loaded. With a table based web site, all of the elements with in a table must be loaded before anything is displayed. The web site can also be much more fluid. Notice how the content fills the browser window, no matter the size of your display.

Other improvements to our site include more flash, more portfolio items, more detail concerning our individual services, and a sharper design. Also, the php programming is used effectively to create dynamic content.

The new site represents Kirk Peters Multimedia Studios commitment to keeping up with the latest web design techniques and providing our clients with effective web and multimedia solutions that fit into their budget.

Thanks,
Kirk Peters
Kirk Peters Web Multimedia Studio

A Simple Guide for Search Engine Optimization

What is the point of having a web site if no one can find it? A high search engine ranking is something we would all like to achieve with our web sites. This month’s article is how the high-end SEO companies boost the search engine performance of their clients.

Optimization can be broken into two categories: internal and external. Internal is what you put on your own web site and external is what you get others to put on their web site. One of these two categories is significantly more important than the other.

Of the two, external optimization is the more important type. Search engines give priority to web sites primarily based on the number of links that go to that web site from other web sites. Links to your web site are also weighted according to the Google rank for the linking site, and how many other external links are found on that web site. This means directory sites, though easy to obtain a link, are not given the same weight as non-directory sites of the same Google ranking.

So the process for external optimization is as follows:

1. Do a search using your target keywords.

2. Take a look at the top sites which are found.

3. Using the search engine itself, find all of the sites that link to your competitors’ web sites. Different search engines have different methods for retrieving this data.

4. Get the list of sites that link to your competitors’ sites and list them according to their Google rank. Google rank can be found by installing a Google tool bar onto your browser.

5. Try to gain a link to your web site from these web sites, concentrating on the highest Google ranked sites. It is very important that the link actually consist of your target keywords. For example, the link for the site should not just be “www.kirkpeters.com”, it should be “the best web services in Pittsburgh.” Gaining a link can involve many processes. The most common is called a link exchange in which a link to the other site is on yours as well. Some sites will charge for a link, while others will provide you a link in exchange for content (like an article or press release).

6. Be patient. The process can take months! Search engines need to crawl each site and find the new links. They also need to re-crawl your site. The new amount of links will result in a raise of your own sites Google ranking, which will eventually result a higher ranking in the search engines.

Internal optimization has been marginalized by search engines in the last few years, but there are still a few things that are important to have on your site. Here are a few tips:

1. Your site should have your key words in the meta tags.

2. Your site should have your key words in the title.

3. Your index page should have multiple paragraphs of text with your key words interspersed and near the top of the page.

4. Your site should not have your key words too many times on the index page.

5. Your site should not have hidden text.

Of course, trying to match the link configuration of your competitors’ sites and submitting your link to other web sites can be time consuming and difficult. Like anything that is extremely competitive, it is hard work. There are many companies out there that can help you improve search engine ranking (Kirk Peters Multimedia Studio, for one).<.

Kirk Peters is a Pittsburgh based multimedia programmer. He has had more than ten years experience developing multimedia applications for hundreds of local companies. He can be reached at 412-716-6585 or at kirk@kirkpeters.com.

What is Anamorphic Widescreen Video?

More and more video is being shot in a 16×9 aspect ratio. The standard 4×3 that we are all used to is slowly going away. Widescreen video fills the newer widescreen televisions, more closely mimics high definition video, and is similar to the way in which our eyes perceive our surroundings. It also contains a larger canvas on which we can create our visions.

DVD-video was designed specifically to allow for widescreen viewing. If using a standard 4X3 display, widescreen video can then be shown in letterbox (with black at the top and bottom). The same video can be expanded to fill a 16×9 widescreen television. The video used for such DVDs is called anamorphic. Those DVDs that use the anamorphic technique typically specify “anamorphic widescreen”, “enhanced for 16:9”, or “enhanced for widescreen televisions.”

Anamorphic video gets the most resolution it can out of a standard NTSC video signal. It takes the widescreen image and squeezes it horizontally to fit a 4X3 video stream. This way, it preserves the vertical picture resolution for when it is expanded to fit a 16×9 display. When the same DVD is played on a standard display, the player automatically compresses the vertical into the letterbox display..

Making anamorphic video is quite easy. Most newer cameras will have a widescreen option which will record your video in an anamorphic stream. Then you just need to make sure your compressor is set to 16×9 when you go to create the mpeg2 files. Your DVD software will automatically know what the video is and set the DVD appropriately. You can mixe anamorphic and standard video on the same DVD, just not in the same video title set. When displaying the non-anamorphic signal on a 16×9 display, the video will pillar box (show black on either side).

As more and more consumers purchase widescreen televisions, more of the content will need to be produced to fit the newer aspect ratio. Anamorphic video is the medium of choice, until the transition to high definition is complete.

Kirk Peters is a Pittsburgh based multimedia programmer. He has had more than ten years experience developing multimedia applications for hundreds of local companies. He can be reached at 412-716-6585 or at kirk@kirkpeters.com.

The Ins and Outs of Domain Name Registration

I hear the same questions from my clients again and again. What should my domain name be? How do I get a domain name? How do I transfer my domain to your server? I thought I would take some time here to give some information about the world of domain names.

Of course, the first step is to think of a domain name that best applies to you. It should be easy to remember, as simple as possible, and (if you really want to get advanced) contain a keyword about your company. Most commonly, it is “yourcompanyname.com.” If your company name is taken, some companies add a hyphen between words. The hyphen is the only punctuation allowed in the middle of a domain name. Don’t rule out using a clever keyword phrase about your company, especially if it is easy to remember. You can also try variations with the domain ending such as .org or .net, but since so many people are used to .com, using a different ending might give users a harder time finding your site.

The most difficult part of domain name choice is that the name must be unique. Many names are already taken. The easiest way to find out if your choice is unique is to type it into the web browser. If the browser comes back with a “cannot find” error, then mostly likely that is a unique name. There are tools on the web to help as well, such as www.whois.com. I always use www.networksolutions.com/whois. These sites will not only tell you if your name is taken, but who has taken it.

Once you have chosen the name, you have to go to a domain registration site to purchase it. Domains can be purchased for as little as a year and as many as 100 years. Registration companies (or Registrars) usually have a sliding scale making it cheaper per year to pay for more years. This is where things could get confusing. Any server company will register the site for you when you sign up for their serving services, but you might end up paying more for the registration. I have found the cheapest solution is to use www.godaddy.com to register your domain. It will cost you less than $10 per year regardless of how many years you sign up for. You will need the DNS (domain name service) for the server company that you are going to use, so you will need to register the domain, sign up for server service, find out the DNS, then go back to the Registrar and let them know the DNS.

Go Daddy ,as well as any other registrar, will set up an account with a user name and password. The user name and password are very important to know and the main reason people run into trouble when they wish to change their server situation. With the user name and password you can go to Go Daddy at any time and change the server that your domain points to. This is another reason not to let your server company register the name for you unless, like myself, they provide you with the registrar’s name, the login and password. Of course this login and password are usually retrievable if your email address is the administration address for the account. Where I see clients run into trouble is when they let smaller server companies register the domain in the servers’ name with the servers’ own email address as the administrator. If a falling out between the companies, the domain name is held hostage. This usually results in the client having to get a new domain name, which renders print materials obsolete, not to mention search engine rankings.

After the domain name is pointed to the server and you place an index.html in the public folder on your server, you have a website. Now if you only knew of someone who could put that site together for you . . . .

Kirk Peters is a Pittsburgh based multimedia programmer. He has had more than ten years experience developing multimedia applications for hundreds of local companies. He can be reached at 412-716-6585 or at kirk@kirkpeters.com.

Web Optimization: Making Your Content as Small as Possible

So you have designed a top notch website for yourself and are ready to convert to HTML or Flash. The quicker you can deliver your content to your final users the more likely they are to read it. So how do you make sure the content gets to the computer screen as quickly as possible?

For HTML content, the size is all in the images. The images you place on your web page should be one of two types: gifs/pngs or jpgs. Which you choose depends a lot on the number of colors that make up the graphic. If your graphic is less than 256 colors, then you should save it as a gif or png. Both png and gif are loss-less formats that have the ability to limit the color depths. Gifs are limited to 256 colors but png is not. In general, png is smaller as long as you save it as the same color depth. Gifs still hold favor in the web community mainly because of their ability to hold multiple frames that will play as a simple animation.

Jpgs are used when you have a more photographic image that requires millions of colors to reproduce. The compression of a jpg is represented as a percentage from 0 to 100. The more you compress, the smaller your image will get, but the fuzzier it will get as well. Trial and error is needed to maximize your appearance.

Both the graphics types can be optimized using the “save for” web feature of Adobe Photoshop. While using Photoshop, I would recommend you save all of your graphics this way as oppose to using “save as.”

There are other ways to minimize your load time. If your graphic is a dither or an otherwise repeating image, just save one instance of the repeat. In the case of a dither this could be as little as one pixel width. You can make that image the background of a table, table cell, or the whole page. The graphic will then automatically repeat. Whenever possible, use the same graphics on the different pages of your website. The browser will only load the graphic into the cache once, and then redisplay it when the user moves from page to page. Also, you should not use a graphic as a background and then another graphic over top of it. This requires the loading of the portion of the image that is hidden. Instead, you should slice the image into smaller pieces and reassemble them in a table in your html. The slice tool in Photoshop is very handy for this.

When creating Flash graphics you should use vector graphics whenever possible. This includes all text and simple shapes. This is the equivalent of using gif or png for html. More complex graphics are always going to be compressed by flash using a jpg compression scheme. There is an overall setting in the publish settings, or each individual graphic can be set to a different compression rate.

If your flash presentation is extremely complex, you should consider splitting into smaller swfs which load into the main swf only when they are requested for viewing by the final user. You should then share common elements and fonts across the swfs using a shared library.

Flash content that is larger than 500 kb should be programmed with a pre-loading counter of some sort, so that the final user doesn’t question whether their content is still loading or how much longer it will take.

By using some of the basic tips above, you should be on your way to shorter load times and more impressive web content.

Kirk Peters is a Pittsburgh based multimedia programmer. He has had more than ten years experience developing multimedia applications for hundreds of local companies. He can be reached at 412-716-6585 or at kirk@kirkpeters.com.

How to Design DVD Menus Like a Pro: Part 2, Structure

How a DVD menu is put together can be just as important as how it looks. A poorly executed DVD menu can be frustrating to understand and to navigate. This can result in a poor experience for the final user.

Due to the size and resolution of NTSC video, there is a relatively small area with which to work. This means that it is not desirable to try to squeeze too many buttons on one page. If your buttons have text only representations, I would recommend no more than 12 buttons on a page. If your buttons include a thumbnail of the video, much like chapter menus often do, then 6 should be your maximum. If you have more chapter selections than this, consider splitting the choices between multiple pages with “next” and “previous” buttons. Be sure not to make your text too small, as it will be hard to read.

Next, you have to program the directional controls. Most programs offer an automatic directional programming by trying to figure out the closest button in any given direction. I do not recommend this approach as sometimes the closest button is not the best choice. It is easier for a user to navigate if you minimize the need to change the direction button they are using on their remote. This means that if your menu choices are displayed from top bottom make sure that by continually hitting the down button on the remote that your user visits each choice, even though one of the choices may be slightly to the left or right. This way the user does not have to move their finger to another button on the remote and try to follow a navigation maze to their choice. The bottom choice should then jump back to the top when the down button is selected again. In this manner the final user really only needs one button to go to any choice they desire. This should also apply if, in general, your menu choices have a right to left flow.

Chapter selection menus, as well as any other menu that has a numerical order, should be navigated in that order. This means that no matter how you have the menu buttons arranged on the page, when you navigate right, or down, from chapter one it should go to chapter two. If your chapters are arranged in a grid, navigating right from the end of a row should send you to the first choice in the next row. Sometimes this is not directionally logical, but it make your menu much easier to navigate.

Now, lets discuss auto-action buttons. These can add to your menu that brings it up to the next level of functionality. Suppose you are navigating right to left through your chapter selections and you reach the last selection on your page. The next chapter selection is the first button on the next menu. You can take the right navigation from the last selection on the previous page and link it to a hidden auto-action button that takes the user to the next menu page and the next chapter selection button. This way the user only needs one button to navigate down the entire list of chapter selections.

Finally, here is a little known fact about how menus are put together. There are actually two ways to make a menu work. The first and most common is with a sub-picture. A sub-picture allows for certain areas of your menu to be highlighted with up to three colors. This can result in certain areas to be lit up or change color, or you can make a very simple bitmap image appear next to the menu choice. However, there is a second way that menus can work. You will find this way in use on the Lord of the Rings DVDs or the Loony Tune Gold collection of DVDs. Both these titles utilize many hidden auto-action buttons. Each selection actually takes you to another menu entirely. In this way you can make almost any change happen when navigating through your choices. Whole pictures can change or you can make a very complex image move next to the menu choice. The main reason that I rarely recommend using this second approach is that the menus are incredibly slow. Moving down a list of chapter sections can border on tedious. Menus designed like this can look very flashy, but at what price?

By keeping these few things in mind, you should be able to create a user friendly menu and look like a pro while doing it.

Kirk Peters is a Pittsburgh based multimedia programmer. He has had more than ten years experience developing multimedia applications for hundreds of local companies. He can be reached at 412-716-6585 or at kirk@kirkpeters.com.

Kirk Peters Multimedia Studio Launches New Website Design

Kirk Peters Web/Multimedia Studio grew so quick over the course of last year that the simple web concept I had come up with at the beginning became overwhelmed with all of the additional information continually added to the site.

Hopefully the new site is easier to navigate and finding the information you need to make an informed choice is simpler. Here are some of the highlights of my website:

The home page pulls together a more concise listing of all of the services I can provide the multimedia community.

My portfolio adds credibility to my services by showing you some of the many project I have been a part of over the years.

In the articles section I try to share some of my knowledge and experience with my clients and colleagues.

I have had dealing with literally hundreds of companies over the years and in the links section I try to share the companies with which I have had the most positive experiences.

If you are are just starting with Action Script, the tutorials area can give you some basic examples to get your started.

Finally, I have some examples of my flash work. One is a rehash of my portfolio and the other is a more in depth look at my bio and experience.

Thanks,
Kirk Peters
Kirk Peters Web Multimedia Studio

HostExchange