Responsive website design matters?


Why responsive website design matters

Responsive design allows the creation of a website that reformats its contents depending on what device it is being viewed on.

Clearly, a website will look and behave very differently on a 27-inch desktop monitor than on a 9-inch tablet PC.

Responsive design has a number of key advantages for small businesses:
  • Content can be created once and delivered to multiple devices
  • The user experience is the same no matter which device accesses the site's content
  • As consumers increasingly use mobile devices to shop, responsive design can ensure this activity is familiar on a desktop, phone or tablet
  • With over half of the UK's population now owning a smartphone, content must be optimised for this channel
  • Marketing opportunities can be enhanced with complementary services all delivered instantly across all customer touch points.

Code example of Responsive web design using CSS3 Media Queries

imageWith the introduction of CSS3 media queries, web developers can create CSS which enables a web page to adapt and respond to whatever device renders it.  Creating a responsive design, one where elements on the web page are fluid, has never been simpler.  If you have a basic understanding of CSS, then you possess all the skills required to get started with your own responsive design. 


The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to support various device display properties.  As the name suggests, this design technique allows a web page to respond in real time to both a users behavior (browser window size), and device platform (including orientation).
 
 
 
Code example of a responsive web page
 
As you will see... my example is bias to the dimensions of Apple's iPad and iPhone, but you can certainly adapt my sample CSS to any device width or height that is meaningful to your target audience.  For this learning example I created a simple design that consists of a banner, with a main text area that is bordered by 3 widgets on the right.   The example will make use of three media queries.
 

Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)

Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)

Portrait smart phone
@media (max-width: 320px)
 
 
Start by creating the standard CSS classes and setting default properties.  I marked-up my CSS defaults to support both desktop and landscape tablets by limiting the major elements to a width of 1000px.

<style  type="text/css">
#banner {
   margin-left:auto;
   margin-right:auto;
   width:1000px;
}
.
.
.
.widget-text {
   padding:10px;
   background-color:#FCFCFC
}
</style>


The media queries
 
Next create the media queries for each screen dimension your interested in supporting (responding to).   Media queries are exactly like any other CSS element,  you are simply providing an alternative set of CSS properties for the existing elements on your web page.  The browser will respond by calling the proper @media each time the web page is loaded or a user re-sizes the browser window.  Here are the three media queries I added support for:

<style  type="text/css">
@media (min-width: 481px) and (max-width: 768px) {
   #banner { width:740px; }
   #banner img { max-width:740px; max-height:222px; }
   #main { width:740px; }          
   #main-content { width:450px; float:left; }
   #widget-container { width:200px; float:right; }
   .widget-content { width:160px; }
}

@media (min-width: 321px) and (max-width: 480px) {
   #banner { width:450px; }
   #banner img { max-width:450px; max-height:135px; }
   #main { width:450px; }          
   #main-content { width:400px;}
   #widget-container { width:400px; }
   .widget-content { width:120px; margin:5px; float:left;}
   .widget-text { display:none; }
}

@media (max-width: 320px) {
   #banner { width:275px; }
   #banner img { max-width:275px; max-height:83px; }
   #main { width:250px; }          
   #main-content { width:250px;padding:0px;}
   #widget-container { width:250px; padding:0px; }
   .widget-content { width:250px; margin:5px;}
   .widget-text { display:none; }
}
</style>


Media queries enable my example to support landscape and portrait mode cleanly
 
                  image  
 
 
 
Hints and Tips
 
Important!  Set the following META keyword to force the device viewport to maintain the correct scale.  Failure to include this META will result in your UI being pinched: 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
 
You can optionally configure webpages saved to the iphone's home screen to launch using WebKit directly.  This will remove the Safari web browsers address bar & bookmarks bar giving your web page a native appearance:
<meta name="apple-mobile-web-app-capable" content="yes" />
 
Optionally provide a thumbnail image to represent bookmarked pages in iPhone: 
<link rel="apple-touch-icon" href="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/dw-phone.gif" />
 
 
 
 
Next steps
image
 
