Web Design - Operating Systems - Web Browsers

Apple Mac - Windows - Linux - Safari - Firefox - Chrome - IE9

As a website designer Should You Consider The APPLE MAC Market? After doing some considerable research into the Apple Mac market, and also buying a second-hand Apple Mac PowerBook G4, I’ve now begun to convert some of my Windows website templates into Apple Mac templates; so that they work on a real Apple Mac with the Safari and Firefox web browsers installed.

Before investing in the second-hand Apple Mac I needed to ask myself "Is there a valid reason and market for investing in the Apple Mac and converting websites for it?". And the answer for me was YES simply because I run a computer business whereby I work in the Windows and Apple Mac markets.

If I wasn’t in the computer business, but a website designer only, would I still invest in the Apple Mac market? A couple of years ago, if not last year, I would of said NO simply because the Apple Mac was known as "The 1% Club!" However, with Steve Jobs dying and students taking advantage of lower "Student Discount" prices the Apple Mac has become "The 4.6% Club!" In other words, it’s slowly but surely getting more buyers even though it does cost more than two Windows laptops.

In my business, Click Wise Computer Services, I will get Apple Mac customers who want their Windows computer fixing, and vice versa, so creating an apple mac version of my website was not an option for me. I could have used a friend’s Apple Mac for the conversion but as my computer business is on-going I needed an Apple Mac of my own for testing purposes; even if it was to be old and second-hand.

Can You Avoid The APPLE MAC Market?

Regardless of the above said, in my opinion, NOW is the time for website designers to create and convert websites for the Apple Mac market. Businesses, small and large, are starting to use Apple Macs in their offices and at home both for business and pleasure; with one of the major questions being "If you design me a website on Windows will it work on an Apple Mac?"

What Are The Major Differences For Website Designers?

It may surprise those without an Apple Mac that Safari on Windows and Safari on an Apple Mac will render your website with a completely different look....font-wise and/or space-wise. Meaning, the only real differences between the two computers (website-wise) tend to be elements such as font size, padding and margin. Although the web browsers may be the same they are told to display fonts and spacing differently according to what computer they are on.

As an example of this; I have many of my website templates built with elements such as DIVs, Photos, Text and Code (PHP, JQuery and JavaScript) whereby the DIV and Photo elements are in various sizes and positions, but never cause display problems on either computer. The only problems I normally have to fix are to do with the font, padding and margin elements; which normally means editing a CSS file only. Once this is done all is fine, but it does mean I end up with left with two identical websites.

How Do You Detect The Computer Used And Browser Used?

When faced with the scenario of creating a website that will look good on both a Windows PC and an Apple Mac it’s not just a case of fixing a CSS file for use with the Safari web browser. In today’s age a Windows PC can have different operating systems installed on it side-by-side (i.e. Windows Windows 7 and Linux) just as an Apple Mac can have Windows 7 and Lion installed on it side-by-side; which means you should be looking at designing a website for more than one operating system and web browser.

This ultimately means you will need some sort of system/browser detection code in place that can redirect a website visitor to the correct website/website folder based on the computer and web browser they are using. Luckily such a code exists.

This Computer & Web Browser Check javascript code can be used to determine a website visitor's computer, and web browser if need be, whereby you could then programme it to redirect them to a corresponding website or website folder (i.e. to your Apple Mac website folder or Windows website).

Should You Use Browser/System Detection?

When designing for two different computers, possibly with two different web browsers and/or operating systems on it, you need to decide whether or not to create a website for each computer or just use a folder. In other words, do you create www.mac-version.com and www.windows-version.com OR do you use www.windows-version.com and www.windows-version.com/apple_folder.

The advantage of using a main website for windows visitors (i.e. www.windows-version.com) and redirecting apple visitors to a folder (i.e. www.windows-version.com/apple_folder) is that you only need a javascript and change of css file for example, with the only real disadvantage being that the apple visitor may have javascript disabled on their web browser.

The advantage of using two different websites is that you can tell apple mac visitors to "Click Here For My APPLE MAC Website" from your Windows website. You can also market the two websites differently. The disadvantage of having two websites though is that apple mac visitors arriving on your Windows website will have to see your mis-aligned Windows website before clicking on the apple link that takes them to your purposely built Apple Mac website. And the same would apply if you had a dedicated apple mac website, as your main website, whereby windows users would see a mis-aligned apple website.....

In my opinion it's better to use javascript redirection to another folder rather than having two separate websites. Two separate websites would mean double promotion, double programming and so on. Too much unnecessary work in other words.

How To Use The Javascript Detection/Redirection Code

After copying and pasting the above mentioned javascript into a text file, or downloading my modified version here, you should then create/add your own IF / ELSE / ENDIF conditions to the end of the code.

Fig 1.0  Create(Add) your own IF / ELSE /ENDIF conditions to the end of the code

