According to Pew Internet Research, one-third of Americans use a cell phone or smartphone to browse the Internet. With this many people discovering the convenience of mobile browsing, it is no wonder major browsers are creating mobile versions.

Most people have a preferred browser they use, whether it is Internet Explorer, Firefox, Opera, Safari, Chrome etc. While others simply use the default browser that their computer comes with. The same seems to be coming true for mobile. Most major browsers now have a mobile version, and of course most smartphones comes with a standard browser, just like computers do.

Opera mini 5 is available on Java phones, Windows Mobile, Android, S60, Blackberry and the iPhone.

So why all the hype about Opera Mini 5? One of the reasons is because of the server side rendering Opera offers. Basically server side rendering is when Opera processes the information sent on the browser through their own servers and then shoot the information back onto the browser page. The cool thing about Opera Mini is that Opera Mini’s servers change the information so it is faster for phones to navigate through. Below is a graphic to help you visualize the process.

This technology is different than Opera mobile, which is more like a computer based browser. “Opera Mobile is a full Internet browser for mobile devices. The full web-rendering engine – Opera Presto – is run on the phone using the phones’ hardware to download and display webpages.”

What it Means for Developers

One thing developers should take note is that javascript has limited support for Opera mini. “Before the page is sent to the mobile device, its onLoad events are fired and all scripts are allowed a maximum of two seconds to execute. The setInterval and setTimeout functions are disabled, so scripts designed to wait a certain amount of time before executing will not execute at all.”

Take into consideration that Opera Mini uses the same layout engine that is included with Opera 9.5—meaning it supports most web standards. With that said, since it reformats web pages it won’t pass the Acid2 standards compliance test.

When developing or designing for mobile in general, not just for the Opera browser, you should be aware of the smaller screen visitors are viewing on. Opera Mini will default to a Small-Screen Rendering (SSR) mode—for any device that has screens that are 128 pixels wide or smaller. SSR reformats the page into one vertical column, this way the user only needs to scroll up and down, not horizontally too.

The user agent string for Opera Mini 5 is below. Some tips Opera gives developers about the string, “It is important to bear in mind that the user agent string’s build or Presto number may be changed in the future, so sniffing for an exact match to any particular user agent string doesn’t always yield the desired results. The Opera Mini/5.x portion of the string is probably the most relevant bit, where x is the minor version number. Also note that in general, Opera can be identified by using JavaScript to test for the window.opera object.”

Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.18635/1030; U; en) Presto/2.4.15

If you are dying to use those CSS3 techniques you have been reading about—mobile gives you that option. Because CSS3 allows you to do media queries, you can set up the code to let the browser figure out what size screen it will be loading to. Because Opera Mini is available on a myriad of phones, you can’t guarantee what size screen it will be going on. If you want to have the browser display for 480 pixel screen you would use the following code:

@media screen and (max-device-width: 480px) {
    //insert CSS rules here
}

Opera Mini 5 and the iPhone

Until April of this year Safari has been the only browser supported on the iPhone. We all know how Steve Jobs can be on certain subjects, and he is pretty particular what Apple approves in the App Store. With that said, after 20 days of deliberation, Opera Mini was given permission to be available in the App Store.

Opera now has the bragging rights to say they are the first alternative browser Apple has allowed on their mobile devices. The secret to their success was due to their server side rendering—allowing Apple “to deem it to not be a Web browser. As Daring Fireball’s John Gruber pointed out, though, Opera Mini doesn’t actually render Web pages. That’s done on Opera’s servers; rather, Opera Mini renders a boiled-down, compressed markup language called OBML, making Opera Mini in some technical ways closer to a PDF reader than to a Web browser,” reports PC Magazine. Because of this, some websites do not read as well in the Opera browser. Below is an example of the same website loaded in Opera Mini 5 (on the left) and Safari (right).

As you can see, because of the server side rendering, you aren’t able to zoom as well in Opera as in Safari. In Opera you have a full in zoom or zoom out feature, where you have a little more “wiggle” room in Safari.

Save Money

Opera also boasts that using Opera Mini 5 can also save you money on your data package. Server side rendering is the reason for this. “Opera Mini uses only a tenth of the bandwidth of other browsers, compressing Web pages by up to 90%. On Opera Mobile, turning on Opera Turbo compresses data up to 80% or leave Opera Turbo off to get full Web site data, as you would on a PC.”