You can run this example by clicking here.  As you resize your browser window to different widths you will see the media queries adapt and flow the web page.  You can download the complete HTML and CSS of this example by clicking here.  

Media queries are not a total answer to mobile views, as they don't address page weight issues, which is another major consideration for mobile design.  Hiding a div or resizing an image has no impact on their contribution to overall page weight, as elements set to display:none are still part of the DOM, and simply hidden from displaying visually.

However, by starting with a sound minimal design, leveraging media queries can result in a workable mobile solution for your website.  The key is careful thought to page elements, image sizes, and overall copy content.    

For the entire definition and specifications on media queries,  please visit the W3C Media Queries module.
 
Source: IBM.com

HTML5 Hybrid Apps

Mobile Apps built with HTML5 are great... when the mobile device you're targeting can support all of the features you need for delivering a top flight user experience. To help the rubber meet the road, you sometimes need libraries to access native OS capabilities like the camera and you could use an accelerated canvas to deliver powerful and responsive mobile apps!  Learn how the polyfill libraries and Intel’s accelerated canvas can do exactly what is needed!

Introduction to Polyfills

On a beautiful day in the near future, every browser will be able to access the latest and most powerful technologies the second they are dreamed up at the W3C. Using only W3C standard HTML and JavaScript, you’ll be able to access every native piece of hardware. All the enterprising developer will need is HTML and JavaScript skills to code any app they can imagine.
Unfortunately, this isn’t the world we live in right now. If you want to create a modern installed HTML5 app, you’re going to need some polyfills to make a hybrid app.
A polyfill is a piece of code that bridges what the browser is capable of out-of-the-box and what you need it to do. There are two main kinds of polyfill libraries. There are compatibility polyfills that add support for new W3C technologies to browsers that don’t understand them by default, and there are polyfills that add APIs to JavaScript to access native operating system resources.

Using Compatibility Polyfills

Most mobile browsers are capable of more modern capabilities than the current low-watermark for compatibility on the internet, Internet Explorer 8. Many features of HTML5 and CSS3 are functional and have been working since Android 2.2 with a few exceptions like SVG (Scalable Vector Graphics) and DataList support.

Using a Polyfill for SVG Compatibility

SVG is extremely helpful in rendering complex charts and beautiful multi-colored icons that look great on high resolution screens. Android devices prior to 2.3 don’t support SVG. If you need to render SVG graphics on an older Android device, canvg.js can help you out. All you need to do is declare a canvas in your HTML and make a one line JavaScript call to canvg to load and render your SVG.

<canvas id="YourIcon" width="32px" height="32px"></canvas>
<script language="text/javascript">
canvg('YourIcon', 'IconFile.svg');
</script>

Using a Pollyfill for Tag Support.

The DataList tag is very useful in providing suggestion list driven text boxes. Neither Android nor iOS web browsers support this tag. The jquery.datalist plugin comes to the rescue. This particular plugin even allows you to structure your HTML as you would a normal HTML5 datalist and just add a single JavaScript call to your web page to progressively add in support:
$('input[list]').datalist();
The above jQuery call will find all of the HTML5 DataLists on the page, then apply the data list effect via progressive JavaScript enhancement.

Accessing Native Capabilities Using Polyfills

Many HTML5 apps installed on mobile devices need to access native hardware capabilities of the device that are not typically exposed to the browser. The Cordova and AppMobi APIs provided by the Intel XDK New enables the creation of a hybrid app that can bridge the gap between what is typically exposed to the browser and the native hardware on the device.
The Intel XDK New is a recent entrant into the area of multi-platform HTML apps. Intel brought together a portfolio of leading products category leading technology like AppMobi, Impact.js, Cordova and more to deliver an end-to-end experience of native capabilities exposed to more cross-platform friendly HTML and JavaScript.
One of the key goals of the Intel XDK New is to provide that native compatibility polyfill capability between your HTML5 app and the kinds of native resources necessary to deliver a full featured application. The polyfills in the Intel XDK New allow you to take pictures, scan barcodes, access contacts on the device, sign on to OAuth apps like Facebook, play media and access the device’s accelerometer. In this article, we’ll take a look at accessing the device’s camera and accelerometer as well as how to turbocharge your graphics with the accelerated canvas.

