When creating a mobile site you need to keep in mind that there are multiple types of mobile phones being use and each will display the site differently. The best way to create your site is by customizing the site for devices whose web browser capabilities are considerably lower than newest phones such as the iphone, G3, among others.
To start creating a mobile site you will need to decide how many pages the site will consist of, and if these are to be any images. How much content are you going to include. Keep in mind that the information will be viewed on a small screen. All the content should be in small paragraphs and avoid placing to much information on the individual pages. If you plan on using pictures, which I would recommend that you avoid as much as possible, make sure that the images are small in size and will not take too much loading time. After all these important factors have been decided, you can start creating you mobile site.
When creating the template for your mobile site, make sure you use div tags instead of tables. This will allow more flexibility in the design and it will be easier to customize the site for different types of mobile phones. The best way to customize your mobile site is to have a script that will check the type of phone that is viewing the site. When doing this, you can customize individual style sheets that will use more or less images, styles, etc.
When your template is created, you should consider adding a page with dynamic content such as twits from Twitter or posts from a blog. This will give your mobile site a better SEO standing.
Mobile devices will continue to grow and improve their web browser capabilities and because of this, it is important to have a flexible design which can be customize to fit various types of devices.
When it comes to the optimization of images for the web, it is important to know when, why and how to compress them. This short tutorial will help you get the most out of your images and will keep your file sizes smaller for faster page loads.
The main image compression formats:
Jpeg —use when compressing an image such as a photograph or illustration.
Gif — use when compressing images with flat color, such as a logo, chart or other graphic. A transparent background can be used with gifs, however, there will be a ragged edge of pixels around your image.
Png — use if a transparent background is required. Most browsers accept transparent pngs with the exception of Internet Explorer 6.
Compressing Photographic Images
Jpeg at 70% quality.
File size: 13K
Very close to the high quality of the original and file size is acceptable.
Jpeg at 5% quality.
File size: 3K
Quality is unacceptable.
Gif with 256 color max.
File size: 26K
Good quality with some pixilation but higher file size.
File size: 93K
Great quality but file size too large.
Compressing Flat Color Graphic Elements
Gif with 16 colors.
16 colors were used instead of 2 because the pixels around the text are transitional colors to give the appearance of soft edges.
File size: 3K
Jpeg at 50% quality.
File size: 6K
Poor quality, not acceptable.
File size: 5k
Good quality but larger file size.
You can clearly see from the above examples that optimizing your images correctly can make a huge difference in look and load-time. Stick with these examples as a guide to compressing your images and you’ll be up and loading in no time.
If you didn’t already notice, Bing is breaking new ground when it has come to online mapping. In 56 metro areas Bing Maps is introducing “Street Side”. This new technology features immersive street-level photography and allows users to “walk down the street” and explore neighborhoods and cities. Unlike other online mapping services Bing “Street Side” is extremely “rich”, bringing online mapping into a new reality. Microsoft is also utilizing its 3D mapping assets, Photosynth and Silverlight in creating this new experience. Here is how the Microsoft press release describes the technology behind the new map experience:
Photosynth and Silverlight are the underlying technologies in Bing Maps that connect everything and help provide the more seamless experience. Based on Seadragon and Photo Tourism concepts, Photosynth lets us literally “stitch” together photographs to provide a more realistic view of locations as they appear in real life. Photosynth-enabled Streetside imagery is built on geometric models that are reconstructed underneath the imagery to provide a truly 3D experience that shows locations as they are in real life.
The one “catch” is that you need to install Microsoft Silverlight to make it all work. (It only takes a few seconds to download) But once installed at the Bing Maps beta site you are now enabled into a wide range of experiences including search and discovery tools such as planning and sharing multistep itineraries, navigating streets at eye level and experience beautiful photographic scenes.
Additionally this new “apps gallery“ enables data overlays directly onto the map. Currently all of the apps are Microsoft created but in the near future third parties will be able to integrate such as Yelp reviews and Twitter postings, along with a mobile device version.