All in all Opera Mini 5 seems to be a great choice. Like most things there are good and bad points, but overall the server side rendering allows for faster load times and a great user experience. Let us know down below your thoughts on the browser and any good or bad points you have experienced.

Since the mid 90’s marketers and companies have been optimizing their sites for search engine optimization. Now SEO has evolved in a way no one could have imagined back then. Smartphones are taking over the mobile market, and most cell phones have access to the Internet.

Neilson is predicting that by 2013, “penetration [of mobile Internet] will reach the halfway mark, and by 2014, 142.1 million users, representing 53.9% of the US mobile user population, will access the internet using mobile browsers or applications.”. With these kinds of numbers it is hard to deny the need for mobile SEO, as it is becoming more and more popular among Internet users.

A Quick Look at SEO History

Image: collectiveclicks

SEO started out very simple, “all webmasters needed to do was submit the address of a page, or URL, to the various engines which would send a spider to crawl that page, extract links to other pages from it, and return information found on the page to be indexed.”

After webmasters found out ways to manipulate their rankings, Google decided to take action and introduce a best practices agreement. Around 2004 Google announced they use more than 200 different signals to populate the search results. Now real time is a factor amount other things such as link building, meta tags and a slew of other tactics.

In 2009 Matt Cutts, announced that Google Bot would no longer treat nofollowed links in the same way, in order to prevent SEO service providers from using nofollow for PageRank sculpting, according to Wikipedia.

The Difference Between Mobile and Web Based SEO

There are many differences between mobile and traditional SEO. This is because the way you surf the Internet on a mobile device is much different than if you would be on a computer. There are less click through options (which is best practices) on a mobile device, and usually less typing involved.

Even the layout of search results are different on a mobile browser, the paid ads are actually in line with the organic ones, but are still labeled as sponsored. Another thing to take into consideration is where you want your mobile landing page to go to. Different keywords may be set up to different pages, to help with fewer click through rates. Remember people searching on a smartphone are usually in a hurry, and don’t want to wait on a page loading, or needing to click around to other pages to find the information they are trying to find.

According to Search Engine Land, “one of the more frustrating differences between the mobile search engines is the number of results they present on the main results page, and the number of results that they will present on the secondary ‘web results’ page. Because mobile search engines are designed more like portals than traditional search engines, they have all come up with a variety of ways to present the information that is yielded from a search result. This can be handy for users but makes tracking and comparison a bit trickier.”

When looking at your mobile analytics, it can be easier to compare search engine to search engine, instead of across the board. A ranking of 6 might be on the first page for Google, but not for Yahoo!.
The bots crawling your mobile site are also looking for different things than a traditional bot. They are looking for your site to render well on different types of phones, and search results can actually vary from phone to phone. To make sure your mobile site renders well on all mobile devices, make sure you are optimizing for multiple user reach not just say iPhone users.

Subdomain or .mobi?

When setting up your mobile website there are a couple options to choose from. Trying to establish itself as the .com of the 90’s, .mobi is has been setting itself up as the domain to use in the mobile realm.

Because this platform is so new, businesses who may have missed out (or couldn’t afford) the domain they hoped for with .com could get it for their mobile site.

Companies that have already taken advantage of the .mobi domain are:

• Balfour Beatty
• Nike
• Target
• Wachovia
• NPR (National Public Radio)

When it comes to mobile SEO, .mobi seems to be a better choice as far as search engines are concerned. This is due to the fact that every .mobi site receives its own Internet Zone File, which are the files that search engines use to start their crawls.

Internet Zone Files in general, are stored in the Internet domain name registry that, “receives domain name service (DNS) information from domain name registrars (in this case .mobi).” The information is then centralized in a database and propagates the information in these files on the Internet so anyone can search for the domain around the world.

Playing devil’s advocate, Inc. Technology’s Marc Saltzman reports that, “"Previously, companies would pursue the creation of mobile sites (.mobi), with much lighter content and faster load times to support first generation mobile browsers, but today, mobile browsers are becoming much more ‘normalized’ in nature and tend to perform similar in results to standard Web browsers."

