Category Archives: Web Development Blog

Search Engine Optimization & Search Engine Marketing

 

Back in the day, SEO was a far simpler proposition. A website owner could put some ‘keywords’ into their website content and maybe write an article or two once in awhile and throw that out onto the internet. You could actually see the result very quickly and celebrate success. You could easily measure this bottom line and take it to the bank. Today is a totally different matter. It’s very sophisticated and ever changing. You could learn it! The Internet is full of online schools, YouTube has free video tutorials, and many articles are posted online for free. Question is, do you have the time or inclination to go and teach yourself how to do this? Aren’t you far too busy doing your own job? Add that to the fact that ‘experts’ are not hatched over night – they grow in experience… they’ve spent time ‘treading the boards’ and they accumulate knowledge. If they do this job full time, they will be staying in touch with what’s happening now, they will not continue to ‘ride’ what worked yesterday.

Q&A

Q: Why should I hire someone to help me with my search engine optimization?

A: Because if you hire someone who actually knows what they are doing, you’ll be investing in the most cost effective way to sell your products and services.

Q: What exactly is ‘SEO’?

A: Search Engine Optimization is a methodical process of getting your website to appear more frequently and higher up on the pages of major search engines such as Google. This means that more visitors visit your website and since they are arriving to your site having been screen for relevance, then SEO essentially translates into more sales…or ‘good conversion rate’ as it’s called. Visitors don’t just ‘hit’ your site, they stay awhile they ‘stick’ on the website and shop. You sell plus they buy equals happy customer, happy company!

Q: How does someone know exactly what to do in order to attract the right visitor who will be more likely to purchase from the site?

A: A good strategist, a webmaster who is informed, makes it his or her business to know how each search engine works, that is, what content is it likely to see on a site & what terms does it respond to when it sets out to look for any given website.

There are so many ways to optimize ‘searching’ a website; the SEO developer can target different kinds of searches such as an:

Image Search
Local Search
Video search
Academic Search
News Search
Q: What are some of the ways n’ means an SEO Expert applies to a website in order to ‘pull’ traffic to it that’s relevant and can be converted into an actual sale?

A: An internet marketing strategist first runs a thorough site analysis. He or she ascertains what, if anything, is obstructing the search engines activities that, when unencumbered, can more easily pull traffic to the site. Some of these obstructions are the following:

How is the website coded? Is it up to speed, as in the current HTML5 Google preferences? A website is in essence – cyber architecture. There are ways into the site and exits just as there are ways to go in and out of a house.

Are there keywords that need removing or adding to enhance the websites indexing activities.

Is there video production content on the site and is that video encoded so that the search engines can locate and index it?

Does the website development have back-links to assist it in being indexed?

The technician can also detect an unfavorable ‘Crawler ‘, that if left unmanaged can hinder the websites development on the internet. They can submit and place code to tell the ‘bot’ to not crawl the site.

Q: How does the Webmaster determine whether you should buy online advertising?

A: There are many types of analytics that help determine what type of advertising, if any, needs to be included into the SEO & SEM activities. Pulling this information together is like a harvesting process, then you must site and sift thru what’s working and what’s not working.

Google states that there are more than 200 indicators they employ when searching for and indexing websites. How many do we know, is a good question!? Lol If we build websites and launch them to sell our products and services, then wouldn’t it make sense to put a bit of effort into getting the website found?

It’s shouldn’t surprise anyone to learn that the very way in which the site is built can help or hinder it’s performance. The website development, what code was used, what content is on the site, how it’s initially registered in the search engines determines a lot about how it’s indexed. Think ‘filing cabinet’ here…search engines are methodical devices that only understand pure logic. They do not go into the file folder that says “J” and look for “S”.

There is a way to build, maintain, and manage a website that can reduce your sleepless nights and move more of your product.

The main obstacle towards hiring an SEO Website Developer is a very understandable one; it’s a reatively new industry and knowing when and who to hire is often a major stumbling block. To the novice, until you see your sales increased, you haven’t a lot to go on except the monthly statistical reports regarding the websites activities.

Besides, if you are a small business owner, you built your business a brick and a board at a time… sweat and sacrifice a plenty! So, if you’re a typical small business owner, you’ll not part easily with your money. You may even be tempted to stick with the tried, tested and true local press, media and yellow pages! Not a good idea. Not today. Today, you need to be online, with a strategy and at the very least video content on your website.