Camera and File Upload

One of the most common pieces of native hardware access necessary for a mobile app is access to the device’s camera. For example, if you wanted to add the ability for your app to take a picture of the user to use for their avatar, you would need a way of accessing the device’s camera.

The W3C standard APIs for web RTC (Real-Time Communications) that would provide native camera access are still evolving and even once fully evolved might still prove impractical on a mobile device’s interface compared to launching the device’s native camera app. The AppMobiTakePicture” API launches a device’s native camera app and allows the user to take a picture. Once the picture has been taken, your app will come back into the foreground and can return a URL (file://path/on/device.jpg format) for accessing the image file.
Once your app has a reference to the file on the local disk, you can pass it to an IMG tag to display it or you can use another polyfill to upload the file to a web server. Although there are standard JavaScript APIs to do file uploads across the internet, it might not work if you use one of the APIs that provides progress reporting. The AppMobiuploadToServer” API takes care of the compatibility layer to upload the file and report progress back to your application.

function CapturePhoto() {
document.addEventListener("appMobi.camera.picture.add",PicDone);  
AppMobi.camera.takePicture(70,//Quality between 0 and 100
false,//Save to device’s library
"jpg");//jpg or png
}
function PicDone (e) {
if (e.success)
{
var urlToPic = AppMobi.camera.getPictureURL(evt.filename);
            AppMobi.file.uploadToServer(urlToPic,
"http://www.yourserver.com/uploadImage.php", //url
"", //folder
"image/jpeg",//mime type
"ProgressUpdated");//callback
}
}
function ProgressUpdated(bytesSent,totalBytes)
{
      var progress = 0;
if(totalBytes>0)
{ progress =(bytesSent/totalBytes)*100; }
$('#ProgressDisplay').html(progress +"%");
}

Working with the Accelerometer

The accelerometer on mobile devices measures how the device is moved in 3D space. This can be used to add an additional layer of interaction for your users beyond just pressing on the screen. You can use the accelerometer to allow the user to scroll by tilting the device or clear the screen like an etch-a-sketch by shaking it. Many games use the accelerometer to turn the whole device into steering wheel to fly through imaginative worlds.
To take the hybrid app approach to access the accelerometer using the polyfill in the Intel XDK New, register an event handler with AppMobi.accelerometer.watchAcceleration. Your function will be passed an object containing the device’s X, Y, and Z position. When you register your event, you will also need to define how frequently you want your function called to measure the accelerometer. If you set it too infrequently it will feel unresponsive, if you set it too frequently it will take up too much CPU time.
The code example below registers a handler for the accelerometer to report the device’s position 24 times per second. Feature films run at 24 frames per-second and most casual games work well at this frame-rate.
AppMobi.accelerometer.watchAcceleration(function(acl) {
$('#ACLStatus').html('x: '+ acl.x
+'y: '+ acl.y
+'z: '+ acl.z);
}, { frequency: 24 });//Report 24x per second

Note: To test out your app before loading it on a real device, the Intel XDK New includes the built-in capability to simulate device movement by either entering numeric values for tilt or dragging a 3D version of the phone around.

Accelerated Canvas

The HTML5 canvas element provides a drawing surface for you to be able to draw anything you want on-screen. For most purposes, the normal canvas tag provides the capabilities you need with adequate performance but if you are developing games you need a higher performance solution. This is where the accelerated canvas comes in.

The normal canvas element runs inside of the browser where every pixel must be evaluated to see if there is something above it, below it, if someone is clicking it, etc. All of this capability comes with overhead. With the accelerated canvas, you lose this functionality in exchange for up to ten times faster drawing performance. The net effect is you can create rich graphics games, cross platform, with near native performance.

To use the accelerated canvas in the Intel XDK New, you don’t create an HTML page with a canvas tag on it. Create your app with a single html page with no content in the BODY tag. Then call “AppMobi.canvas.load('YourCanvasScript.js')”. This will initialize the accelerated canvas in full screen mode. The script file you pass the load function to will run inside of the accelerated canvas.

This designation of “inside of accelerated canvas” and “outside of accelerated canvas” code is important because the code that is running inside of the accelerated canvas can’t communicate with the regular HTML page directly. To call a function on your canvas from your HTML page, execute “AppMobi.canvas.execute('YourCanvasFunction()')”. To call a function on your HTML page from the canvas side, execute, “AppMobi.webview.execute('YourPageFunction()')”. The canvas itself doesn’t have the ability to have elements on it that can receive events so the communications between the HTML and accelerated canvas layers is critical.

From an API standpoint, the only other major differences between the API used for a normal canvas and the accelerated canvas is how you get the context and the necessity to call “present()” when you are done drawing the frame. On a typical HTML5 canvas element, as you call each drawLine and fillRect, the canvas is updated when you make the API call. The accelerated canvas gains efficiency by drawing off-screen then painting the entire frame to the user interface when you call “present()”.
The example below creates a context reference to the accelerated canvas, draws a red rectangle then calls present to paint the canvas to the screen.
var context = AppMobi.canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0,0,100,100);
context.present();
For more information on how to get started with the accelerated canvas, check out the Game Interface Implementation guide on Intel’s web site.

