Mobile Websites

Designing for mobile with HTML5

Posted in: Mobile Websites, Websites by koolkat on March 14, 2011 | No Comments

Seeking to leverage my HTML, CSS and jQuery skills, I decide to try to develop a web app aimed at mobile devices. I was able to add in Apple icons, geolocation and viewports but stumbled on a most fundamental point; what makes a good mobile design?

Of course, I am still struggling with this but really look forward to the mobile design workshop at Event Apart Seattle.

WPtouch Mobile and Custom Templates

Posted in: Mobile Websites, Websites by koolkat on January 10, 2011 | No Comments

WPtouch does not support custom post types or templates out of the box.   However, it is relatively straight-forward to get your custom posts to show up. For my website, there are two pages that use custom templates in its desktop or non-mobile modes. Each template uses a specific category to display the posts. The pages are http://www.koolkatwebdesigns.com/blog/ and http://www.koolkatwebdesigns.com/website-design-portfolio/.

At first, the mobile version of these pages had no content with only the page title and the social icons showing up. So, taking advantage of the child themes available in WPtouch 2.1, I took action. Here are the steps (excluding iPad):

1. Select the Classic (2.1) and click “Copy as child”.
2. Using your favorite FTP program copy the contents of wptouch-data/themes/classic-child-1 to your local computer.
3. Also copy page.php from wp-content/plugins/wptouch-pro/themes/classic/iphone to the wptouch-data/themes/classic-child-1 directory on your local computer.
4. Rename page.php in wptouch-data/themes/classic-child-1 directory on your local machine to page-{id}.php. Where id is the id of the page with the custom posts. So, in my case I ended up with page-5.php for my blog.
5. Edit the style.css in the same directory to include the following (you will see why later):
   1. .blog-posts .content {
      display:block;
      }
6. Since the WPTouch theme will generate classes that will cause your content to have the style display:none, edit your page-{id}.php and add blog-posts right after the second occurrence of rounded-corners-8px so you have a line like this:
   1. <div class=”<?php wptouch_post_classes(); ?> rounded-corners-8px blog-posts”>
7. Modify the line of code that has <h2><?php wptouch_the_title(); ?></h2> so it can link to post to its single page display:
   1. <h2><a href=”<?php wptouch_the_permalink()?>”><?php wptouch_the_title(); ?></a></h2>
8. Now, its time the update the wordpress loop.
9. Replace the following lines of  code:
   1. <?php if ( wptouch_have_posts() ) { ?>
      <?php wptouch_the_post(); ?>
10. With this line (cat=10 should be replaced with what your post category is):
    1. <?php query_posts(‘cat=10′); while (wptouch_have_posts()) : wptouch_the_post() ?
11. Note the php style I am using here and if you use the same thing you will also need to replace the closing bracket with:
    1. <?php endwhile; ?>
12. Finally, call <?php wp_reset_query(); ?> before <?php get_footer(); ?>

WPtouch

Posted in: Mobile Websites, Websites by koolkat on November 2, 2010 | No Comments

In an attempt to become more mobile friendly, I decided to try out WPTouch 2.0 Pro. At a cost of $29.00 for a single user, it seemed worth the price. One of the things that intrigued me the most was the ability to have the mobile site run in “Web-App” mode. This would mean a nice icons for my home page and quick access to the page. However, this feature is only available for iPhones/iPads so I was quite disappointed that it did not work on my Android phone. Despite this, I must say that the resulting website looks nice and does have that “mobile app” vibe.  Unfortunately, it does not seem to load all that fast and I am not sure there is really any significant gain in load time over a standard site.

I am hoping that the next release will be an improvement in speed and Android support.

Mobile Websites

Posted in: Mobile Websites, Websites by koolkat on July 12, 2010 | No Comments

With mobile becoming more and more important, many web designers and developers are creating websites specifically for this platform. However, many sites designed for the computer web browser display reasonable well on smart phones. As a user of an Android-based phone, one thing that always annoys me is that phone numbers on the sites are not clickable. Of course, if you code something like:

<a href="tel:+15551112222">555 111 2222</a>

you will get an error if you try to open the link in a computer web browser.

So, should we all at least use some “light detection” capabilities such as Lightweight Device Detection in PHP? I am beginning to think this may become more and more important.

Find Kool Kat Web Designs on your mobile phone

Posted in: Mobile Websites by koolkat on April 2, 2010 | No Comments

Just take a picture with your barcode app on your smart phone.

Kool Kat Web Designs QR Barcode

Going Mobile

Posted in: Mobile Websites, Websites by koolkat on December 22, 2009 | 2 Comments

Having tried and then given up working a .mobi site, I decided to try WordPress Mobile Pack. So far, its working quite well although I see I need a few for tweaks and optimizations.

The Kool Kat goes mobile

Posted in: Mobile Websites, Websites by koolkat on March 20, 2008 | No Comments

Just launched my .mobi site. On your phone, just try koolkatwebdesigns.mobi

What does the iPhone mean for web designs?

Posted in: Mobile Websites, Websites by koolkat on June 29, 2007 | No Comments

Of course the new iPhone uses a real web Browser, Safari. However, the actual screen size is quite small. Should web designers take this into account? I don’t really have the answer and hope other web designers will weight in on this topic.