If you are a designer with a knack for catering to Apple users and find that you prefer to design sites with an easy drag-and-drop online system, you will be excited to hear that www.wix.com is unveiling a free HTML website builder on the 26th of March, 2012.  Wix has already gained widespread popularity for their drag-and-drop Flash website builder that allows users to easily build complex, powerful, and stunning websites.  Whether you’re looking for an easy way to put together site with a full screen background, or display your portfolio online, Wix is certainly worth checking out.  It doesn’t matter if you’re a seasoned web developer or an ambitious do it yourself-er, creating a free HTML website or SEO friendly Flash website has never been easier.

Developing a website that is aesthetically pleasing across multiple operating systems, monitor shapes and sizes and wide spanning variety of screen resolutions can be quite the challenge.  Just thinking about how many different things you have to take in to consideration or how many combinations that ends up being is enough to make someone rip their hair out.  And that doesn’t even take in to consideration all of the new devices that are gaining in popularity, such as tablets and mobile smart phones.

For anyone who has developed a website containing fixed dimension elements and then checked it on their iPhone or iPod Touch may have noticed that their fixed dimensions didn’t hold true.  If they did, only a portion of the site would be displayed on the screen and browsing the site would immediately require the visitor to not only have to scroll vertically, but horizontally as well.  The reason for this is simple, those devices are set to automatically scale websites.  Scaling the site down allows the viewer to see the full site, albeit a miniature version, but as it would be displayed on a normal monitor none the less.  From there Apple assumes the viewer will zoom in and out and scroll through the portions of the site they’re interested in reading or navigating through.

Most iPhone users are accustomed to the zooming and scrolling by now, but what if a developer has created a responsive website that has no need to be scaled down?  You can easily override the device’s desire to scale by inserting a simple meta tag in the head of the page, the viewport meta tag.

It’s a rather easy and pain-free bit of code to drop in, and is Apple specific.

<meta name=”viewport” content=”width=devide-width; initional-scale=1.0”>

Taking a closer look at what this all means, think of the “viewport” as the screen of an iPhone.  When we set the content to “width=device-width” we are simply telling our viewport to equal that of our iPhone in pixels.  The default width for this is 980px, but the range spans from 200 to 10,000.  Setting the initial scale to 1.0 is where we are telling our device not to scale the content.  Safari bases the width off of portrait mode, so the width of the site equals the width of the device in portrait mode and the height of the device in landscape mode.

Along with setting the scale in which you want viewers to see your site when the view from their Apple mobile device, you can also set how much they’re able to zoom.  The default minimum scale is .25 with the default maximum scale set at 1.6.  However, the span ranges from as low as 0 all the way up to 10.  You can also take away a viewers ability to scroll by setting the “user-scalable” property to “no”.

You may also change the color of the status bar to help your site stand out from others on Apple mobile devices.  To do this you insert the “apple-mobile-web-app-status-bar-style” in the head section of your HTML web template.  You can set the status bar color to “black” or “black-translucent”.  Setting it to “black” will give the status bar a black background, while “black-translucent” will make the black background slightly translucent.  When using the “black-translucent” setting the site will load full-screen with the translucent status bar overlaying the top of the site.  To customize the way your status bar will appear to Apple mobile viewers simply drop a line of code like this in the head of your HTML website.

<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”>

One handy feature that the Apple mobile devices can do is auto-detect phone numbers in web content.  This makes it easier than ever for someone viewing your site to call you, there’s no need to pick up the phone because they’re already on it!  However, there will surely be a time where you just don’t want the phone to auto-detect numbers.  Thanks to the “format-detection” tag that’s no problem.  You can easily keep Safari from automatically turning what it thinks is a phone number in to a link to call by adding this meta tag to the head section of your web document.

<meta name=”format-detection” content=”telephone=no”>

Keep in mind that these are Apple specific tags and will not change the way your site looks on Android devices or other mobile platforms.  There are a large number or people surfing the web from their iPad, iPod, or iPhone though, and their viewing experience should not be overlooked.


Posted by scottstanton

Scott Stanton has spent the past decade working nights developing HTML websites as a freelance web designer, only to write about the latest HTML website design trends at his day job as a freelance writer. Scott is a regular contributor for Wix.com and you can hang on his every word @TheScottStanton and on Google+

Leave a reply

Your email address will not be published.