Using a sub-domain is a viable option for many reasons as well. One being you can use the same analytical tools to go over the data of the site. Because it is part of your original site, you will be able to use the same analytical tools for site analysis.

Using the analytics tool will allow your programmer to see which browsers your mobile visitors are using, which will allow him or her to program the site best for those browsers.

If duplicate content is a concern, there is a way around it. Using a technique called browser-detection and redirection should take care of this for you. This technique will allow the web crawlers to see that this is just a mobile version of your site, and not duplicate content. If you see that the redirection doesn’t seem to be working, a canonical tag will, “push all the value from your mobile site back to your traditional site, and then rely on your browser detection and redirection to take care of the rest.”

If you are unfamiliar with a canonical tag, here is how Google tells you to insert this tag into your site:

“to specify a canonical link to the page http://www.example.com/product.php?item=swedish-fish, create a <link> element as follows:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>

Copy this link into the <head> section of all non-canonical versions of the page, such as http://www.example.com/product.php?item=swedish-fish&sort=price.

If you publish content on both http://www.example.com/product.php?item=swedish-fish and https://www.example.com/product.php?item=swedish-fish, you can specify the canonical version of the page. Create the <link> element:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>

Add this link to the <head> section of https://www.example.comproduct.php?item=swedish-fish.”

On Page Optimization

When it comes to your title tags and meta descriptions it helps to add mobile to the copy. This alerts the web crawlers that your page is being created for mobile browsers. Just like you would for a traditional website, make sure you set up a mobile sitemap. Let the bots know where to go to find information easily. According to Search Engine Land, “Google has a tool that can help you build a mobile sitemap. If you are using multiple markup languages, for instance XHTML and WML you should submit a separate mobile sitemap for each language that exists on the site, and include only the pages that will render in browsers that can read that type of code. Be sure to link to the mobile site map in your robots.txt file, just like you would for a traditional site map.”

An example of a single site map provided by Google is below.

<?xml version="1.0" encoding="UTF-8" ?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
    <url>
        <loc>http://mobile.example.com/article100.html</loc>
        <mobile:mobile/>
    </url>
</urlset>

Just as you should for a traditional website, make sure your HTML code is clean, and not sloppy. This can confuse web crawlers and make your loading time longer than necessary.

Submitting your site to the major mobile search engines is another must. According to Mowbi these are the top places to consider:

• Google XHTML http://www.google.com/xhtml
• Google Mobile http://www.google.com/mobile/
• Yahoo Mobile http://mobile.yahoo.com/search
• MSN/Bing http://home.mobile.live.com/Home.mvc
• AOL Mobile http://mobile.aolsearch.com
• ABPHONE http://www.abphone.com

Local Search

Local search is becoming more and more popular on the web, and for mobile Internet browsing it is even more so. More times than not many people are searching for places to go, or what is around them. How many times have you been out and Googled a restaurant or shopping malls around you on your phone? Chances are if you haven’t you have been with someone who has.

Diving into local SEO is a somewhat new tactic, and Google themselves are making changes often. “In the last couple of weeks, Google has been placing increasing importance on local business listings by experimenting with the placement of the 7-pack listings.” With more and more changes to come, reading up on how you can keep up with Google will be your best for mobile and traditional web.

As the mobile web evolves so will the SEO best practices. These are just some of the many tactics you need to be aware of when optimizing your mobile website. As the search engines evolve, mobile SEO will become more and more a necessity.

This is a small CSS3 trick which can do the Faux Columns trick without using image. The problem with sidebar in layout is it cannot extend automatically full height along with the content. We usually do it by creating an image for background and repeating it the way down for content container. Today, I will show you how we get the same result with CSS3. This technique is using the CSS3 gradient.

The old way

Lets review the way we usually do with the sidebar to make its background color to extend the way down of the page. According to the article from Alistapart, the author used the background image with a few pixels tall. The background image will have the wide background color for content column and one for sidebar column which looks something like

This background should used for container of both content column and sidebar column. Repeating this background vertically is what we always do:

background: url(images/bg.jpg) repeat-y;

It has been together with our design for 6 years. Nice, right?

Using CSS3 instead