Do yourself a favor: Do it right from the start. Get the website built/ constructed correctly, hire some help to draw up a strategy / a plan and work the plan.

One way to understand SEO & SEM and how they actually works is to visualize the inner parts of an antique watch. Every wheel or gear is connected to another one…and sometimes one gear can move six other wheels and gears. If one of those gears or wheels is ‘hung-up’, not turning at all, then everything that follows on is also stagnant. Could you imagine anything more futile than winding up a clock, by using it’s stem, winding and winding…when the clock has no hands to turn on the face of it? How would you ever know what time it is. This is exactly what happens when you hire a so called website developer who cannot prove to you that they have generated sales for their clients.

An SEO Web Developer is worth their weight in gold if you find an honest and committed one. Ask and get referrals; if they are good, their clients will be able to show you results from their efforts. Don’t settle for someone who just exercised their bragging rights. Search until you have one who has proved their worth by making their clients money.

Pay attention to the results the SEO Website Developer puts in front of you. Let them measure continuously….harvest the websites data, trim what needs trimming, add what needs adding and don’t pinch pennies if they suggest to you that you need to modify certain features in your website. The environment that we call the ‘internet’ is dynamic…it changes all the time and some of these changes are crucial and need to be applied to your website.

Let your webmaster cultivate the website within the arena you want it to grow in.

Then you can count your money! Play another round of golf, get to the kids baseball game on time and still be able to take your spouse out to dinner and get up late the next morning!

Do this:

Hire the same quality of expert as you are, hire someone who works as hard as you do to stay ahead of the game… hire them and then take their advice, and let them do their job.

New Smyrna Beach Middle School Jazz Band – Lakeside Jazz Festival

 

Being a proud parent, I can’t help but use my resources as a web developer and SEO specialist to show off the talent of my 2 boys. Charles (CG), 14, and Jacob, 12, are both very talented musicians. Today their Jazz band, New Smyrna Beach Middle School Jazz Band, performed at the Lakeside Jazz Festival in Port Orange. Both boys played a solos. Jacob’s solo on the clarinet begins about 2:04 into the performance. CG’s solo on the trumpet immediately follows. Hit the play button above. Excuse the poor audio, it was a bit windy. And cold… What’s up with this April cold snap in Florida in anyway?

Both boys have been playing musical instruments since the 3rd grade. We were very blessed to have the boys attend the only elementary school in Volusia County (Spruce Creek Elementary) with a performing band. A big thank you to Mr. Ed Clowers, their elementary school band director. As both boys started playing, the improvement in their academics was obvious. Here are some startling statistics;

  • Students taking courses in music performance and music appreciation scored higher in the SAT than students with no arts participation.
  • Music performance students scored 53 points higher on the verbal and 39 points higher on the math.
  • Music appreciation students scored 61 points higher on the verbal and 42 points higher on the math.
  • According to the National Education Longitudinal Study of 1988, music students received more academic honors and awards than non-music students.
  • A higher percentage of music participants received As, As/Bs, and Bs than non-music participants.
  • Lewis Thomas, physician and biologist, found that music majors comprise the highest percentage of accepted medical students at 66%
  • The arts are one of the six subject areas in which the College Board recognizes as essential in order to thrive in college.
  • Researchers in Leipzig discovered through the use of brain scans that musicians had larger planum temporale, the region of the brain associated with reading skills. Also, musicians had a thicker corpus callosum, the nerve fibers that connect the two halves of the brain.

If you have school age children, I strongly recommend you get them involved in music. You won’t be sorry!

Attacks On WordPress Websites – Is It A Hoax?

Wordpress Website Under Attack

Matt Mullenweg (WordPress founder) recently posted in his blog “Right now there’s a botnet going around all of the WordPresses it can find trying to login with the “admin” username and a bunch of common passwords, and it has turned into a news story (especially from companies that sell “solutions” to the problem)…”