Conclusion

Cross-device HTML5 development allows you to write your code once and run it everywhere from the internet to the latest and greatest mobile devices. Careful use of polyfills like the ones in the Intel XDK New allow you to make a hybrid app and access everything your app needs to be able to do in between what HTML can do out-of-the-box and native capabilities.
This article was reprinted from htmlgoodies.

Add Scripting an HTML5 Web Application Using the Maqetta Editor

This article is a continuation of Implement the Dojo DateTextBox Control In an HTML5 Web Application Using the Maqetta Editor . In that tutorial, we learned how to work with Dojo DateTextBox control properties to change the date display format, wrote validation code, and got better aquainted with the Palette and Property tabs of the Maqetta editor. In today's follow up, we'll be adding the code to calculate the years of service based on the start and end dates, as well as how to control the visual aspects of our web app, including the form layout and theme.

Calculating the Years, Months, and Days

In the last instalment, we were left with a call to calcYearsMonthsAndDays() that was not fleshed out. Now it's time to delve into that, starting with the calcYearsMonthsAndDays() method:
?
1
2
3
4
5
6
function calcYearsMonthsAndDays(startDate, endDate) {
   var yearsOfService = dateDifference(startDate, endDate);
   dojo.byId("lblYears").innerHTML = yearsOfService[0];
   dojo.byId("lblMonths").innerHTML = yearsOfService[1];
   dojo.byId("lblDays").innerHTML = yearsOfService[2];
}
CalcYearsMonthsAndDays() calls a function called dateDifference() that returns a three element array consisting of the years, months, and days. Each of these date parts are then displayed in their respective labels. That part is simple enough. The real work takes place in the dateDifference() function, which I adapted from a Java method. Luckily, very few changes were required to convert it to JavaScript:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function dateDifference(d1, d2) {
  var fromDate,
      toDate,
      year,
      month,
      day;
   
  if (d1 > d2) {
      fromDate = d2;
      toDate   = d1;
  }
  else {
      fromDate = d1;
      toDate   = d2;
  }
   
  var increment = 0;
  if (fromDate.getDate() > toDate.getDate()) {
      increment = fromDate.getLastDayOfMonth();
  }
   
  if (increment != 0) {   
    day = (toDate.getDate() + increment) - fromDate.getDate();
    increment = 1;
  }
  else {      
    day = toDate.getDate() - fromDate.getDate();
  }
   
  //month Calculation
  if ((fromDate.getMonth() + increment) > toDate.getMonth()) {  
    month = (toDate.getMonth() + 12) - (fromDate.getMonth() + increment);
    increment = 1;
  }
  else {   
    month = toDate.getMonth() - (fromDate.getMonth() + increment);
    increment = 0;
  }
   
  //Year Calculation
  year = toDate.getFullYear() - (fromDate.getFullYear() + increment);
   
  return [year, month, day];
}
The last date function is getLastDayOfMonth(), which I included to take advantage of JavaScript Rollovers. In a nutshell, whenever you set a date component - such as the year, month, or day - to a value that exceeds the maximum for that field type, overflowing causes the entire date to change accordingly rather than throw an error. For instance, setting a month of 12 (months are zero based) will set the date to January of the following year. Even more advantageous, is the effect triggered by setting the day to zero. It rolls back the date to the last day of the previous month, allowing us to easily determine the length of a given month:

1
2
3
4
5
6
Date.prototype.getLastDayOfMonth = function() {
   var dt = new Date(this);
   dt.setMonth(dt.getMonth() + 1);
   dt.setDate(0);
   return dt.getDate();
};

Tweaking the Form Layout

The form is fully functional at this point, but we can make it look more professional through a combination of layout and CSS styling.
Dojo, always known for their impressive array of widgets, offers a control called a Border Container. Ostensibly used for page layouts that contains sidebars and/or headers, it's comprised of a center panel and four optional borders along its sides:
If we drag it into an form on the design pane, we can then place the title in the top border, the start and end date labels in the left border, the start, end date, and Calculate button controls in the center area, the Weekday info in the right panel, and the Years, Months, Days, and messages output in the bottom border. Now our form has a more esthetically pleasing layout:
Now that image of the final layout took a bit of maneuvering to arrive at. A general sizing can be arrived at by clicking on individual sections of the layout and then dragging the borders. For more fine-grained tuning, you can enter exact numbers in the layout section on the right. You can always edit the HTML markup directly by choosing the Source layout instead of Design. Alternatively, the Split-H and Split-V design layouts show both the WYSIWYG Editor and Markup panes simultaneously. In either of those modes, clicking on source code will highlight the page element that it pertains to in the Design Editor. Likewise, selecting a page element will highlight the relevant code in the Markup pane:
That can be really useful for getting a look at all of an element's properties at a glance.

Overriding a Theme

When you create a new project, Maqetta defines a CSS Theme that best suits the project type. Web Applications for instance, implement the Claro Theme (There is also a Sketch Theme). We are free to change parts of the default themes or even create a new one from scratch. Personally, I like to use the original theme as a basis for my own. To do that:
  1. Click the Create button at the top-center of the screen and select Theme... from the menu.
  2. In the New Theme dialog, select a theme to clone. For Web apps, the usual starting point is claro or claro2.
  3. Give your theme a name, and click Create to save it.
  4. To configure your theme, click the Open button, located beside Create, and choose Theme Editor... from the list.
  5. On the Open Theme dialog, select your new theme from the list and click Open.
All of the supported widgets are displayed and divided into three sections: Global Styling, Primitive Widgets and Container Widgets. Clicking on any widget selects it so that its properties can be configured in the Properties palette.
Let's change the font color for all document elements.
  1. Select the Generic text widget at the top of the editor, under Global Styling.
  2. Open the Fonts and Text section of the Properties palette.
  3. Set the font color to blue. Notice how the text for all the widgets in the editor turns blue.
  4. Click on the Save button on the toolbar to commit your changes.