CSS3 is awesome when it has gradient property. We can use this property for several purposes which can speed up our website since we use it instead of image. With CSS3, we can generate the background with more than 2 colors. To be concerned with the sidebar thing, we will have 2 colors generated and separated from two sides of the container background. I’ll go with Black and White – The use of white and black would be dramatic lol

The code using (for webkit browsers)

background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.70, #FFFFFF));

“Color-stops” specified above will determine the ending position of each color in gradient. Let make it simple, the “black” goes from right in 70% of the container then stops. Next, the “white” start filling at position 80% of the container. If you dont assign the postions to stop colors, default will %50.

Now, the trick, let them meet each other at the same position:

background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.30, #FFFFFF));

Now, this is the result

The color-stop above indicates that the left side should have black color at the point 30% of the gradient length, and the continue to fill the black color, but the black start filling color at the position 30% as well and it doesn’t have the space for two colors blending.

For Firefox:

background: -moz-linear-gradient(right center, #000000 30%, #FFFFFF 30%);

Some notes

Because Opera doesn’t support gradient at all, this technique won’t work in Opera browser. As well as Internet Explorer, its gradient filter doesn’t have color-stop function, so, this cheat will work in Firefox and Webkit browsers only.

However, since CSS gradient can be used anywhere an image can be used, we can use fallback to background image if the browser doesn’t support.

background: url(images/bg.jpg) repeat-y;
background: -webkit-gradient(linear, right top, left top, color-stop(0.30, #000000), color-stop(0.30, #FFFFFF));
background: -moz-linear-gradient(right center, #000000 30%, #FFFFFF 30%);

So, we will continue to wait when all the browsers support this technique, then we can fully say goodbye to background-image for our sidebar.

Today, we are going to release the first icon freebie for our readers on AEXT.NET MAGAZINE. There will be a series of icon sets which is exclusive for AEXT.NET. This is a set of slick and light social media icons designed by IconShock, a great icon studio. You can download them absolutely free here at AEXT.NET.

About IconShock

Iconshock is one of the biggest icon studios, with a huge collection of more than 800.000 high quality stock icons in more than 300 icon sets. They also allow visitors to download free high resolution icons which are released daily. Check them out!

Download for free

These icons are absolutely free to download. Feel free to use them for personal or commercial projects. They come in 2 sizes PNG format with two different sizes – 48 x 48px and 128 x 128px. No re-distribution allowed! If you’d like to share this set of icons, help us spread the word by linking back to this original page.

• Download Type: PNG
• Download Size: 209 KBs
• Download Link: Social Media Light Icon Set

We will continue to release more freebies for our readers, stay tuned!

Apart from their influence on the buying behavior of people, album covers also provide a place where both musicians and designers can express their art. But the music is always more important than the packaging – as it should be. Enjoy the great examples of album cover artwork design which are really useful for inspiration.

Muse – The Resistance

Muse – Origin of Symmetry

Biffy Clyro – Infinity Land

Biffy Clyro – Puzzle

Coldplay – X&Y

Green Day – American Idiot

Drogatones – Rico

Mando Diao – Give Me Fire

Metallica – Death Magnetic

The Killers – Day&Age

The National – Alligator

The National – High Violet

The National – Sad Songs for Dirty Lovers

You Me At Six – Hold Me Down

You Me At Six – Take Off Your Colours

Michael Jackson – Dangerous

Keane – Under The Iron Sea

Jónsi – Go

Caribou – Swim

Gorillaz – Plastic Beach

Pink Floyd – Dark Side of the Moon

The Rolling Stones – Some Girls

Led Zeppelin – Mothership

The Who – Then and Now

Sportfreunde Stiller – MTV Unplugged in New York

Pink Floyd – The Wall

Pink Floyd – Wish You Were Here

Nirvana – Nevermind

Wolfmother – Cosmic Egg

Paramore – Brand New Eyes

Yeah Yeah Yeahs – It’s Blitz!

Jamie Cullum – The Pursuit

Michael Jackson – This Is It

The Rolling Stones – Tattoo You

The Academy Is… – Almost Here

The Starting Line – Direction

Sugarcult – Start Static

Paramore – Riot

Nickelback – Silver Side Up

The Beatles – Love

Watch out for upcoming sequels!