Web Design Blog

Our jobs are extraordinarily multidisciplinary – we work at a place where interactive media, technology, graphic design, writing, smart business, and social psychology meet and fuse to create a beautiful product. Come read about the latest, all right here.

 

How To Get in Google’s Top 5: Planning Article/Blog Content

Posted by on 12:53 am in Web Design Blog | 0 comments

Hundreds of thousands – probably millions – of dollars per year are spent on optimizing websites for search engines, in an effort to get more people to come and spend their time and money on a website.

But right here, in this blog post, I’m going to share the most important secret of increasing your readership. You don’t even need to know what HTML stands for.

Are you ready?

Are you seated?

Okay. Prepare yourself.

The most effective and important method to increasing your online business is to regularly write content that your customers want to read.

Obvious, right? But it’s such an important and overlooked concept, I’m going to say it again.

Write content that your customers want to read.

Interacting with people online is like interacting with people in the real world. In order to understand others, you have to imagine yourself in their shoes. So, let’s take that same empathetic approach to planning our content. Let’s ask ourselves: what would I want to read about, if I was one of my customers?

Let’s think through an example.

Let’s say that you own a coffee shop, and are planning a shiny new website for your business. What would visitors to a coffee shop website want to read about? What would inspire them to want to read more?

Let’s consider those questions.

When I was a boy, my father taught me two things about good communication: talk about what you have in common, and stick with what you know. Our first step should be to figure out our “common ground”, that is, the topic that is most important to both the authors and the audience.

People come to new websites for one of three reasons.

  1. For information.
  2. To connect with others socially.
  3. To buy a product.

 

Every bit of content we post should satisfy one of these three desires. Any other content is irrelevant to a reader, and will slow them in getting to what they want.

The only way to get people to come to your website is to make them want to do it. This simple idea is too important to overlook. Your content should reflect what visitors want to hear about. If you want to talk about yourself and your desires, a personal blog or private journal is the perfect place for that. When you want to get other people interested, you have to write about what they want.

Now, say I was the coffee shop-owner we spoke about earlier. Let’s revisit our approach to creating website content, but with these ideas in mind.

I would start by providing information about my products or services. This is the most obvious step. I would provide ways to find my coffee shop, and maybe place orders or buy beans online.

The second step would be to provide useful information to my readers. Some of my visitors will be looking for information specifically about the business; and I can currently accommodate them.

But what about other visitors? I’m trying to expand my business, and that means reaching new audiences!

The obvious topic: coffee.

But, you protest, the internet surely has enough informational sites about coffee! Why would a visitor come to our small coffee shop website in such a competitive environment?

Smart comment! You learn quickly! A user looking for generic information about coffee would never find our website; and is probably too far away to be interested in paying a visit to our coffee shop anyway.

So, let’s brainstorm: what else can we write about?

Well, here’s an idea. Coffee shops have a certain reputation for being a meeting place for a community or section thereof. Frequently they have community boards for information about local businesses and events; and sometimes they even host events themselves.

There’s a good idea! Nobody else is likely to have that kind of information. Our coffee shop website could serve as the same kind of source of information that our coffee shop is in real life!

Suddenly, when we start writing about local events and news, encouraging community members to get involved on the website by posting comments and suggesting updates, we get the whole community involved. People will share links to our website for information about local events.

Over time, our website becomes the go-to for finding information about local community events, just like our brick-and-mortar coffee shop always was. All the visitors to our website know our name, are contributing and writing recommendations, enjoying our delicious coffee and spreading our good reputation to everyone in the area with an internet connection. Our business grows and soon our coffee shop has a reputation for excellence and as much business as it can handle.

This basic approach to creating content comes back to one of Epic Websites’ core philosophies on creating websites. The internet is a tool used by people to connect and share information with other people. We always think about our websites with the people that use them as our primary concern. We apply the same thought process described in this article to every website that we author content for.

The whole idea of the world wide web – the whole idea of creating a website in the first place – is to bring people with a common interest together. The SEO “magic bullet”, the trick that others pay hundreds of thousands of dollars a year for, the secret method to get people interested in you and your business, is to be interesting.

Heard about SEO? We suggest a change in perspective.

Introducing PHO, short for People-Helping Optimization. It’s a little thing we do at Epic Websites to optimize websites to help them help people. It uses all proprietary software, involving a very complex algorithm (which we call Empathy) running on the most sophisticated computer available to date: the human mind. Patent pending.