The above IF / ELSE /ENDIF conditions are stating that IF my click-wise.net website is running on a Windows computer do nothing (display the Windows web page as normal) ELSE IF my click-wise.net website is running on an Apple Mac computer or a Linux computer send the visitor to the appropriate folder within my click-wise.net website ELSE display the OSError.htm (OS Error) web page.

Once you have created your own IF / ELSE /ENDIF conditions and saved the text file as a javascript file (i.e. saved it as pcbrowsercheck.js) and then uploaded it to your Public_HTML website folder, or js folder, you then need to call (run/execute) the script. This is done by inserting a <script> command into all your web pages that require a check of the visitor's operating system (computer) and/or web browser.

Fig 1.1  Call (run/execute) the code with an inserted <script> command

In the above example I have placed <script type="text/javascript" src="js/pcbrowsercheck.js"></script> into all of my click-wise.net web pages so that Apple Mac and Linux visitors will see the same click-wise website but with corrected font alignment and spacing for their computers.

What happens is that the pcbrowsercheck.js script is called (run/executed) before the rest of the index.htm code is executed, if needed. In other words, the Windows version of click-wise.net will not be displayed if the computer is found to be either an apple mac or a linux computer.

The script itself calls (runs/executes) its BrowserDetect.Init() function before looking at the IF / ELSE / ENDIF conditions (Fig 1.0 above). If an Apple Mac or Linux computer is detected the visitor is redirected to the appropriate folder using the window.location command, otherwise the script returns execution to the next line in the index.htm web page (</head> in this case) in order to display the Windows version (text/images) of the web page.

If you wanted to check for the web browser used by a visitor you would simply insert an IF / ELSE / ENDIF condition before the window.location command. Here is an example for use with the apple mac detection:

ELSEIF (BrowserDetect.OS == "MAC")
{

IF (BrowserDetect.browser == "Firefox")
{
window.location = "http://www.click-wise.net/apple_mac_computer_services/firefox/"
}
ELSEIF (BrowserDetect.browser == "Safari")
{
window.location = "http://www.click-wise.net/apple_mac_computer_services/safari/"

ETC

As mentioned above; You don't need to have specific folders for every check, you could just change the css file as this next example demonstrates.

How To Use JQuery To Change The CSS File Used

This next example doesn't use the browser detection code above, but does follow the same principles. It uses a Screen Size javascript code instead to change the file name of the initial CSS file based on what the visitor's Screen Width is, which means I don't need a separate folder for each screen width. All I need is a separate css file for each screen width.

Fig 1.2  This website folder contains many CSS files relating to screen widths

The initial css file used for displaying this websitecreationhelp.com website is called 1280.css, because that is the default screen width I am catering for, and is therefore the default css file name included in all of my web pages. It is technically initial, as opposed to default, because it will be changed by the javascript code if another screen width is detected.

Fig 1.3  The screensize.js javascript code is called after the default css files have been opened

The javascript code is called (run/executed) just after the default css files articlelinks.css and 1280.css have been opened (looked at) (Fig 1.3 above). At this point you might be wondering "If the 1280.css code is opened, what is the use of changing its file name?", and that would be a good question. The answer is because by changing its file name to 800.css for example it means the html web pages will initially display text/images as formatted by the 1280.css code, but will then be overwritten with any relevant font/spacing changes made by the 800.css css file (code).

To clarify. If the 1280.css file is used to display an image at position 1,000 pixels to the right but you want it displayed at 600 pixels to the right, if an 800 pixels screen width is detected by the screensize.js javascript code, the 800.css file (code) will be used to change/overwrite the x (right) coordinate to 600 pixels and therefore display the image at 600 pixels to the right.....when the html code is run later.

In this particular example (below) the 800.css file is used to change the appearance/imagery of certain website links when an 800 pixels screen width is detected, and more specifically they change the font size and spacing of the website links so that they look good on a 800 pixels display.

Fig 1.4  The code inside this 800.css file changes the appearance of certain website links

The screensize.js javascript code (below) simply runs through standard IF / ELSE / ENDIF conditions until it identifies the screen width of the visitor's computer whereby it then changes the default 1280.css file name inside the current web page (i.e. index.htm) to screenwidth.css (i.e. to 800.css), so that the htm file's html code will then use the new (800.css) code instead of the old 1280.css code; as explained above.

Fig 1.5  Javascript and JQuery Code work together to change the file name of the current cs file name

The above said applies equally to the Linux operating system and its version of the Firefox web browser for example. I have noticed that the Apple Mac and Linux tend to use the same font spacing and attributes, so you might get away with designing a website for the apple mac whereby it then automatically works with Linux. This would need to be tested on a Per Website Template basis though. In other words, don't assume that your apple mac website template will automatically work with linux.