Here’s what we know. We currently lease a large, high speed server for the 53 WordPress websites we manage for our clients. On Thursday April 11, around 12 noon we noticed the server response time was slightly slower than usual. When we checked our server load we found it to be significantly higher than normal. Upon further investigation we noticed a large number of hits to the file wp-login.php on nearly every website on the server. We immediately called our server farm. We were informed this was occurring on every server in the farm with WordPress installations. Needless to say we dropped everything to ensure all of our wordpress installations were secure.

While there have been many reports about these attacks floating around the internet, it wasn’t until today we received verification from credible sources as to the nature of these attacks. Around 6:00am ET today, BBC News released a report stating “WordPress has been attacked by a botnet of ‘tens of thousands’ of individual computers since last week, according to server hosters Cloudflare and Hostgator.” This evening, NBC news released its report stating “WordPress, a popular blogging platform used by individuals as well as big businesses including UPS and eBay, is the target of a widespread botnet attack.” NBC news continues by saying “The vulnerability that allows hackers to get into WordPress accounts and take them over for other purposes: user accounts where the word “admin” is the username. The advice for immediate action: Change admin to a different — and much stronger — username immediately.” Unfortunately, while this is great advise it will not completely protect your WordPress installation from this attack.

The clincher is the alert we just received from The Department of Homeland Security’s Computer Emergency Readiness Team (US-CERT). In their alert, The Department of Homeland Security stated “US-CERT is aware of an ongoing campaign targeting the content management software WordPress, a free and open source blogging tool and web publishing platform based on PHP and MySQL. All hosting providers offering WordPress for web content management are potentially targets. Hackers reportedly are utilizing over 90,000 servers to compromise websites’ administrator panels by exploiting hosts with “admin” as account name, and weak passwords which are being resolved through brute force attack methods.” They go on to say “CloudFlare, a web performance and security startup, has to block 60 million requests against its WordPress customers within one hour elapse time. The online requests reprise the WordPress scenario targeting administrative accounts from a botnet supported by more than 90,000 separate IP addresses. A CloudFlare spokesman asserted that if hackers successfully control WordPress servers, potential damage and service disruption could exceed common distributed denial of service (DDoS) attack defenses. As a mitigating strategy, HostGator, a web hosting company used for WordPress, has recommended users log into their WordPress accounts and change them to more secure passwords.”

While we have much respect for Matt Mullenweg, his attempt to downplay this attack is both foolish and dangerous. This attack is real and widespread. If you have a website powered by WordPress, you need to take steps to secure your installation now! Here is the minimum you should do to secure you website:

  1. Make sure your WordPress installation and all of your installed plugins are updated.
  2. Make sure your administrator’s password is secure. We recommend at least a twelve character password with at least one lower case letter, at least one capital letter, and at least one number.
  3. If you have a user account with the username “admin”, create a new administrator account with a different username and remove the old “admin” account.
  4. Install the security plugin WP Better Security. Activate the plugin. Go to the settings page and set up the plugin with the “basic” settings.

Completing the above steps will protect your website from being hacked, however do to the large number of ip address used by the hackers, you will still be vulnerable to hacking attempts. As we stated in our previous posts, the hacking attempts can put an extremely high load on your server causing your website to load slowly, and possibly crashing the server. The WP Better Security settings need to be tweaked to further protect your website from this threa.  We will post the details of these tweaks in an update tomorrow.

Our reply to Matt, there is a real news story here because the internet is facing a serious threat, and we are not selling a solution. The solution is in the above steps and the FREE plugin WP Better Security. Also, we do not have any association with the developers of the above plugin. We just know it works and want to help protect the internet for everyone.

Worldwide Attack Now Targets Joomla And Drupal Sites

WordPress Joomla Drupal Under Attack

If you manage or own a website on a content management systems (CMS) you know that invalid login attempts are an everyday occurrence. We see literally thousands of invalid login attempts from dozens of different IP addresses in the course of any given day. This is considered normal. However hosting providers worldwide are reporting they are seeing a systematic, well organized attack. The attacks on content management systems are well above average and often times at catastrophic levels.

This attack started on or about April 8th, but the hackers became extremely aggressive overnight on April 12th. They have already shut down 10’s of thousands of servers running WordPress. They have also affected the performance of many other servers. The attack started with WordPress installations, according to Sophos EndUser Protection (a major player in the web security industry), Joomla and Drupal website are now also getting hit.