Now we'll change the Selected Date color for the Calendar control.
  1. Click on a date in the Calendar widget. That will display its subwidget panel.
  2. Open the Background section of the Properties palette.
  3. Select the Color picker... from the background-color dropdown and change the color (I chose #6fc7dd [aqua]). After clicking OK, the selected date in the calendar will be updated to reflect your changes:
    4. Once again, click on the Save button on the toolbar to commit your changes.

Try It Out

Hit the Preview in Browser button in the top-right corner to view the app in the browser. Go ahead and pick a start and end date, then press the Calculate button to see the results:
Success! Retirement is just around the corner...sort of...

Canvas Markup Element with HTML5

To support rich graphics, the HTML5 specification introduces the canvas markup element (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-canvas-element). The canvas markup element is intended for use where embedded content is expected. The canvas element supports a resolution-dependent bitmap canvas and can be used to render graphs, art, graphics and images on the fly.
The canvas element supports content which can be used as the element's fallback content in case the browser does not support rendering canvas elements. The specification recommends that the content represent the same intent as the canvas' bitmap.
Canvas markup element can be used in both interactive visual media as well as non-interactive (static) visual media. Here is a breakdown of what the canvas element represents in various scenarios.
Type of media
Scripting enabled (Y/N)
What does canvas element represent? (if canvas elements are supported)
Interactive visual media
Yes
Embedded content consisting of a dynamically created image, the element's bitmap
Non-interactive visual media
Yes
Embedded content with the element's current bitmap and size
Interactive visual media
No
Fallback content
Non-interactive visual media
No
Fallback content

A simple canvas element can be declared with the following markup.
<canvas id="mycanvas" width="200" height="400" ></canvas>
Once you have the canvas element, you can specify a rendering content bound to it.
The canvas context mode (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#concept-canvas-context-mode) has a default value of none, and supports other values: "direct-2d", "direct-webgl", "indirect" and "proxied".

JavaScript can be used to get the rendering content of a canvas by calling the getContext("2d") api.
Let us create a simple HTML5 page where we will use the canvas markup element to draw a line and to fill a rectangle. The HTML code for this is as under:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<title>Canvas sample</title>
<body>
<article>
<header>
<h1>Canvas sample</h1>
<p>The sample using Canvas markup element</p>
</header>
<canvas id="mycanvas" width="200" height="400" ></canvas>
<button id="buttonDrawLine" type="button" onclick="buttonDrawLine_click()">Draw Line</button>
<button id="buttonFillRectangle" type="button" onclick="buttonFillRectangle_click()">Fill Rectangle</button>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
<script type="text/javascript">
function buttonDrawLine_click()
{
var c=document.getElementById("mycanvas");
var context=c.getContext("2d");
context.moveTo(0,0);
context.lineTo(200,400);
context.stroke();
}
function buttonFillRectangle_click()
{
var c=document.getElementById("mycanvas");
var context=c.getContext("2d");
context.fillStyle="#F00000";
context.fillRect(0,0,200,400);
}
</script>
</body>
</html>

As you can see, we have a "mycanvas" element and two buttons. To draw a line, we get the context, set it to center at coordinates (0,0) and call lineTo() and stroke() api on the context to render the line.
To fill the rectangle, we call the fillRect() api on the context.
When you render the page in a compatible browser (latest version of IE, Chrome, Firefox), the page will appear as under.

After we click on the Draw Line button, it will render as under.

And when we click on Fill Rectangle, the page will render as under:

When we click on Draw Line again, we will render a line on top of the rectangle.


If you are having trouble following along, you can download the HTML code from <download link>.

How To Create Buttons Using Textures with CSS3

In this article we're going to look at a simple method of creating buttons using CSS3 and textures. While it's possible to do a lot of styling with code, you can really geek yourself out and create really cool, but time consuming projects. My recommendation is to use code for some effects, then at a certain point (which only you as the designer can determine), I recommend using image illustration or photo manipulation programs such as: Adobe Photoshop, Illustrator, CorelDRAW, PHOTO-PAINT, Paintshop Photo Pro or GIMP to create the components. When it comes to textures, you can use free textures online, royalty free textures or create your own, using software. My program of choice is Corel PHOTO-PAINT X5 (part of the CorelDRAW application) because the texture creation options are amazing and virtually unlimited. If you've never used PHOTO-PAINT, here's a quick tutorial to get you started (this is with PHOTO-PAINT X5). With the program running, go to File: New.
n the Create a New Image dialog box, use the following settings: Width: 150px Height: 30 px Measurement: Pixels Resolution: 96 dpi Color Mode: 24-Bit RGB Click on OK.
Next, you'll learn how to create textures. Click on the Fill tool (F) on the lower left to activate it, then go up to the menu bar and click on the blue textured icon. To the immediate right of that is the Edit Fill icon. Click on it to open the Texture Fill dialog box. Note: To the right of the Edit Fill icon, you'll see several settings. For now, leave those at the default. Later, when you've chosen a texture, you can experiment with transparency, layering, and more.
This is where the magic begins. At the top left you have access to the Texture library, where you'll find a rich assortment of textures. On the top right, you'll see the texture number when you click on the Preview button on the lower left. Clicking on that will change the texture and the colors on the lower right. You'll also see the texture number change. You can now set the colors on the lower right manually. When you're satisfied with your texture, click on OK. This will take you back to the workspace. To apply the texture, hover your cursor over the white space in the image file you created. You'll see that it turns into a paint bucket icon. Click to apply the texture. After that, you can experiment with the tolerance, transparency and merge modes. Once you get started you'll find it to be quite addictive. You'll be able to create some really cool textures for your projects. Once the texture is done, it's time to create a simple button with a hover. Note that for this tutorial, I've used Adobe Dreamweaver CS6 to put everything together. The first step is to create a rectangular button shape with background image and some text inside it. In this case I set the size of the texture to match the CSS dimensions below: 
#button { 
width: 150px; 
 height: 30px; 
 background-image: url(redfoil.jpg); 
font-size: 14px; 
font-family: Tahoma, Geneva, sans-serif; 
 font-weight: bold; text-align: center; 
}
and here's the HTML

<div id="button">
<ul>
<li><a href="index.html">BUY NOW</a></li>
</ul>
</div>

Here's the end result. As you can see, we have a dark texture here and we have to lighten the text, center it and so on to get the effect we're after. For the next step I'm going to add a border and the CSS3 border-radius property.

#button {
     width: 150px;
     height: 30px;
     background-image: url(redfoil.jpg);
     border:2px solid black;
     border-radius: 10px;
     font-size: 14px;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: bold;
     text-align: center;
}
And here's the result. In the next step we're going to remove the bullet point and set the position of the text in the button.

