360ideas
316-269-6920
Get a Quote

The Ever-Evolving Website

Tuesday, October 2 2012 10:56 AM
By Kalen Kubik

We talk to a lot of people who have latched on to new buzzwords or industry trends. Of course, we are delighted they are listening to what's going on in the world and asking questions. After all motivation and a desire to do new things is key to success on the web. However, sometimes these words and ideas get misused or are outdated. So, I've compiled a list of current things most clients will need to utilize their website across the board.

Responsive Web Design / Mobile Detect

I've lumped these together because many sites I visit seem to not use mobile detects. Now a responsive website uses Media Queries in its CSS to alter styles based on screen widths. So if my screen is 1200 pixels wide (which is almost the norm these days) then you'll need to account for those on a 1024 pixel iPad as well. Hence, adding a breakpoints with media queries. With the growing number of screen sizes it would be irresponsible to not have a scalable website.

Ex. As soon as the screen width hits 620px, class X float is negated by a restatement in the media query and it drops to its own line.

Mobile detects are amazing. That's how I'm going to start that off. It gives you the ability to mark up your code in such a way that you can  give a  strictly mobile view to a device. If the site is browsed on a phone the mobile-detect in the header will switch over to a mobile style sheet. This allows you to use the current pages you have by including or removing info with if/else tags.

SEO/ SEM

SEO is another buzzword that tends to get used synonymously with SEM. So, to clear it up.

Search Engine Optimization is organic growth of your website through various items. This is done by catering to Google's algorithm. This algorithm essentially calculates your sites popularity with the given keyword placed into Google. Think of your website as a freshman in highschool, just starting out. Now, your website wants to be popular, even loved by everyone, so they need to make friends with the popular kids. Let's make a quick list of necessities.

  • Content - by far the most important aspect of your site. If it has nothing to say, why would we care to go there? and not just lots of content, ORIGINAL content. No copy/pasting from other sites, that's a fast track to the blacklist on Google where your site becomes unsearchable in results.
  • Page Titles and Meta descriptions. These are what people will be reading in the search results so have specific ones for each page so the Google results pull up for it.
  • Make your URL using simple directory structure.
  • Never have the same content on multiple URL's
  • Use simple navigation with helpful 404/403 pages
  • Submit site to Google using Webmaster Tools
  • Install Google Analytics for tracking
  • Use image alt tags with keyworded image names. Keep close to 4:3 ratio for better Google images placement.
  • Page Speed is important. Slow pages or timeouts hurt your ranking so keep your weight low to improve user experience.
  • AJAX pages require special treatment.
  • Google owned communities such as Google+ and YouTube activity help your rankings, so stay active and interact with your clients and threads.
  • Linking to other sites is helpful but having relevant sites link to you is even better.
  • Generate content worth discussing and frequently.
  • Google constantly changes so be on the lookout for new updates.

Search Engine Marketing is a way of marketing your website through advertisements. One pays for high placement. (on google you'll look to your right, that column, all adword campaigns which is SEM.) SEM is not really necessary for a site right away so I will not discuss it at this time.

HTML5

Adobe Flash dominated site headers for the longest time, however, now you need to be converting your flash header to HTML5. Google Swiffy has a plugin that allows you to do just that. It's pretty good too. HTML5 is compatible on all devices where as flash is not. There's no point to keeping the ancient tech on your site if half your viewers can't see it. Most of them skip it anyway.

Social Media / Open Graph Tags 

Facebook, Twitter even Pinterest need to be included on your website. The more links from popular sites: the better your SEO. Now, that being said, you must upkeep them. At least weekly posts if not daily. You have to give people an incentive for following you; whether it be just a good laugh, a coupon, or a free desert.

Now, there are better resources out there to teach you all about your social media marketing and how to really "blow up" in your local community. I'm not saying they are all right, but be smart and if it sounds like a cool idea, try it out.

Now, since you have a social media account, you're going to need to "share" your website updates, links, pages, etc. This is where Open Graph Tags come in. Open graph tags communicate, not only with Google, but with posts. Generally you need a couple fields "og:title, description, type, url, image, site_name, and author. Author states who built the website, so, give credit where it's due. The rest of these are important for sharing your info on facebook. When someone copies your URL from the search bar and posts it on facebook. A lovely little box will frame itself up such as this.

The Image, URL, Title, and Description are all pulled in from the OG tags in your site's header file.

Also, you'll want to include an Apple-Touch-Icon.png (144x144). This will be the bookmark for anyone using an iPad or iPhone who bookmarks your website. Also, throw in a favicon as well, it's the little image up by your URL in most browsers. It's pretty standard these days so don't let your site look dated without one.

@2x/ SVGs

This is a pretty recent development, so even if your site is a couple months old you may want to pay someone to go back and add these. With the new hi-resolution computers and tablets coming out of apple you may see your current site images on these look blurry. Not to fret, there is a solution. A javascript can be added to the site that will note if the device reading the code is a hi-res device. If so, the script will look for any referenced images with the name @2x after them.

Ex. header.png (200 x 400) is used for regular devices. header@2x.png (400 x 800) is pulled down by the script if looked at by a hi-res monitor.

Your @2x images are your images doubled in size so make sure the script is used so you're not sucking up someone's data plan by making a hack around. One way around this is by using Scalable Vector Graphics. Vectors are equations that never lose sharpness and scale to the exact size needed, making them perfect for getting around "resolutionary".

Browser Compatibility

 

It astounds me that people still use Internet Explorer. I'm not surprised when I see my grandmother using her IE6 but various business owners as well. Update your browser to the newest Google Chrome or Mozilla Firefox and your web experience will be a whole lot better. I promise.

That being said here we build websites that work all the way down to IE8 generally that takes some conditional comments, but it's necessary. Your website should be coded to look great on IE8, IE9, IE10, Chrome, Firefox and Safari. Also, for mobile, Android browsers and Mac Browser, you can mess with the HTC if you'd like as well, more IE fun.

 

To Summarize, your 2012 website should have these things, MINIMUM.

 

  • Scalable, Responsive Design for multiple monitor widths.
  • Be mobile and touchscreen friendly for both Tablets and Phones.
  • Be up on the latest SEO keys.
  • HTML 5 - - NO FLASH
  • Links to your social media.
  • OG Tags for sharing your site.
  • @2x Images or SVG's for Hi-Res monitors.
  • Compatible on the 2 default browsers and the 2 cutting edge browsers.
  • Have great content

 

This last one is something we didn't go into, but I feel is a huge deal for large and small business. It seems people undervalue webdesign so they seek out a college student or friend of a friend to build them an out of date, poorly designed site. Or, the opposite. They seek out a large firm who has built a very nice site and will overcharge because they can. Whatever is right for you and your company, make sure your site reflects not only more than the value you paid for it, but also your company. People will leave your site if it's hard to use or poorly designed (even more so on mobile devices). At the same time, a great site should not break the bank.

The best thing you can do is look at other websites and speak with your newly hired web designer and developer and bounce ideas around. They'll know the current standards and maybe a new alternative or workaround that may suite you better. Be sure you can speak with the developer and designer. One of the worst things you can do is hire a reseller firm that will shop out the project to a freelancer or other firm, then reprice it to sell back to you. Be smart and stay current.

 

By Kalen Kubik

Share the love

Submit Your Comment