The attack began with a botnet made up of at least 90,000 hacked home based computers. This is not a “brute force” attack like we see every day. This onslaught is using what is known as a “dictionary” attack. This is where the hacker uses a list of the most likely usernames and possible passwords and tries those in very quick succession. Even when the attack fails, the load the attacks on multiple websites puts on a server can cause it to crash.

The early indications are that hackers are installing malicious scripts in the content management systems that have been compromised. These malicious scripts turns the infected website into an attacker to hack other websites. This is the reason this attack is going viral. According to Matthew Prince, the chief executive of web hosting company CloudFlare, these hackers are causing much more damage because the infected servers have large network connections and are capable of generating significant amounts of traffic for the attackers.

If you have not already done so, we strongly recommend you take the following steps to protect your wordpress installation:

  • Make sure your WordPress installation and all of your installed plugins are updated
  • Make sure your administrator’s password is secure
  • If you have a user account with the username “admin”, create a new administrator account with a different username and remove that old “admin” account
  • Install the security plugin WP Better Security
  • Other ways of securing a WordPress website can be found here; https://codex.WordPress.org/Hardening_WordPress

These additional steps can be taken to further secure WordPress websites:

  • Remove README and license files. This is very important since this exposes version information
  • Prevent reading of the htaccess file
  • Limit access to wp-admin.php and wp-login.php to your IP address
  • Move wp-config.php up one directory and change its permission to 400

We will continue to monitor this attack and we will post updates as more information becomes available.

WordPress Websites Across The Globe Are Being Hacked

Wordpress Under Attack

There is a highly distributed global attack on all websites using WordPress at every known web hosting provider. The attacks attempt to hack the admin accounts and inject malicious scripts to the website.

As of today these attacks are happening at a global level. WordPress installations across the globe are being targeted. Because the attacks are highly distributed, most of the IP’s used are spoofed, it is very difficult to block all malicious data, but not impossible. This is why many servers from every hosting providers have gone down in recent days including big names such as Godaddy and Hostgator.

HostGator’s analysis found that this attack is a well organized. The company reports that about 90,000 IP addresses are currently involved. CloudFlare reported the hackers are using about 100,000 bots. Matthew Prince, CloudFlare’s founder and CEO, says that his company saw attacks on virtually every WordPress site on its network.

The websites that have been hacked had the “admin” accounts compromised and malicious scripts were uploaded into the directories. The following steps will help secure and protect your websites from these attacks:

  • Make sure your WordPress installation and all of your installed plugins are updated
  • Make sure your administrator’s password is secure
  • If you have a user account with the username “admin”, create a new administrator account with a different username and remove that old “admin” account
  • Install the security plugin WP Better Security
  • Other ways of securing a WordPress website can be found here; https://codex.WordPress.org/Hardening_WordPress

These additional steps can be taken to further secure WordPress websites:

  • Remove README and license files. This is very important since this exposes version information
  • Prevent reading of the htaccess file
  • Limit access to wp-admin.php and wp-login.php to your IP address
  • Move wp-config.php up one directory and change its permission to 400

The volume of these attacks has been significant enough to attract global attention. This is a good thing. However, even when this attack stops, we all will still be in the sights of the hackers so take this as a warning, secure your WordPress installation now!

Take Your Search Engine Optimization To The Next Level With Video

 

Watching videos online is becoming more and more common and it is a lot more engaging than just plain text. Online video is a great way to share a message with your audience. It’s also proving to be a reliable way to boost a website’s Search Engine Optimization (SEO) as well as increase traffic. Video and SEO seem to go hand in hand. Think of all the websites you stumbled upon accidentally because you followed a link from a video someone shared. Even if your video doesn’t go viral, there is still a good chance it can work for you to optimize your website.

Video is a good SEO tool for a number of reasons. The first reason is that thousands of hours of video are watched online by viewers every day. Another reason is that when Google and the other search engines are out there crawling your site they are looking for indicators such as quality, relevance, keyword placement as well as over 200 other indicators. Video and other multimedia add value to those metrics thus improving your rankings in the search results.  Imagine!  There are over 200 ways, indicators, that you can have displayed and installed in your website that make it ‘search engine preferred’!  How many of them do you know?

