Category Archives: HTML5

The Easy and Search Friendly Way to
Setup 301 Redirects

HTML5, SEO, Small Business Marketing, Technology, Web Design

301 Redirect Using HTAccess fileAs many of you know I recently updated my entire website and in the process I had to setup 301 redirects for the new page names. Why should you do this when updating a site? It’s simple, when someone does a search on Google, Bing or Yahoo! it would yield a blank or 404 error page if there is no 301 redirect implemented.  A 301 redirect basically takes the old URL/page name and redirects it to the new page or URL.  Thus the information a prospective client is searching for will still come up seamlessly   This can mean the difference between a new client and a passerby.  But wait, couldn’t I have created the new pages with the old file names, Yes, I could have but I believe the newer page names I made are contextually more appropriate to the current content and making them more SEO friendly.  Also, I didn’t want to lose all of that old “Google juice” I had built up over the last 5 years, hence, I needed a 301 redirect.  There are many ways to setup 301 redirects but the following way is the easiest and most search engine friendly approach.  However, it should be noted that this  HTAccess approach is for Apache servers only.

Open a simple text file and name it .htaccess (you can not use Word or WordPad it must be a simple text editor with no formatting).

Depending on what you’re trying to do, redirect an entire site to a new domain or just redirect a page it would be as shown below.

Redirecting  a single page

Redirect 301 /oldpage.html http://www.yoursite.com/newpage.html
Redirect 301 /oldpage2.html http://www.yoursite.com/folder/

Redirect an entire site

This way does it with links intact. That is, www.oldsite.com/some/link.html will become www.newsite.com/some/link.html. This is extremely helpful when you are just “moving” a site to a new domain.
Place this on the OLD sites HTAccess file:
Redirect 301 / http://newsite.com/

Here is an example of my .htaccess file:
RewriteEngine on

ErrorDocument 404 /404.html

%{HTTP_HOST} ^www.reelwebdesign.com$
^/?$ "http\:\/\/reelWebDesign\.com" [R=301,L]

Redirect /web_SMM_packages_NYC.html http://reelwebdesign.com/social-media-marketing-plans.php
Redirect /web_SEO_packages_NYC.html http://reelwebdesign.com/SEO-packages-NYC.php
Redirect /web_design_ny.html http://reelwebdesign.com/contact.html
Redirect /online_public_relations.html http://reelwebdesign.com/press-release-writing.html
Redirect /pay-per-click-management.html http://reelwebdesign.com/PPC-management.html
Redirect /local_SEO_packages.html http://reelwebdesign.com/local-SEO-packages.php
Redirect /web-design-services.php http://reelwebdesign.com/web-design-services.html

Notice the 404 Error Document is telling the browser to go to my 404.html file. This is another handy feature to implement in your .htaccess file.

Happy redirecting!

What is CSS 4 Media Queries?

CSS3, CSS4, HTML5, SEO, Web Design, , , ,

CSS4 What is it going to be like?

Well, the next generation of Media Queries, CSS 4 Media Queries, was officially made public last year with the last edit in December 2012. Here is the editor’s draft. As I stated, CSS3 Media Queries was mainly focused on the ability to change the format of content for different screen sizes and resolutions. CSS 4 Media Queries, on the other hand, is set to handle a variety of input methods and other capabilities of different devices, and allow for differing presentation depending upon the device capabilities. So far, there are several new media features and others that are basically more descriptive features of previous versions of CSS. Below is a list and link to all of them thus far:

Media Features:

Hover
A feature I found useful and interesting is the ‘hover’ media feature. The ‘hover’ media feature can be used to query whether or not the primary pointing system used on an output device is capable of hovering. If it is capable, the value will be designated ‘1’ if not the value will be ‘0’.
If a device has multiple pointing devices, some of which support hovering and some of which do not, the specification recommends that the UA reports the hovering ability of the least capable of the primary pointing devices. For example, on a touch screen device the value of the ‘hover’ media query should be 0, even if an optional mouse (which is capable of hovering) is attached.
I think it’s great that they’re working on this feature simply because there have been many times when I have gone to a mobile website and they have hover drop-downs that don’t work correctly with touch screens. Resolving this will make a much better user experience especially as our experiences online become more touchscreen oriented.
More information on the ‘hover’ media feature can be found in the editors working draft here.

Luminosity
Another feature that can be useful for mobile devices is the luminosity feature. Here is an excerpt from W3.org:

The ‘luminosity’ media feature is used to query about the ambient luminosity in which the device is used, to allow the author to adjust style of the document in response. The following values are valid:

‘dim’
The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.
‘normal’
The device is used in a environment with a level of luminosity in the ideal range for the screen, and which does not necessitate any particular adjustment.
‘washed’
The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.

Although there are no browsers that support the new CSS4 features, usually Chrome is the first to adopt the latest CSS features. Either way I’ll let you know when browsers get up to speed.

Web Design Trends for 2013

CSS3, HTML5, Small Business Marketing, Web Design

web design trendsAs we enter another year in the world of web design and the changing landscape of technology and social media, it’s clear that programmers and social media strategists, have come a long way. From the first hyperlink and alt tagged jpeg, to HTML5 sites and Content Management System (CMS) programs, like WordPress, that simplified web page building, the trends that have remained popular in web design have been ones that were meant to make websites easier to access through various devices, and easier to create. Ali Qayyum, a regular contributor for Smashinghub.com, recently released his top six trends for 2013. Expanding on his predictions for 2013 are included examples of how a few of these trends work in the world of web design, so the novice designer has a more clear idea of how these trends are put into practice.

Focusing Less On Branded Design

This trend was likely not favored among marketing agencies at first, but is beginning to make sense more and take hold. Qayyum thinks of it as telling branded design to take a hike. If you are putting less emphasis on the brand design of a company, you will ultimately be forced to focus more on the products and more meaningful content that is associated with selling the product. Several websites accomplish this design well; more notably, car websites like Freeway Chevrolet or retail sites like Macy’s. The idea behind this trend is to put the focus on what the company sells, rather than on the company itself.

Responsive Design

responsive web designResponsive design is when a design concept is created to look more attractive on a

new device, like the tablet or on a smartphone. The size and amount of elements will vary depending on whether you are searching for a site on your smartphone or on your laptop. You might design a site that has less text on the home page, larger buttons and less distracting graphics, so the home page can convert to a tablet or smartphone format with more ease. SocialDriver.com says sites like BostonGlobe.com and FoodSense.ie accomplish this by creating good navigation bars and simple text easy to read on the computer, tablet or smart phone.

Vertical Scrolling

Similar to the responsive design trend, vertical scrolling, which is really the easiest way to look through a site, has been adopted over horizontal scrolling or even clicking through to multiple pages. This trend is likely because most users who access information on their tablets or smartphone prefer to scroll with their finger, vertically and the less you have to change in a site that is being converted for different formats, the better. Most sites like Mashable.com, SmashingHub.com and others scroll vertically.

Other trends that Qayyum mentioned, like stylized typography and Parallax scrolling are important changes that have taken the world of design by storm in recent years, and certainly the development of touch-sensing keys on hand-held devices merged a site’s design with its function and style, which is what every designer hopes to accomplish when executing a design.

5 Reasons to Redesign Your Website with a Responsive Web Design Format

CSS3, HTML5, responsive web design, SEO, Small Business Marketing, Web Design, , , ,
Responsive Web Design

Responsive Web Design can engage your customers more by giving them a friendlier user-interface.

What is responsive/adaptive web design?

Responsive web design (or sometimes referred to as adaptive web design) is the process of making a website that will adapt appropriately to any screen size. From desktop, to tablet, to mobile phone, your website will look and feel appropriate to the device it’s being viewed upon.  As screen sizes become smaller, a responsive website re-prioritizes content and modifies its design on the fly to meet the needs of users on any given device, thereby presenting a friendlier user-interface.

Here are 5 reasons to make your website responsive:

  1. Eliminates the need to create a mobile-only website.
  2. It’s optimized for performance on mobile devices.
  3. No need to update your mobile website and your desktop website when it’s all in one!
  4. The user interface experience is better across all devices.
  5. Helps you rank higher on the search engines! Yes, Google prefers responsive sites!

If you are planning to redesign your website I recommend making the upgrade to a responsive one. Unfortunately, redesigning your style-sheets and updating your current websites HTML to become responsive can be as expensive as getting a new website created. It is much more cost effective to make a new website responsive from the start, and that’s why I encourage all new web design clients to make their site adaptive.

Want to see it in action? If you’re on your desktop computer (or laptop) adjust the size of your browser to different sizes and you’ll see the website readjust according to the screen size.
That’s responsive web design in action. I’ll be recreating my main website (reelWebDesign.com) to be fully responsive soon, so keep an eye out. If you’d like a sneak peak to see what it will look like just email me.

By Peter Marino