Web Design by Chameleon

Responsive Design View Controls

Using Mozilla Firefox to checkout how your website looks in different sizes.

/in , /by

A very useful tool available in Mozilla Firefox is the ability to visualise your website in different browser sizes. For web designers this is great when building a responsive design website.

This tool provides the ability to see what the website looks like in varied sizes of resolution at the click of a button.

To see how this feature works in Mozilla Firefox go to your website and then press “CTRL” + “SHIFT” + “M” and then you will get the option window appear.

Mozilla CTRL SHIFT M

Building a dynamic website is important due to the popularity of mobile devices being used. Chameleon Web Services can be viewed in any many of devices and each device has its own CSS and visual changes to make it more appealing for the user.

Responsive Design View Controls

Once enabled the pop windows appears with the control panel:

XClose and return to normal browsing window.
Select sizeSelect from a the presets available “width” x “height” combinations to visualise website in new view.
Portrait/LandscapeChange between portrait and landscape views (useful for understand iPAD viewing).
Simulate touch Enable / disable simulation of touch events.
Take screenshotCapture a screenshot of the window. These are saved to the default Firefox download location.

 

Contact Form 7 Input Box Sizes

/in /by

If you are using the Contact Form 7 WordPress plugin and struggling to get the input box sizes to all be the same length in all browsers you can add the following code to your style sheet.

#wpcf7-f59-w1-o1 input[type=text] {
width: 85%;
}

#wpcf7-f59-w1-o1 input[type=email] {
width: 85%;
}

#wpcf7-f59-w1-o1 textarea {
width: 85%;
height: 80px;
}

This will then allow you to set the width, in the example we have used 85% to give a little space around the input boxes.

Note: Check that these lines have not already been added in the style.css file for the main theme.

IP address to the main website URL

/in , /by

We thought we would share this information for people using Apache Web Servers who require to redirect the IP address of a website hosting to the main website URL. If you have a dedicated IP address it is well worth checking this.

If the web hosting server IP address is not forwarding to the website’s domain name then you may find that search engines could index your website content using IP address rather than the domain name itself.

If this did occur it would mean that there is a potential of duplicate content so we recommend you check this by putting your webservers IP address in your browser.

If it does not redirect to the main website URL then you can fix this using a htaccess 301 redirect on an Apache server.


Options +FollowSymLinks
RewriteEngine on
#
# Redirect non www to your www.yourdomain.com
RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^www\.yourdomain\.com$
RewriteRule (.*) http://www.yourdomain.com/$1 [R=301,L]

-or-

Options +FollowSymLinks
RewriteEngine on
#
# Redirect non www and also the server IP Address to your www.yourdomain.com
RewriteCond %{HTTP_HOST} ^yourdomain\.com [OR]
RewriteCond %{HTTP_HOST} ^123\.456\.789\.101
RewriteRule (.*) http://www.yourdomain.com/$1 [R=301,L]

Be careful to add your IP address without damaging the code as it requires the “\” between the “.”

Fix Drop Down Menu behind YouTube Videos

/in , , , /by

We get asked a lot of times about Z index’s to fix drop down menus hiding behind a youtube video.

There is many different ways to fix this problem but it seems you are fighting against Internet Explorer each time you fix this in another browser.

To explain the problem, when you add the iframe to your code to call the YouTube video for example you will use:-

https://www.youtube.com/embed/InDMh5s0-q0

No in the browser no matter what you do you get a z-index greater then everything else which means that YouTube video will be overlayed on top of anything and this is why you bang your head against the wall fixing with CSS.

https://www.youtube.com/embed/InDMh5s0-q0?wmode=opaque

To overcome this issue you can tell the YouTube video how to behave adding the following code:-

<iframe class="youtube-player" type="text/html" 
width="640" height="360"
src="http://www.youtube.com/embed/InDMh5s0-q0?wmode=opaque" 
frameborder="0"></iframe>

This fix works and the drop down menu will appear over the YouTube video. But the problem is you have to remember to add this to each video you embed so here a fix you can add to the header of your website coding and it will automatically add the required fix so you can embed normally and let the coding do the hard work.

function addToQueryString(url, key, value) {
    var query = url.indexOf('?');
    var anchor = url.indexOf('#');
    if (query == url.length - 1) {
        // Strip any ? on the end of the URL
        url = url.substring(0, query);
        query = -1;
    }
    return (anchor > 0 ? url.substring(0, anchor) : url)
         + (query > 0 ? "&" + key + "=" + value : "?" + key + "=" + value)
         + (anchor > 0 ? url.substring(anchor) : "");
}

How to Choose a Website Design Company

/in /by

There are thousands of web designers in the UK, from amateurs operating from their bedrooms to multi-million pound web services corporations so finding the right one to work on your website can be a difficult task. There are many aspects to consider when shopping around for a website designer and getting the right one to complete your website is important.

The main issues to consider include:

Price of Website Design

Cost is often the main concern for an individual or business when buying a new website. A word of warning; if it sounds too good (or cheap!) to be true, then it probably is! Naturally you want the best deal possible and to save money where you can, but beware that the cheapest website design company is not usually the best. Choosing the cheapest web design company can cost you more in the long term; there is no point having a website developed which is unappealing, unattractive and ultimately unsuccessful just because it was cheap.

Web Designers Portfolio

It is very easy for web designers to pray on a person’s inexperience and lack of knowledge in the technical arena, promising you the earth and then delivering sub-standard results. A way in which you can help guard against this is by asking to see a portfolio of the website design companies past clients; this will give you an indication of their capabilities and also what level of work you can expect for your budget.

Website Designer Customer Service/Reviews/Recommendations

It is important to work with a website designer that you can trust and find easy to work alongside. To get a feel for the nature of the web design company that you are going to work with, check out their customer reviews and online recommendations. For an even deeper insight, ask the company if you can have the contact details of some of their past clients and speak to them directly; they will have the most accurate information on the company.

Having a website designed is an important aspect of web marketing and it is imperative that it is completed correctly. If you choose the right website design company you will have a fantastic looking website, at the right price with excellent ongoing support.

Chameleon Web Services offer a comprehensive website design service; all of our sites are built to our customers’ specification and budget, as well as being optimised for internet marketing purposes. To discuss your requirements and for a free quote, contact us today on 0121 663 0456 or fill in our online contact form.