Truth is, no one knows them all except Google and they aren’t going to give us a check list so that we know them too!  But here’s the deal – we do know many more of these indicators than you probably do and continue to learn and apply new ones when we SEO the websites we develop and the ones we’re hired to optimize.  The favorable results of  increased sales our clients can take to the bank, prove our worth.  Not bragging here but worth letting you know, that this is our full time job and we maintain our knowledge base and do everything possible to keep it updated.

Here’s a good example to illustrate one of the indicators Google and other search engines employ:  when someone watches a video on your site, their stay on your site is increased. Time spent on a website is read as important indicator for Google and the other search engines.  People are often heard boasting about how many ‘hits’, visitors and viewers they have to their website – okay, this is a good thing, now we know that it’s ‘on the road’ but doesn’t  it make sense that an even better indicator is that the viewer stay on the site long enough to make a purchase!?  That type of site is called in the trade: ‘sticky’.  Wouldn’t that indicate to the bots that crawl the web and search and measure these factors, that your website is being ‘hit’, visited for the right reason?  That’s called in the trade: relevance.  And wouldn’t the most natural conclusion be for just these two indicators, that the content on your site, is in the right place to be seen by the right surfer?  It’s simple really, Google is constantly updating their game just as you and I do in our jobs.  Their job is to be a ‘good search engine’ and ensure that when someone types in the search bar ‘second hand auto parts’ they don’t end up with one or more of the 10 results on page one of sending them to ‘computer processors’ in China!  Or ‘grandma’s cookies, some of which happened to look like Joey’s truck!  Relevance…and folks that visit the site find what they need and want.

Another important reason is that people are more likely to link to video content. Page-rank (PR) is another important indicator for Google. Think of all the videos that are shared across social media platforms. Someone linked to them from a website and from then on they were shared. When this is ramped up, it’s called in the trade: viral video. This can produce hundreds even thousands of backlinks to your website thus increasing your PR (placement within the Google search engine).

Think about it, millions of viewers, all over the world, all night & all day, view videos  and share them in peer-to-peer, social media platforms including forums – now if you add to that, the unremitting fact, that all research has indicated, viewers prefer to have information about products and services delivered to them in video productions…then why not have professional video production, correctly displayed on your website?!  When its plugged in correctly the search engines, chief among them is Google,  ‘prefers’ it as content and makes it readily available for the ‘searcher’ to locate it.

How Do You Get Your Video Onto Your Website So That Google Reads It:

When you use a video on your site it is important to use them correctly. The best method of using videos on your site is to take advantage of the new HTML5 video tag. If your website is not coded in HTML5, it is time to upgrade! You will also need to create a video sitemap and submit it to all of the search engines. Be sure not to put all of your videos on the same page. Give each video its own unique URL with its own unique keyword phrase. Google doesn’t know what is in your video, it picks up the relative keywords from the URL you assign the video, the title and description in the video sitemap, and the related content on the page.

Add other related images and content to the page your video is on so Google can see what you video relates to. This ensures that each video is ranked and searched separately based on it’s targeted keywords. For instance if you have a website about cooking with videos of you making chicken you’ll want those videos to be searchable. If someone searches how to make lemon chicken your website may not pop up, but a page with a video would have a better chance of being ranked.

In conclusion, if you really want to pull traffic to your website and sell your products and services by using video productions as content, never use YouTube, Vimeo or Bing to host your videos. Unless your intentions are to increase traffic to their websites and not yours. Don’t spend your time and resources creating a great video only to to drive traffic to someone elses website.  It’s just not good business.

Build a good SEM (search engine marketing) strategy and get it doing the heavy lifting for you.  Many Webmasters like ourselves, who are hired to not only develop websites, but utilize them as advertising and marketing devices to sell the clients products, are staggered at why anyone wouldn’t have video as an option on the website!?

We all know, and anyone can do the most minimal research and draw the same conclusion – if you get decent, relevant, video production onto a website and plug it into that site correctly, there isn’t a more cost effective way to increase your sales.  There just isn’t.

Professional Video productions plus solid search engine optimization is marketing on steroids!

 
Search Engine Optimization Services

 
For the best video production services available. Visit: factandfable.com.

Single Video Facebook App for YouTube

Free Single Video Youtube Facebook Application