#button ul {
     height: auto;
     padding: 6px 0px;
     margin: 0px;
}
This is the result. Now we're going to remove the underline of the text and change the font color.

#button a {
     text-decoration: none;
     color: #FFF;
}



As you can see, the button is really starting to take shape. Our final step is to apply the CSS3 opacity property. Note that 1.0 indicates full opacity and numbers less than 1.0 indicate various levels of opacity. Note also that this property also affects the text, so when you use this property, you need to take care not to overdo the effect. Here's the code:

#button:hover {
        opacity:.8;
}
</style>
Here's the look of the button with the hover to the right. Here's all of the code used in this article: Untitled Document Conclusion Creating a button in this way only scratches the surface of what you can do with CSS3. In the resource section you'll find one resource for great button design. As you'll see, there are many options and you can spend many hours experimenting with different layouts and designs. Have fun!

Ubuntu Linux enters the smartphone wars

phone-naturally-neat
Say hello to Ubuntu for smartphones. The bits will be out shortly, phones running it will appear late this year or early next year.
Instead of going after both the tablet and smartphone with a newly-improved touch-enabled version of Ubuntu Linux, Canonical will be focusing its efforts in 2013 on smartphones.
While the smartphone interface is clearly based on Ubuntu's Unity interface, it's not just the same old desktop shrunk down to a smartphone. According to Canonical, the smartphone Ubuntu will use "all four edges of the screen for a more immersive experience. Ubuntu uniquely gives handset OEMs and mobile operators the ability to converge phone, PC and thin client into a single enterprise superphone."