Thanks for reading! Remember: put yourself in your audience’s shoes, and be interesting!

Special Offer – Free Hosting!

Posted by on 6:22 am in Web Design Blog | 0 comments

That’s right, I said it. Free hosting! For a limited time, our clients are eligible for three months of free hosting when they refer us another client. If we make a sale, the next three month period of our premium high-speed hosting service is totally free – a $60 value.

Just let us know when you refer a client and we’ll add three months of free service to an existing subscription; or set you up with a new hosting account, totally free of charge.

More HTML5 Demos

Posted by on 11:05 am in Web Design Blog | 0 comments

I found some really impressive demos of the new HTML5 features in Chrome browser, featuring audio synchronization.

 

 

Make sure you’re on the latest version of Chrome before you test these.

This one shows how you can feed Audio straight into a visualization. Before this you needed to preprocess the audio and then load it with JS, now you can analyze the input directly.

(https://html5-demos NULL.appspot NULL.com/static/webaudio/createMediaSourceElement NULL.html)

 

This one is an impressive 3d visualization using Three.js among other frameworks.

(http://litewerx NULL.dk/anaemia/demo/demo NULL.html?s=max)

 

How to Embed a YouTube Video in WordPress

Posted by on 8:50 pm in Web Design Blog | 0 comments

Hey there! Today I am going to show you how to embed a video from YouTube into WordPress. It’s easy!

 

Embed YouTube in WordPress

 

I have this silly little video from my recent trip to California in January that I’ll use as an example. I’ve uploaded the video to YouTube.

Step 1. Copy the URL

The first step is to find your video on YouTube. You’ll want to Copy the URL of the video from the address bar of the browser window.

 

Step 2. Paste the URL into a WordPress Page or Post

Make a new line in your WordPress page or post by clicking Enter in the Visual Editor, and then right-click to Paste your video URL into the box.

 

Step 3. Click Update.

That’s it! Click update and you should see your video appear on the page like so:

(If you have any trouble, make sure that the URL has the prefix http:// and NOT https://)

Learn More about How to Embed a Video In WordPress

Learn more: Embed YouTube videos in WordPress (http://en NULL.support NULL.wordpress NULL.com/videos/youtube/)

Unreal Engine in Flash Demo

Posted by on 7:09 pm in Web Design Blog | 0 comments

Check out this sweet demo of an unreal engine environment built in Flash taking advantage of the new hardware acceleration! I am extremely impressed.

 

These screenies were taken on my three-year old midrange laptop. Yes, this is running in a browser window. I am amazed.

 

 

Try it out yourself: Unreal in Flash (http://www NULL.unrealengine NULL.com/flash/)

To The Rescue!

Posted by on 1:21 am in Web Design Blog | 0 comments

Sometimes things go wrong on websites. Down the line, you might click a button or delete a file and the whole website comes crashing down. It doesn’t mean that everything is lost, though. All of Epic Websites’ clients have a web expert on-call to fix any sort of errors or problems from the trivial to the critical. And, as if that weren’t enough, our websites periodically save complete backups to ensure that no data is lost.

Are you having a problem with your website? Is it not loading or displaying correctly?

Epic Websites will repair the error – and we can also set up measures to dramatically reduce the risk of loss of data on your website for the future.

How to Fix WordPress White Screens and Broken wp-admin Admin Panel

Posted by on 11:42 am in Web Design Blog | 0 comments

Sometimes the unexpected can happen to software. This is especially true when you’re doing an update of a platform like WordPress, that has lots of modules and add-ons that could break if they aren’t compatible with the latest version. Safest practice dictates that you shouldn’t use plugins or themes that aren’t compatible with your version of WordPress, and that, when doing an update, you should always remember to update your add-ons BEFORE updating WordPress.

However, it is inevitable that if you work with WordPress, or any piece of software, for long enough, something eventually will break, and the solution to the problem won’t always be obvious.

Problems with WordPress are Often Caused By Software Updates

Nine times out of ten, if something terrible happens and WordPress ceases to function entirely, it happens because of a software update. Usually, it’s because a plugin or theme is incompatible with the current version of the WordPress platform. The way that WordPress itself functions changes from update to update, so software written for the platform must be continually updated to change with the tide.

Which brings me to the topic of discussion:

Fatal WordPress Errors, or WSOD (White Screen of Death)

If you have a fatal error, you will usually be presented with a White Screen of Death. Sometimes, a White Screen of Death is a blank document with no text. Sometimes, it has a line or several lines or a screen full of lines  describing the kinds of errors that are happening. Most likely, you won’t be able to log in to your wp-admin WordPress administration panel either.

You’re stuck, right? You’ve broken your website irrevocably with no hope of repair.

Wrong.

A good website developer can identify and get you your site back in an hour or less. Here’s how you can do it yourself:

Steps to Solving a Fatal WordPress Error – Repairing a Database after Bad Update

Disclaimer: Incorrectly following the steps in this article could damage your website, WordPress installation, or any of the other websites that might be hosted on the same account. I take no liability for any damage you might inflict upon your or anyone else’s property. If you are in doubt about your technical ability, hire a professional. (http://www NULL.epicwebsites NULL.com/contact-me)

Solving a White Screen of Death fatal WordPress error takes some sly behind-the-scenes technical work, but once you master the basic skills, will give you power over Death. Or at least over all white screens thereof.

Research the Error

If you have lines of text on your screen (which you really shouldn’t, but we’ll save that for another day), you already have a hint at which plugin or theme might be causing the error. Google the error code, along with your WordPress version (if you know it). Try and remember which active plugins and theme you have installed so you can filter out irrelevant results.

Set your theme back to default manually

Okay, this step is going to take some work. If you’re with a good hosting provider, they will provide you with a cPanel Control Panel that helps you administer your site. Try http://cpanel.your-domain.com/, or http://your-domain.com/cpanel. Your username and log in information should have been provided by your hosting provider – hopefully you saved the email!

Once you’re in to the cPanel, scroll down until you find the icon for “phpMyAdmin”. There, click that little icon. Should look a bit like this:

(http://www NULL.epicwebsites NULL.com/wp-content/uploads/2012/03/phpMyAdmin NULL.jpg)

If you don’t have a good hosting provider, you should get one. You can email me (epicwebsites null@null gmail NULL.com) about hosting with me or about where you should look for a quality web host.

Depending on your hosting provider, the steps you might have to take to get to your phpMyAdmin might be different. Some (GoDaddy) can be a real headache, especially if they don’t have a default administrator account for all hosting services (GoDaddy) or use a password policy that changes depending on what area of the hosting account services you are trying to access (GoDaddy).

  1. Once you’re at the phpMyAdmin screen, you want to navigate to the database associated with your WordPress website. They will be listed on the left-hand sidebar.
  2. Next, in that same bar, select wp_options. “wp_options” is the database table where all the options and settings for your specific WordPress configuration are stored.
  3. On the navigation bar across the top of the phpMyAdmin screen, select “Search”
  4. On this page, there will be a bunch of different things that you can search by. In the text box next to “option_name”, type exactly: “template”, minus the quotation marks. No need to worry about the other settings at this stage.
  5. Click “Go” at the bottom of the screen.
  6. There should be only one search result. Next to that one result, click the “Edit” button.
  7. In the big text box that has the name of your theme, cut the text in the box and type exactly: “default”, only without the quotation marks.
  8. Click “Go” at the bottom of the screen.
  9. Test your website to see if that repaired the problem.

Deactivate all of your Plugins manually.

  1. Repeat steps 1 thru 4 above.
  2. Instead of searching for “template”, we’re going to be searching for “active_plugins”. Remember to type exactly and omit the quotes.
  3. Instead of changing the text in “option_value” to “default”, we’re going to delete the list of active plugins entirely. Make sure to copy that code down somewhere so you can repair the database easily if this diagnostic doesn’t reveal the problem.
  4. Check your WordPress website again to see if these changes fixed anything. If not, try and remember to set things back the way they were. This will help a professional diagnose the problem if it ends up that you can’t fix it yourself.

Can’t figure it out? Hire a WordPress professional. Contact me (http://www NULL.epicwebsites NULL.com/contact-me) and I’ll fix the problem with no hassle.

Download HD video from Youtube safely

Posted by on 7:35 am in Web Design Blog | 0 comments

Some of the sites where you can download videos from Youtube aren’t safe to use, they install viruses or malware onto your computer. Here’s a really easy and convenient way to download video from YouTube safely and easily; assuming you have the firefox web browser.

Not strictly related to web design, but important tool to have nonetheless. I was downloading Creative Commons video for a WordPress theme I’m going to release soon and needed to have this ability.

How to Download HD Video from YouTube with Firefox

  1. Install the GreaseMonkey extension for FireFox.  (https://addons NULL.mozilla NULL.org/en-US/firefox/addon/greasemonkey/)
  2. Install the UserScripts YouTube Video Downloader for GreaseMonkey (https://www NULL.userscripts NULL.org/scripts/show/62634)

Once that’s active, there will be a “Download” button next to the “Share” button on all Youtube videos that allows you to easily save multiple versions of the video file to your computer.

Maryland Web Design | Silver Spring, Bethesda, Montgomery County

Posted by on 7:34 am in Web Design Blog | 0 comments

Did you know? Epic Websites is from Maryland!

Most of Epic Websites clients are small businesses and interests local to Silver Spring, Maryland. We’ve worked with lots of small businesses in the area, and we focus on developing long-standing relationships with clients, continuing to offer them technical support and advice long after our contract has been terminated.

We’re the best web design company in Montgomery County, Maryland!

Epic Websites was founded in 2008 by Alex Stek, who was born in Holy Cross Hospital in Silver Spring and has lived, studied and worked in Maryland for all of his life. He has an intimate understanding of the local economy, target audiences for different sorts of businesses, local culture, and more. If you’re looking to establish yourself as a local start up or small business, working with a web designer local to Silver Spring or Bethesda who has a long history working with Maryland businesses might have unforeseen local business development and networking benefits.

If you have a small business located in Maryland, Epic Websites are the website designers for you!

Scale and Center HTML5 Video with jQuery

Posted by on 5:00 am in Web Design Blog | 2 comments

A few months ago, I posted code to show how to scale a video to fill the browser window – how to do a Full Bleed fill for video or html elements. One of my readers contacted me with a question – how do I center this video on the screen? Turns out, I had the same problem.

How to do a Full-Bleed fill with Video or Images using jQuery

The code I’m going to link to is the updated code – just give any element the class “.fill” and it will automagically scale that item to fit its container. IMPORTANT NOTE, however. You must specify the starting height and width of the element in the HTML. Here’s an example with an image:

 

<img src="path/to/image.png" alt="" width="800" height="600" class="fill" />

 

Here’s that same one with video:

<video width="1280" height="720" autoplay loop class="fill" muted="muted">
<source src="path/to/mp4video.mp4" type="video/mp4" />
<source src="path/to/webmvideo.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

In firefox, the video will start playing with sound even with the muted tag set. It’s a bug caused by firefox not supporting that particular HTML5 property. Here’s how to turn off sound. Add this code after the above.

<script language="javascript" type="text/javascript">
$("video").prop('muted', true);
</script>

Here’s where the magic happens, with a quick modification of the code on the other post.


var sxsw = {

full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {

// Calculate new height and width…
var initW = imgWidth;
var initH = imgHeight;
var ratio = initH / initW;

imgWidth = boxWidth;
imgHeight = boxWidth * ratio;

// If the video is not the right height, then make it so…

if(imgHeight < boxHeight){
imgHeight = boxHeight;
imgWidth = imgHeight / ratio;
}

//  Return new size for video
return {
width: imgWidth,
height: imgHeight
};

},

};

jQuery(document).ready(function($) {

/*
* Full bleed background
*/

function recalculateFills() {

//get pixel size of browser window.
var browserHeight = Math.round($(window).height());
var browserWidth = Math.round($(window).width());

//jquery all items on page with fill tag
var fills = $(‘.fill’);

//for each fill, recalculate size and position and apply using jQuery
fills.each(function () {

//height of element. not neccessarily video
var videoHeight = $(this).height();
var videoWidth = $(this).width();

//calculate new size
var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

//distance from top and left is half of the difference between the browser width and the size of the element
$(this)
.width(new_size.width)
.height(new_size.height)
.css(“margin-left”, ((browserWidth – new_size.width)/2))
.css(“margin-top”, ((browserHeight – new_size.height)/2));

});
}

recalculateFills();

//we also have to recalculate if the window rectangle changes.
$(window).resize(function() {
recalculateFills();

});

})

Example of scaling code in use on an image (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2012/03/fill_sample NULL.html)

Download the code example (http://www NULL.epicwebsites NULL.com/wp-content/uploads/2012/03/fill_example_code NULL.zip)