The free Single Youtube Facebook application creates a “tab” on your Facebook business page similar to our first free Youtube Facebook App. In this Facebook tab the YouTube application displays a pre-selected video with the title. The video is set at the time of registration. The video can be changed by simply re-registering the application with the new YouTube video URL. The application must associate your Facebook business page with the video you want to display. Please follow the below instructions carefully.

You can see the YouTube application live on this Facebook page. Click Here. To begin the registration process be sure you are logged into Facebook then follow these instructions;

  1. Click Here to begin the registration process. You will be taken to an authorization screen similar to Image A. Click “Go to App.” The application only accesses your basic information.
  2. You will be directed to a permissions screen similar to Image B. Click “Allow.” This allows the application to supply the content for the tab on your Facebook page.
  3. Now that the authorization and permissions for Facebook have been completed, you will be directed to the application website where a list of all of the Facebook pages for which you are an admin will be listed. See Image C. Select the page to which you would like to add the free YouTube application. Click “Submit.” Please note if you manage more than one Facebook page you must register each one separately.
  4. You will need the URL of the YouTube video you want to display on your Facebook business page. You can find the URL by navigating to the video you want to be displayed and copying the URL from your browser address bar. See Image D. Once you have the YouTube video URL, enter it in the provided field and click “Submit.” See Image E.
  5. WAIT! Your not finished yet! Now that the registration is complete you need to add the YouTube Tab to your Facebook page. On the Free Facebook YouTube Single Video Application “Thank You” page click the link that says “Add YouTube tab to my Facebook to page” or Click Here. Select the Facebook page you just registered and click “Add Page Tab.” See Image F.

That’s it! Your registration is complete. Your YouTube tab on Facebook should be playing your most recent YouTube video. If you have any problem or need assistance give us a call at 386 734 9844.

Check out our other YouTube Facebook Application. This Facebook Application propagates your YouTube Channel to your Facebook Page!

Free YouTube Application for Facebook

Free YouTube Facebook Application Revamped

Free YouTube Application for Facebook With the many changes Facebook has made to their format and changes to the way tab applications are displayed on their website, our free YouTube Facebook application was over due for a makeover. From the new larger 640px X 360px video player and the new look of the YouTube tab on your Facebook page to streamlining the registration process, the new YouTube app has been completely revamped. The instructions are below. Enjoy!

What the free Facebook YouTube application will do

The free Youtube Facebook application creates a “tab” on your Facebook business page. In this tab the application displays your most recent video upload to YouTube, along with the title and description of the video. The application will update once every 24 hours. If you upload a new video to YouTube, it will propagate to your Facebook page within 24 hrs. The application must associate your Facebook business page with your YouTube user account. This is why the registration process must be completed before the application will work. Please follow the below instructions carefully.

 

Free Youtube Facebook Application Registration

You can see the YouTube application live on this Facebook page. Click Here. To begin the registration process be sure you are logged into Facebook then follow these instructions;

  1. Click Here to begin the registration process. You will be taken to an authorization screen similar to Image A. Click “Go to App.” Note the application only accesses your basic information. This is the information you have made public. The only information this application SAVES is the Facebook ID of the business page being registered and the YouTube username.
  2. You will be directed to a permissions screen similar to Image B. Click “Allow.” This allows the application to supply the content for the tab on your Facebook page.
  3. Now that the authorization and permissions for Facebook have been completed, you will be directed to the application website where a list of all of the Facebook pages for which you are an admin will be listed. See Image C. Select the page to which you would like to add the free YouTube application. Click “Submit.” Please note if you manage more than one Facebook page you must register each one separately.
  4. You will need your YouTube user ID for the next step. Your YouTube user ID is NOT your YouTube log-in email address. You can find your Youtube user ID by logging into your YouTube account. After logging in you are directed to your YouTube page where your user ID will be displayed in the URL located in the address bar of your browser, as well as at the top of your YouTube page. See Image D. Once you have your YouTube user ID, enter it in the provided field and click “Submit.” See Image E.
  5. WAIT! Your not finished yet! Now that the registration is complete you need to add the YouTube Tab to your Facebook page. On the Free Facebook YouTube Application “Thank You” page click the link that says “Add YouTube tab to my Facebook to page” or Click Here. Select the Facebook page you just registered and click “Add Page Tab.” See Image F.