“We expect Ubuntu to be popular in the enterprise market, enabling customers to provision a single secure device for all PC, thin client and phone functions. Ubuntu is already the most widely used Linux enterprise desktop, with customers in a wide range of sectors focused on security, cost and manageability” said Jane Silber, Canonical's CEO in a statement. “We also see an opportunity in basic smartphones that are used for the phone, SMS, web and email, where Ubuntu outperforms thanks to its native core apps and stylish presentation.”
This new version of Ubuntu will be "aimed at two core mobile segments: the high-end superphone, and the entry-level basic smartphone, helping operators grow the use of data amongst consumers who typically use only the phone and messaging but who might embrace the use of web and email on their phone. Ubuntu also appeals to aspirational prosumers who want a fresh experience with faster, richer performance on a lower bill-of-materials device."
At the same time, this isn't just a smartphone operating system. Jono Bacon, Ubuntu's community manager, added on his blog. that "Ubuntu for phones is not just limited to just the Operating System on the phone screen itself. Ubuntu also has the technology, as demonstrated with Ubuntu For Android, to boot a full Ubuntu desktop from the phone when it is docked with a screen. This provides a complete Ubuntu experience in your pocket, for both your phone and your desktop, with a clean consistent look across both screens, and with all your content available on your phone and desktop using Ubuntu One. This is revolutionary."
converged-Ubuntu-device-440x267
With the new Ubuntu, you will be able to literally have your desktop in your phone.

The Ubuntu handset interface will include the following features:
1. Edge magic: thumb gestures from all four edges of the screen enable users to find content and switch between apps faster than other phones.
2. Deep content immersion - controls appear only when the user wants them.
3. A beautiful global search for apps, content and products.
4. Voice and text commands in any application for faster access to rich capabilities.
5. Both native and web or HTML5 apps.
6. Evolving personalized art on the welcome screen.
Bacon added, "The design and implementation of the phone is beautiful You can immediately tell it is Ubuntu; the Unity mobile experience looks clean and consistent with the desktop and touch is stunningly integrated. The Ubuntu for phones experience is designed to make all your phone content easier to access and your apps more immersive – every edge has a specific purpose, making all your apps, content and controls instantly accessible, without navigating back to the home screen every time. It’s a uniquely, beautifully converged experience."
For better or worse, Canonical will also be offering "compelling customization options for partner apps, content and services. Operators and OEMs can easily add their own branded offerings. Canonical’s personal cloud service, Ubuntu One, provides storage and media services, file sharing and a secure transaction service which enables partners to integrate their own service offerings easily."
This offering isn't aimed for smartphone modders Instead, it's for OEMs and carriers. "Canonical makes it easy to build phones with Ubuntu. The company provides engineering services to offload the complexity of maintaining multiple code bases which has proven to be a common issue for smartphone manufacturers, freeing the manufacturer to focus on hardware design and integration. For silicon vendors, Ubuntu is compatible with a typical Android Board Support Package (BSP). This means Ubuntu is ready to run on the most cost-efficient chipset designs."
Bacon added, "To be quite clear, this announcement is not for a physical Ubuntu Phone that you can purchase yet. The announcement is for the Ubuntu for phones platform that we are presenting to handset operators and OEMs as a solution that they can bring to market. The Ubuntu phone offers great performance on handsets with a low bill of materials, while opening up new opportunities for phone and PC convergence at the top end of the market. This is no mockup or flash demo though; this is a real platform, and you have to see it in action…it really is stunning."
That said, according to Mark Shuttleworth, founder of Ubuntu and VP of Products at Canonical, "Users with unlocked phones, starting with Galaxy Nexus phones, will be able to run Ubuntu."
Shuttleworth also believes that "Canonical is uniquely placed with a single operating system for client, server and cloud, and a unified family of interfaces for the phone, the PC and the TV." And that, “We are defining a new era of convergence in technology, with one unified operating system that underpins cloud computing, data centers, PCs and consumer electronics." Specifically, Shuttleworth, in a press conference, said that eventually "a single Ubuntu image will be able to run with a smartphones, tablet, TV, or desktop face." He hopes that this universal version will be available in April 2014 with Ubuntu 14.04.
In a press conference, Shuttleworth added that he's well aware that smartphones is a "hotly contested" area but he believes that Ubuntu has unique advantages for both end-users and developers. "We have ample evidence of interest from both carriers and OEMs." Shuttleworth added that Ubuntu for Android will ship in 2013 will ship from a brand-name phone vendor. Ubuntu for smartphones is expected to ship in the last quarter of 2013 or first-quarter of 2014. Canonical will be showing off this new spin on Ubuntu at CES in the next few days.