mobile

Watch Flash content on your mobile device...without Flash!

Francisco — Wed, 02 Jun 2010 20:49:02 +0000

This could be a game changer, a way around that pesky nuisance of not being able to view Flash on your mobile device, and a big middle finger to the squabble between Apple & Adobe. Smokescreen is a new app (javascript code? or whatever) that will allow you to convert your Flash file into HTML5/Javascript content. That's right, no more Flash plugin needed and viewable on any device that supports HTML5 & Javascript (hello iPhones & iPads). Even better yet, Smokescreen will be open source and free! I can't wait to start using it.

Check out this demo on the iPad:

Smokescreen - iPad demo #1 from Chris @ RevShockAds on Vimeo.

See more demos on their website

About the author

Hi readers!
I'm a Graphic Designer in New York City (Brooklyn!). NY is a hub for design and my posts will try to focus on, but will not be limited to, design related things happening in NY, such as museum exhibits, architecture, events, local artist interviews, galleries, etc. I'm very much into technology and art and how they intersect to make multimedia art installations. Hope you enjoy my posts!
Check out my blog Distracticon.com
My site: www.franciscog.com
Follow me on Twitter

Mobile Web Design

alessandra — Fri, 19 Mar 2010 04:08:39 +0000

Adjusting a site for the mobile environment is a great challenge. A lot of techniques you are used to applying on web design would not make any sense on mobile, and vice-versa.

Mobile is a great place to try new things with different limits. People using the mobile web are much less patient than those in front of a computer--cellphone screens are much smaller and the mobile internet connection, usually 3G, isn´t as fast yet.

Design Adjustments

Navigation

The omnipresent menu can´t be applied in many cases because of the screen size. The menu probably would have to be in a vertical way and it could be very uncomfortable if for every single page people would need to scroll down all the menu to see the content. So, only use omnipresent menu if your site has only three links or less on its top navigation and, because of that, it can be horizontal. The solution is to put the navigation on the first page and on the others pages use a link at the top to come back to the first page or use breadcrumbs.

Content

Your content should be the highest priority. The screen is very small so make your design as clean as possible with less images and a lot of white space. The mobile connection isn´t as fast yet to handle images, and it can make it harder to focus on the content.

Links

On mobile everything is smaller and it is not different with links. You have to make them easier to click on. That can be done with, once again, more use of white space around them and bigger font sizes. When the link is selected, instead of just underlining it or changing its color, it should change the background color, even if the link is in the middle of a paragraph. It´s much better for mobile user to see what they have clicked on.

Various Screen Sizes

Each phone has a different screen size, and the iPhone has two positions: vertical and horizontal. So, your site cannot have a fixed width with pixels. It´s much better to use percentage and EMS. This method will make your site adaptable to the various screens sizes. Also you can limit the zoom of the interface and the size of the screen using the META properties for mobiles

Cross Platforms

Don´t expect your mobile site to look the same in all mobile browsers; there are dozens out there. There are some HTML elements and CSS properties that aren´t supported by some mobile browsers or, at least, it doesn't work the way it should. The various heading markups for example will look different from browser to browser. But if all you want is a site that works well on the iPhone and android, you won´t have too much trouble with the code as you already have with desktop browsers. All you need is to adapt the site as I said in the other topics. Check out well coded sites at Mobify, a place where you can build your mobile site. Some designs aren´t as nice but the codes are all valid. You can test it and see if it works for you. Some design blogs use it very well, others not so much. I tried it but I ended up building a mobile site all by myself. And here you can validate your code.

Great Examples

Below are some great mobile adjusted web designs, all of them and more you can find at a very useful mobile website showcase, Mobile Awesomeness.

Other Resources

Learn How To Develop For The iPhone - It shows you how to build an alternate page and style sheet for the iPhone and iTouch.

Give Your Website a Custom iPhone Bookmark Icon - This tutorial teaches you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen.

Create a Slick iPhone/Mobile Interface from any RSS Feed - This article is about creating a web page that is formatted for the iPhone that will dynamically fill itself with content from a RSS feed.

iPhone Apps Design Mistakes: Over-Blown Visuals - The development of iPhone applications has recently become a hot topic. However, many of these applications are poorly designed and just don ´t become useful as it could be.

MobiSiteGalore - A free site to build your mobile site
Create a Unit Converter Application for Flash Lite Enabled Devices- Flash Lite is an implementation of the Flash runtime for mobile phones, consumer electronic devices, and Internet-connected digital home devices.

Developing with Flash Lite - Mark Doherty over at FlashMobileBlog has teamed up with Dale Rankine to produce a video tutorial series: "Developing with Flash Lite" on their Adobe Flash Lite Vimeo channel.

Doctype: jQTouch and Mobile Design - In this week’s 7 minute episode of Doctype Jim covers jQTouch, a plugin for jQuery that enables quick iPhone websites, and Nick talks about how to design for the small screen.

About the author

Hi! My name is Alessandra dos Santos and I´m a brazilian designer. I love design, photography, advertising and arts and I hope sharing inspiring stuff about all these with you. You can find some of my work at Carbonmade, Flickr, Behance and my blog at http://blueberrycheesecakebrowie.wordpress.com/

T-Mobile debuts the G1. Competition for the iPhone? Not really....

Francisco — Wed, 24 Sep 2008 01:50:08 +0000

The T-Mobile G1 debuted today and the blogosphere is buzzing with reviews. The biggest reason is that it's the first phone to use the Google Android software. Could this phone really be competition for the iPhone? From what I've read so far, I don't think so. I myself don't have an iPhone (yet), I do however use T-Mobile and I'd rather get a hacked iPhone before getting the G1. But that's just me.

UPDATE 9/24/08: I wanted to add a video I just saw from Google's official YouTube channel. Scroll all the way to the bottom to see the video. And I wanted to give you a link to the official Adroid site.

Check out the official G1 site for an overview and details on the features.

Here are some reviews:

Gizmodo review 1
Gizmodo review 2 (the chart below is from this link)
Engadget review
Dvice review (I really liked this review)

This is a nice chart from Gizmodo comparing some of the more important features:

And here are some videos of the G1:

from Coolhunting

from Engadget

From Google:

mobile

Watch Flash content on your mobile device...without Flash!

About the author

Sponsored Links:

Mobile Web Design

Adjusting a site for the mobile environment is a great challenge. A lot of techniques you are used to applying on web design would not make any sense on mobile, and vice-versa.

Design Adjustments

Navigation

Content

Links

Various Screen Sizes

Cross Platforms

Great Examples

Other Resources

About the author

Sponsored Links:

T-Mobile debuts the G1. Competition for the iPhone? Not really....

Here are some reviews:

This is a nice chart from Gizmodo comparing some of the more important features:

And here are some videos of the G1:

About the author

Sponsored Links: