Social Networking을 이용한 뮤직비디오.
Monday, November 30, 2009
Thursday, November 26, 2009
A Guide to Mobile Web Design Tips and Tricks
Having a mobile-optimized web site can really make your site stand apart from the pack. Even though smartphones like the iPhone and Google Android devices can display “the full web,” having a web page formatted for smaller screens and with features that can take advantage of a touch screen, geolocation, or address book functionality can make the mobile web browsing experience that much better.
Even just a few years ago, optimizing websites for mobile browsers was a painful and difficult process, in part because of the limitations of most mobile browsers. Today, thanks to the proliferation of WebKit (which powers the browsers on the iPhone, Android (
) and webOS devices, with BlackBerry expected to join the mix next year), it’s much easier to decide on a strategy for making your website pop on mobile platforms.
We’ve put together a toolkit of resources for the designer and non-designer alike to get you started. Did we miss your favorite tool or service? Let us know in the comments!
If you don’t have experience with HTML and CSS (or you don’t have the time), there are a number of services that can create mobile versions of your website for you.
MoFuse and MoFuse Premium — MoFuse has been offering a simple way for bloggers and businesses to easily create mobile versions of their websites for quite some time. For bloggers or smaller sites, the company offers MoFuse for Blogs, which is a free and easy way to quickly mobilize your web site (it uses your RSS feed to generate the new site) whenever it is accessed by going to “m.yourdomain.com.” For businesses or larger sites that want a little more control, MoFuse Premium offers more customizable options.
Disclosure: MoFuse powers Mashable’s mobile website.
Mippin — Mippin is another free service that can create a quick mobile version of your website using your RSS feed. The options aren’t extensive, but the version that Mippin creates should be viewable on almost any WAP compatible mobile phone.
mobiSiteGalore — mobiSiteGalore can create quick mobile versions of websites, offers users some customization options, and can take advantage of the .mobi TLD. mobiSiteGalore will let you create your mobile site from a computer or from your phone.
Having a WAP-formatted site is fine, but if you want to be able to offer visitors from an iPhone or Android device some really great optimized mobile features, you want to consider creating a separate stylesheet for your website. For users of WordPress () and other publishing systems, there are a lot of plugin options available that make adding a mobile theme to your site extremely easy.
WPtouch — WPtouch is a fantastic plugin available for WordPress.org users (WordPress.com users can also take advantage of WPtouch with the recent addition of mobile themes) that automatically makes your site easy to read and access from an iPhone or Android device.
The plugin is extremely robust and even offers backend features like the ability to set an iPhone Favicon (so that when users add your web page to their iPhone’s home screen, it has a great looking icon), the ability to work with other WordPress plugins like FlickrRSS and Blip (
).it, support for AJAX, customized headers, and more. What I really like about WPtouch is that users can choose to turn it off and access the full version of a website at any time by flicking the mobile on/off switch at the bottom of each page.
WordPress Mobile Edition – Crowd Favorite created this plugin that allows users to easily define what type of devices should be shown a mobile web page (and what shouldn’t — for instance if you want BlackBerry users to see your mobile page but you want iPhone users to see the full site) and it comes with Crowd Favorite’s Carrington Mobile Theme which is easy on the eyes and also fully customizable.
WordPress Mobile Pack — The WordPress Mobile Pack is from the dotMobi team and it is a whole suite of tools for mobile web optimization. It includes a base mobile theme, which is very attractive, a mobile admin panel, mobile ad support and the option for visitors to switch between the full and mobile versions of a website.
WPtap — WPtap is a plugin for WordPress, and the site also offers up some alternative themes for users who want a more customized look and feel to add to their sites. WPtap looks very similar to WPtouch, but the emphasis seems to be on offering pre-built mobile styles.
WordPress Mobile by Mobify — This is a plugin for the Mobify service (see description in the next section). It handles automatic redirection of mobile clients to your Mobify mobile view page.
Mobile Plugin for Drupal — Mobile Plugin offers Drupal () sites a mobile optimized view, comes with a mobile version of the standard Drupal Garland theme and includes device detection, hooks for adding mobile-specific features and automatic YouTube () mobile replacement.
Mobify — Mobify is a really interesting service because it makes it easy for designers or users who know HTML and CSS to painlessly modify and optimize their website for mobile access. The service is free (though paid monthly plans are available for more features) and it works extremely well with systems like WordPress, Drupal, ExpressionEngine and any other system that has predictable URL patterns and well formed HTML.
Mobify has a visual editor that lets you see what your content looks like on different device types and you can then modify the CSS and see the changes in real-time. Some sites that have used Mobify to create mobile optimized versions of their content include A List Apart and revered web developers and designers, such as Jonathan Snook and Veerle Pieters.
iPhoney — iPhoney from Marketcircle gives Mac users a pixel-accurate web browsing environment that is powered by Safari (). Why does this matter? Because when crafting the mobile version of your site, it’s important to be able to see how the final product will look on your phone. iPhoney hasn’t been updated in a while but is still a really useful tool.
iWebKit — iWebKit is a framework of sorts for creating iPhone-optimized websites or web apps that can take advantage of the iPhone’s UI elements and other features.
jQTouch — jQTouch is a really innovative jQuery plugin for mobile web development on the iPhone and iPod touch. With it you can create websites or web apps with animations, support for forms, customized UI elements, additional extensions, swipe controls, and more. The developer is really active with the project and some of the stuff you can do with it is amazing.
iPhone Compatible CSS Layouts — Matthew James Taylor created a bunch of liquid CSS layouts that are iPhone and iPod Touch compatible and free for anyone to use. If you’re looking for a starting point for building a mobile optimized site, you might want to give these layouts a look.
Mobile Web Design by Cameron Moll — This is a really great book (available in print or as an ebook) with tips, best practices, and examples on styling and optimizing your site for mobile content. If it suffers from anything it is that it was written before the iPhone explosion really took off, thus it isn’t as up to date as it could be. Still, for mobile web enthusiasts, there’s a lot of great information here.
Craig Hockenbery’s “Put Your Content in My Pocket” — In August of 2007, Craig Hockenberry (from the Iconfactory and one of the brains behind Twitterrific () for the Mac and the iPhone) wrote a great article for “A List Apart” and although some of the technologies have evolved, much of what Craig wrote then still applies today. A great read.
Smashing Magazines’s Mobile Design Showcase – Need some inspiration? Smashing Magazine did a great roundup of iPhone optimized designs in September.
CSSiPhone — CSSiPhone is a CSS gallery dedicated to iPhone optimized site designs. Like Picasso said, “Good artists copy, great artists steal!”
Even just a few years ago, optimizing websites for mobile browsers was a painful and difficult process, in part because of the limitations of most mobile browsers. Today, thanks to the proliferation of WebKit (which powers the browsers on the iPhone, Android (
) and webOS devices, with BlackBerry expected to join the mix next year), it’s much easier to decide on a strategy for making your website pop on mobile platforms.We’ve put together a toolkit of resources for the designer and non-designer alike to get you started. Did we miss your favorite tool or service? Let us know in the comments!
Services for Optimizing Your Content for Mobile Browsers
MoFuse and MoFuse Premium — MoFuse has been offering a simple way for bloggers and businesses to easily create mobile versions of their websites for quite some time. For bloggers or smaller sites, the company offers MoFuse for Blogs, which is a free and easy way to quickly mobilize your web site (it uses your RSS feed to generate the new site) whenever it is accessed by going to “m.yourdomain.com.” For businesses or larger sites that want a little more control, MoFuse Premium offers more customizable options.
Disclosure: MoFuse powers Mashable’s mobile website.
Mippin — Mippin is another free service that can create a quick mobile version of your website using your RSS feed. The options aren’t extensive, but the version that Mippin creates should be viewable on almost any WAP compatible mobile phone.
mobiSiteGalore — mobiSiteGalore can create quick mobile versions of websites, offers users some customization options, and can take advantage of the .mobi TLD. mobiSiteGalore will let you create your mobile site from a computer or from your phone.
Plugins for WordPress and Other Publishing Systems
) and other publishing systems, there are a lot of plugin options available that make adding a mobile theme to your site extremely easy.WPtouch — WPtouch is a fantastic plugin available for WordPress.org users (WordPress.com users can also take advantage of WPtouch with the recent addition of mobile themes) that automatically makes your site easy to read and access from an iPhone or Android device.
The plugin is extremely robust and even offers backend features like the ability to set an iPhone Favicon (so that when users add your web page to their iPhone’s home screen, it has a great looking icon), the ability to work with other WordPress plugins like FlickrRSS and Blip (
).it, support for AJAX, customized headers, and more. What I really like about WPtouch is that users can choose to turn it off and access the full version of a website at any time by flicking the mobile on/off switch at the bottom of each page.WordPress Mobile Edition – Crowd Favorite created this plugin that allows users to easily define what type of devices should be shown a mobile web page (and what shouldn’t — for instance if you want BlackBerry users to see your mobile page but you want iPhone users to see the full site) and it comes with Crowd Favorite’s Carrington Mobile Theme which is easy on the eyes and also fully customizable.
WordPress Mobile Pack — The WordPress Mobile Pack is from the dotMobi team and it is a whole suite of tools for mobile web optimization. It includes a base mobile theme, which is very attractive, a mobile admin panel, mobile ad support and the option for visitors to switch between the full and mobile versions of a website.
WPtap — WPtap is a plugin for WordPress, and the site also offers up some alternative themes for users who want a more customized look and feel to add to their sites. WPtap looks very similar to WPtouch, but the emphasis seems to be on offering pre-built mobile styles.
WordPress Mobile by Mobify — This is a plugin for the Mobify service (see description in the next section). It handles automatic redirection of mobile clients to your Mobify mobile view page.
Mobile Plugin for Drupal — Mobile Plugin offers Drupal (
) sites a mobile optimized view, comes with a mobile version of the standard Drupal Garland theme and includes device detection, hooks for adding mobile-specific features and automatic YouTube () mobile replacement.Tools for Designers
Mobify has a visual editor that lets you see what your content looks like on different device types and you can then modify the CSS and see the changes in real-time. Some sites that have used Mobify to create mobile optimized versions of their content include A List Apart and revered web developers and designers, such as Jonathan Snook and Veerle Pieters.
iPhoney — iPhoney from Marketcircle gives Mac users a pixel-accurate web browsing environment that is powered by Safari (
). Why does this matter? Because when crafting the mobile version of your site, it’s important to be able to see how the final product will look on your phone. iPhoney hasn’t been updated in a while but is still a really useful tool.iWebKit — iWebKit is a framework of sorts for creating iPhone-optimized websites or web apps that can take advantage of the iPhone’s UI elements and other features.
jQTouch — jQTouch is a really innovative jQuery plugin for mobile web development on the iPhone and iPod touch. With it you can create websites or web apps with animations, support for forms, customized UI elements, additional extensions, swipe controls, and more. The developer is really active with the project and some of the stuff you can do with it is amazing.
iPhone Compatible CSS Layouts — Matthew James Taylor created a bunch of liquid CSS layouts that are iPhone and iPod Touch compatible and free for anyone to use. If you’re looking for a starting point for building a mobile optimized site, you might want to give these layouts a look.
Other Resources
Mobile Web Design by Cameron Moll — This is a really great book (available in print or as an ebook) with tips, best practices, and examples on styling and optimizing your site for mobile content. If it suffers from anything it is that it was written before the iPhone explosion really took off, thus it isn’t as up to date as it could be. Still, for mobile web enthusiasts, there’s a lot of great information here.
Craig Hockenbery’s “Put Your Content in My Pocket” — In August of 2007, Craig Hockenberry (from the Iconfactory and one of the brains behind Twitterrific (
) for the Mac and the iPhone) wrote a great article for “A List Apart” and although some of the technologies have evolved, much of what Craig wrote then still applies today. A great read.Smashing Magazines’s Mobile Design Showcase – Need some inspiration? Smashing Magazine did a great roundup of iPhone optimized designs in September.
CSSiPhone — CSSiPhone is a CSS gallery dedicated to iPhone optimized site designs. Like Picasso said, “Good artists copy, great artists steal!”
All in one web elements kit
We are starting to submit some design elements that can help web designers enhance their creations. Here is a file created by one of our contributors, that contain 17 web design elements in PSD file format. You can download the RAR file and use at any of your personal or customer projects without any limitations. You are free to apply changes, modify the files to suit your needs, however you may not redistribute, resell or claim exclusive ownership rights. The files are registered under Creative Commons Attribution-Noncommercial-Share Alike 3.0. You can link to this article or Ping it, but do not provide direct download url…you can also Digg, Stumble, Buzz-up this post using the share button on bottom of this article.We are going to have more of such Freebies and submit them here on our blog for free download, you may want to be the forst to know about updates?…go ahead and subscribe to our RSS Feed.
ALL In One Web Elements Kit
Here is an complete set of web elements you may find very useful for your upcoming project. A huge set of various web elements, easy to modify trough layer styles. There are 17 modules in total in the package, but every single module have variations that comes with like color options to choose from. Basicaly you get 17 elements that comes with 4 color options on some of their parts. The elements are available in a single file PSD (for designers feeling comfortable to work with ton of layers) + all elements in separated PSD for designers to easy access and edit the element only they need for their project.
ALL In One Web Elements Kit
Here is an complete set of web elements you may find very useful for your upcoming project. A huge set of various web elements, easy to modify trough layer styles. There are 17 modules in total in the package, but every single module have variations that comes with like color options to choose from. Basicaly you get 17 elements that comes with 4 color options on some of their parts. The elements are available in a single file PSD (for designers feeling comfortable to work with ton of layers) + all elements in separated PSD for designers to easy access and edit the element only they need for their project.
- 17 single PSD files (each element as separated PSD)
- 1 PSD file (all in one elements)
- well organized and labeled layers sets (simply drag and drop layer into your project)
- Easy to be modified and use
- Fully editable text fields
- Fully editable colors of elements (colors are editable trough “layer styles”, simply edit gradients and color overlays ect.)
- Standard Web font, Arial
- HOW TO basics help file included
- Elements image previews included (PNGs)
Wednesday, November 25, 2009
Tuesday, November 03, 2009
Subscribe to:
Posts (Atom)