TheWebHackCode

Wednesday, November 28, 2012

If you write a typical HTML4/XHTML/HTML5 webpage it will render pretty well on mostly all the modern cell phones. However it will be displayed as a website where users can generally pinch and zoom into areas. This is perfectly acceptable for most instances, except for responsive websites and mobile web applications.

Additionally you need to offer your visitors a quick way to access your webapp. Mobile Safari is always an option – but what about launching from the homescreen? All of the App Store applications will launch from their home icon, and this is also possible inside a mobile web app. Although we can run through a few of the required tags first.

Device Viewport

Whether your layout is built flexible or hard-coded to a set width(ex: 320px for iPhone) does not ultimately matter. To generate a webapp view we need the meta viewport tag added in-between your website’s section. This can setup any number of important options for how our webpage is rendered on a mobile screen.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

This example above should be perfect for any typical boilerplate application. It will set all the default views to 1.0 scale and the user cannot re-size any part of the site, although they can still scroll vertical and horizontal. Within the content attribute are many other values you can toy around with. The Mozilla dev team has written an article on the viewport tag with full explanations and a couple of examples.

If anything, it’s super important to set your width value the same as device-width. This will force the layout to adjust as your visitors may switch from portrait into landscape view. It’s also necessary if you’re running JavaScript which parses for the current window size.

Mobile Safari Tags

The Apple online documentation section has a piece for Safari mobile apps. This includes a reference to each of their proprietary meta tags and how they should be used on your website. But in truth there are really only 2 more aside from the viewport.

<meta name="apple-mobile-web-app-capable" content="yes">

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

By setting the web-app-capable meta tag Safari can detect that your website is able to run as an application. So when users go to save your website onto their device it will launch without the URL bar or any other Safari trimmings.

If you are familiar with iOS apps you’ll also recognize the top bar section of the device screen. By default this is setup with a white/gray gradient, but you may also choose between black and black-translucent. Neither of these values should affect your webapp in any major way other than the color scheme for the top toolbar.

iOS App Icons

There are two important pieces you can mimic in relation to a native iOS app. The first is a home screen icon, and the second is a featured launch png image. The code is very sensitive and you’ll need to use these exact values for rel and sizes. Although feel free to rename your image files anything(or even .jpg should work fine).

<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">

<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">

<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">

<link rel="apple-touch-startup-image" href="/splash-startup.png">

Although it isn’t stated outright the sizes variable only accepts these two values. 114px is for iPhone retina and 7px for iPad displays. As far as I know there is no new size value for iPad retina displays.

The startup splash image should be sized exactly 320×460 pixels. For some reason the Apple guidelines do not offer a retina version of this splash screen. I have tried setting sizes=”640×920″ and the whole splash image feature just stops working! So this attribute appears to be very touchy, and I’m hoping Apple will touch up some of these features soon.

Quirks with Internet Explorer

Internet Explorer has surprisingly been getting a lot better with web standards. The developers at Microsoft have been adapting with new Internet technologies both on desktop and with their mobile phones. Meta tags for setting the rendering engine are common – using the MS http-equiv value for example.

But a recent tag X-UA-Compatible had caught my attention. It’s useful for setting browser engines back to keep your current code backwards-compatible. This is usually the case the Internet Explorer, although in some cases you can reset an older IE to the latest version. That would be using this code below:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

There have been some validation issues when checking your code against an HTML/XHTML parser. I believe this tag is setup through Microsoft and has been slowly leaked throughout the mobile web. This is really a personal choice to work with or not. If you’d like to learn more check this MSDN Blog post regarding X-UA-Compat and pick up on the details of the syntax.

Other Important Tags

There are some other meta tags you do not need to include, but certainly wouldn’t hurt anything if you did. Unfortunately there are just so many standards it would be impossible to list all the options. But you may consider working with just a couple more tags.

<meta name="HandheldFriendly" content="true">

HandheldFriendly was originally created by Palm and BlackBerry devices for managing mobile websites. It is still somewhat useful although not exactly the highest market share among mobile devices. I’ve found a small blog post discussing this meta tag and the viewport content.

There is also mention of another tag called MobileOptimized. This was originally designed for mobile Internet Explorer and will be carried over for WMP. It’s also known as the meta layout tag from the Microsoft developer docs.

<meta name="MobileOptimized" content="width">

Note that “width” should be changed to whatever your natural display should be on Windows Mobile Phone. This can be tricky to setup, and it may be worthwhile to ignore this tag altogether. The suggested default is 240 pixels for tablet PC and mobile IE devices. But there are definitely other tags related to IE which serve a greater purpose.

Conclusion

I hope these tricky meta tags can be of use to any interested mobile web developers. iPhones and Android devices have changed the way we access the Internet and modern-era websites. And now webmasters are forced to adapt their layouts to suit a changing marketplace.

This is not an exhaustive list of mobile-based meta tags. But it does cover all of the big boys you’ll need in a typical webapp. This should get you started on the right path for mobile web dev, and you can even setup a blank HTML5 template with many of these meta tags initialized. If you have similar ideas or questions on the code please share with us in the post discussion area.

Wednesday, December 28, 2011

Fun with CSS3 animation

Solar system animation by CSS3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

html, body {background:#000;}

.solarsystem {width:800px; height:800px; margin:5% auto;/* border: solid 2px #66a5da;*/ position:relative;}
.sun { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#fff132), color-stop(100%,#e5c824));-webkit-box-shadow: 1px 0px 50px #ffe042;width:50px; height:50px; border-radius:50px;}
.mercury { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#e79f04), color-stop(100%,#d28f00));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:10px; height:10px; border-radius:10px; margin-left:18px; }
.venus { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#c79f4a), color-stop(100%,#a38036));/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:15px; height:15px; border-radius:15px; margin-left:35px; }
.earth { background:#30a0ff;/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:20px; height:20px; border-radius:20px; margin-left:60px; }
.moon { background:#fff;/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:6px; height:6px; border-radius:6px; }
.mars { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#c35214), color-stop(100%,#ad3f03));/*-webkit-box-shadow: 1px 0px 5px #c35214;*/width:19px; height:19px; border-radius:19px; margin-left:80px; }
.astoriods { background:url(../images/astorieds.png) no-repeat; width:368px; height:368px; position:absolute; top:220px; left:215px;}
.jupiter { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#e79f04), color-stop(100%,#d28f00));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:28px; height:28px; border-radius:28px; margin-left:95px; }
.saturn { background: url(../images/saturn.png) no-repeat; width:40px; height:40px; margin-left:100px;}
.uranus { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#62b7ff), color-stop(100%,#319ffd));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:18px; height:18px; border-radius:18px; margin-left:155px;}
.pluto { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#6b8ca8), color-stop(100%,#8dafcb));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:8px; height:8px; border-radius:8px; margin-left:208px;}

.sun_position { position:absolute; top:375px; left:375px;}
.mercury_orbit { width:100px; height:100px; border: solid 2px #66a5da; position:absolute; top:350px; left:350px; border-radius:160px; -webkit-animation-name:rotate; -webkit-animation-duration:8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.venus_orbit { width:160px; height:160px; border: solid 2px #66a5da; position:absolute; top:320px; left:320px; border-radius:100px; -webkit-animation-name:rotate; -webkit-animation-duration:20s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.earth_orbit { width:240px; height:240px; border: solid 2px #66a5da; position:absolute; top:280px; left:280px; border-radius:240px; -webkit-animation-name:rotate; -webkit-animation-duration:25s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.moon_orbit {width:30px; height:30px; border-radius:30px; position:absolute; margin-top:-5px; margin-left:-5px; -webkit-animation-name:rotate; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.mars_orbit {width:300px; height:300px; border-radius:300px; position:absolute; top:250px; left:250px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:22s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.jupiter_orbit {width:360px; height:360px; border-radius:360px; position:absolute; top:220px; left:220px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:35s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.astoriods.animate { -webkit-animation-name:rotate; -webkit-animation-duration:100s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.saturn_orbit {width:420px; height:420px; border-radius:420px; position:absolute; top:190px; left:190px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:25s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.uranus_orbit {width:480px; height:480px; border-radius:480px; position:absolute; top:160px; left:160px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:55s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

.pluto_orbit {width:540px; height:540px; border-radius:540px; position:absolute; top:130px; left:130px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:70s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}

@-webkit-keyframes rotate {from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) }}
</style>
</head>

<body>
<div class="solarsystem">
<div class="sun sun_position"></div>
<div class="mercury_orbit">
<div class="mercury"></div>
</div>
<div class="venus_orbit">
<div class="venus"></div>
</div>
<div class="earth_orbit">
<div class="earth">
<div class="moon_orbit">
<div class="moon"></div>
</div>
</div>
</div>
<div class="mars_orbit">
<div class="mars"></div>
</div>
<div class="astoriods animate"></div>
<div class="jupiter_orbit">
<div class="jupiter"></div>
</div>
<div class="saturn_orbit">
<div class="saturn"></div>
</div>
<div class="uranus_orbit">
<div class="uranus"></div>
</div>
<div class="pluto_orbit">
<div class="pluto"></div>
</div>
</div>
</body>
</html>

Monday, June 20, 2011

Browser Hacks

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */

Tuesday, July 13, 2010

Remember while designing a website

This article will quickly run you through some of the greatest issues with design for web and hopefully give you something to think about when you start your next web design.

1. Remember you have very little time on your hands

I read somewhere that average page visit throughout the entire internet is only 4 seconds. That doesn't give you enough time to make an impression on the user and get him engaged with your site. That means that you have to be as precise as possible in explaining what the site you are designing is all about. If it takes more than few seconds for user to figure out what the website is all about, he will loose interest and browse away...

2. Remember that user scan the web

When you walk into the room you don't see every single face there. First you only notice shapes of people and stuff that are inside. You scan the room. Then you move on to something that grabs the attention. Similar thing happens with first visit to the website. Users scan it first. This is the point where you need to guide user wherever you want him to go. It can be a login button, learn more button, conversion form, blog post...

3. Up-left corner of the web site is most visible

This is well known fact. The main reason for this is that people read books and articles that way (starting from up left corner) plus the early web sites and applications were designed that way. We often put logo in top left corner, and that is a good thing. But think about adding another element or two up there to make it
more prominent (login link, search from, slogan...)

4. Learn about F pattern
Some eye-tracking case studies proves that users scan the web in a shape of a letter F. Top area gets scanned all the way, middle area half way through and lower area gets scanned only on the left side. Just something to think about when you're having doubts on where to put content blocks in your designs.

5. Learn what users ignore
Users are ad-blind. They learned to ignore banner ads or text ads. Avoid designing anything that looks like an ad. Also, users ignore large blocks of text. Nobody has the time (actually I would say patience!) to read great blocks of text just to get an idea of what the page is about.

6. Text vs graphics
One interesting fact. Text grabs more attention than any cool graphic! If you want to deliver a message to your reader I suggest using a large slogan instead of cool header image...

7. Grab attention with design elements
Good elements for grabbing attention are text slogans, call to action buttons (usually using bright colors), various 1-2-3 steps list or lists in general...

If you're writing a long article one of the most important things are headings. Headings grab attention like nothing else. Use the headings properly, explain the user what the article is about in just those few simple steps.
8. Text Formatting

Text has more chance of being read when it's formatted properly. Don't be afraid to use many paragraphs, bold and italic text blocks, blockquotes, underlined or upper-case text... Anything that makes your text block more visually attractive. Of course, you need to use formatting to emphasize important words or sentences and guide your reader through the article.
9. Use clean graphics

I already mentioned that users are ad blind. When you use graphics in your design make sure that they're not too busy, messy and non-understandable. Many people will find it hard to look at the image that is too busy or colorful. Graphics needs to be clean and non-confusing.

What you can use to grab attention with graphics are people faces, especially when eyes on the photo are looking at the user. Also you can use eyes on the photo to “point” users to a certain direction.

10. Use whitespace
Use whitespace to give some element more visibility. If a certain element is too close to margins or other elements the things will be confusing and messy. Give it some “air to breathe”. This especially applies to text blocks.

by Alen Grakalic

Html 5 and it's Elements

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block) and <footer> (usually referring to bottom of web page or to last lines of html code). Other elements provide new functionality through a standardized interface, such as the multimedia elements <audio> and <video>.Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <font> and <center>, whose effects are achieved using Cascading Style Sheets. There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior.
There is now a consistent level of support for many of the HTML5 features that the average developer might use for progressive enhancement but there are some browsers are there which doesn’t support or partially support html 5 features. Internet Explorer is one of them. Here are the new elements added in HTML5.
<article>
<aside>
<audio>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<header>
<hgroup>
<keygen>
<mark>
<meter>
<nav>
<output>
<progress>
<rp>
<rt>
<ruby>
<source>
<summary>
<time>
<video>

Tuesday, July 6, 2010

Css3 Column count

.columns {width: 600px;
padding: 15px 15px 15px 15px;
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-moz-column-count: 3;
-moz-column-gap: 30px;
}

---------------------------------------------------------------------------------------------

<div class="columns">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae velit tortor, ac dictum eros. Phasellus ut ante ante, a lacinia est. Suspendisse quis velit vitae ligula aliquet porta eget in diam.

Proin nunc velit, fringilla eget pretium ut, ultricies at enim. Cras molestie sem ac dui ornare in accumsan nisi dapibus. Aliquam ac molestie neque. Nam auctor leo nec augue sollicitudin eget mattis enim auctor. Curabitur suscipit elementum turpis, quis facilisis lectus ullamcorper placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mi mauris, ornare at tincidunt eu, pretium mollis turpis. Curabitur interdum facilisis dapibus. Curabitur tortor augue, varius vel tempus in, fermentum nec est.

</div >