Design Aesthetics in Mobile Web Development – Part 2

Design Aesthetics in Mobile Web Development – Part 2

ORIENTATIONS

Most modern mobile devices provide numerous ways to view a web page. Luckily for developers, the operating system of the phone rotates the web browser depending on if the phone is in a horizontal or portrait mode. It’s the responsibility of the developer, however, to handle these events and make changes to CSS as needed.

<script  type=”text/javascript”  language=”Javascript”>

var supportsOrientationChange =  “onorientationchange”  in  window,

orientationEvent =  supportsOrientationChange ? “orientationchange”  :

“resize”;

window.addEventListener(orientationEvent, function()  {

alert(‘We just  detected a screen resolution change!’);

}, false);

</script>

This code adds a document listener for a specific event that occurs across mobile browsers. Unfortunately, this event is not standard so you need to detect which event is on the device you’re using. The first line the JavaScript allows you to detect if the events on orientation change are valid in the current window. If the browser supports this event, then use it; otherwise, the event name will be orientation change or resize.

 After you determine the name of the events of the device, set an event listener. It’s enough to know that the browser logs certain events for JavaScript to pick up and perform an action upon. In this situation, when the device is rotated, the browser emits an event that JavaScript picks up. Every time this event takes place, you are displaying an alert that indicates it has detected an orientation change. In the previous example, you can replace this alert with something that is more useful based on your situation.

FONTS

With older browsers, fonts are pre-installed as part of the operating system. Currently, the standard fonts vary across mobile devices. With modern browsers, developers have a wide range of tools to display different fonts, depending on the design of their web app. These tools use JavaScript to replace the contents of an HTML  element to a special property that is controlled by CSS to display the custom fonts.

For example, Google Web Fonts API provides an easy way to quickly change the default font to something that matches your style and theme. Google Web Fonts have a large range of fonts to choose from.

<html>

<head>

<link rel=”stylesheet”  type=”text/css”

href=”http://fonts.googleapis.com/css?family=Tangerine”>

<style>

body {

font-family: ‘Tangerine’, serif;

font-size:  48px;

}

</style>

</head>

<body>

<div>This is test of  Google Web  Fonts!</div>

</body>

</html>

In this example, a CSS file from Google, with a query string indentifying what type of font you would like to use is loaded in the HEAD section. When opening that link in your browser, you get the following syntax:

@font-face  {

font-family:  ‘Tangerine’;

font-style:  normal;

font-weight:  normal;

src: local(‘Tangerine’), url(‘http://themes.googleusercontent.com/static/fonts/tangerine/v3/ HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff’)  format(‘woff’);

}

Google uses a CSS3 property called @font-face, which allows your HTML  document to contain special fonts that are not locally installed on the users’ machine or device. Once loaded, the special fonts display on the supporting browser. For mobile devices, I recommend that you download these fonts to cache on your own site to maximize performance. It’s important to note the Google Fonts API is compatible with all modern browsers, including Internet Explorer 6 and higher. It’s important note that iOS supports only SVG fonts (which Google Fonts supports). However, other font libraries may not be supported. While Google Fonts is easy and supported, you can only use fonts that they have, so you can’t have custom fonts that you may have purchased or downloaded elsewhere.

Written by imkits