That’s it! Your registration is complete. Your YouTube tab on Facebook should be playing your most recent YouTube video. If you have any problem or need assistance give us a call at 386 734 9844.

Check back soon for the up coming release of the free single YouTube Video Facebook Application. The new app will display a single, preset video. Instead of registering your YouTube user ID, you will register the YouTube video url you wish to display on your Facebook business page.

We welcome your comments!

Update: The Free Single YouTube Video Facebook Application Is Available!

Fluid Web Design

Responsive Web Design

[is-mobile]Fluid Web Design[/is-mobile]

Handling Cross Browser Compatibility has always been an issue for web developers. In today’s world wide web it’s not uncommon for website visitors to be using many different browsers on many different types of devices. The options seems almost unlimited with Mozilla Firefox, Google Chrome, Opera, Safari, and of course “the beast” Internet Explorer. There are also many lesser known browsers and 3rd party software for Mac and Linux Operating Systems along with the numerous gaming devices capable of displaying web content. Not to mention the endless number of mobile devices

This presents a challenge for both business owners and website designers when trying to create a visually appealing website. So what is the best screen size and monitor resolution to build your website to fit? 800×600, 1024×768, 1366×768? The answer is there isn’t one! It is impossible to design a website to look the same in every browser, platform and screen resolution, it can’t be done. The modern approach to meeting this challenge is a responsive website design. A responsive website is a fluid page that adapts to any device, regardless of screen size or resolution settings.

With the introduction of CSS3 and a feature called media queries to detect the visitor’s screen size, cross browser/device compatibility became a whole lot easier. The only downside to using media queries is the lack of support in older versions of IE. As is the case with many CSS3 features, media queries aren’t supported in IE 8 and below. Let’s hope those IE dinosaurs die out soon!

A responsive web design will detect the width of the screen or window on loading and will then size and deliver content based on that width. This technique is fast becoming the preferred method for developing websites that are mobile friendly. However it is one of the most difficult in web development to implement, making it something that a number of us were eager to try. Several of us have built elastic websites for clients in the past, but none of us had never taken it to this level before. When we finally got the green light to build a responsive design for our company, we dove right in and this website is the end result.

Device Compatibility Using the Screen Size Approach

At the core of every responsive web design is a fluid and flexible layout that adapts itself to the screen size and features of the user’s browser. Since the pages of our new website needed to adjust to scale, we decided to keep the layout simple. As we coded the templates, we allowed elements to maintain their natural document flow wherever possible. The less complicated the code, the easier it is to scale things properly. To keep things truly responsive, we used percentages instead of pixels for widths, padding, and margins. We also used multiple column stacks as well as column stacks within column stacks. This makes the number of possible layouts for the same webpage countless!

Device Compatibility by Substitution or Omission

Device detection and accommodation is a departure from a true responsive approach to web development. But in balancing page optimization with mobile device requirements, we ended up with a hybrid approach for our website. A good example of device compatibility by substitution is the image at the top of this page. When this page is loaded on a mobile device a smaller version of the image is loaded without the zoom features. This eliminates the need to load the larger version of the image as well as the large JavaScript files that drive the zoom feature improving load time and reducing bandwidth usage. An example of device compatibly by omission is the slider on our homepage. The same information contained in the slider is also displayed in horizontal buttons on the desktop version of the homepage. The buttons stack up vertically and display nicely on all mobile devices making the slider unnecessary.

Social media like and share buttons are another good example of device compatibly by omission. They are everywhere you look on the internet. It’s easy to overlook the fact that including these social buttons on a web page means they will load several large JavaScript files. The fewer files that need to be loaded, the lower the bandwidth. This is crucial on mobile devices. Therefor the social share buttons are omitted when this website loads on a mobile device. We also chose to omit Facebook commenting on the blog post for mobile devices for the same reasons.

We made several other minor accommodations for mobile devices. When the website is loaded on a mobile device a ‘back to the top’ button is added to the bottom of each page. Also the main navigation menu is dropped down in a “button” style menu for easy click ability. Extra padding is added around links in content to make them more touch friendly. We also created smaller images and used server-side mobile detection to swap the image source from the full size version to save bandwidth and load time for our mobile visitors.