Triggers

if this then that

The this part of a task is the Trigger. Some example Triggers are “if I’m tagged in a photo on Facebook” or “if I tweet on Twitter.”

Actions

if this then that

The that part of a task is the Action. Some example Actions are “then send me a text message” or “then create a status message on Facebook.”

Channels

1. Create mobile or local value within 3 minutes

Realize the environment of using mobile phone. People are in the subways to work, waiting for the bus or just spending some time at home on it. In each case they amount of time online on mobile devices is much lower than on a desktop computer. You need to create a value to the user withing the first 3 minutes. If not - you lost, because the reader didnt have enough time to consume your product or service or is not satisfied with it at all, so he comes never back to you again. Provide value! The next app from the competition ist just 2 seconds and clicks away! How to provide value? Try innovative or cost effective products. Try something new, like location based services (for example friend-finder, or like facebook places).

2. Styling for mobile devices

The style of mobile phones are an important issue. When you have decided that you need to embrace the mobile, you need to consider the diverse eco system of your mobile application. You are deciding to have one of the fastest growing segments on web and you need to know the mobile eco system. It has many browsers, screen sizes, connection speeds etc. these days, Android system is gaining popularity. You should try to think in a bigger picture. You should have a good visual consistency, minimized scrolling and a web page transitions maintained with the desktop site.

3. Set A Default Zoom for mobile devices

You may want to consider to get rid of any extra white space. For example, if your site is cantered and has white space on the left and right sides, visitor will likely want to zoom in to see things more clearly

4. Resizing Images

If you have a small screen, it also means a small size for readers. You should try to avoid any kind of heavy loaded images. Instead, resize the images on a web browser. You need to optimize your images and links. Every mobile person will appreciate that as it makes them easy to zoom in for reading or watching

5. Automatic detection of mobile devices

Typing is something that many people tend to avoid. There are various methods of automatic mobile detection and some of them include User agent detection and a so called “DEviceAtlas”, which are very effective. They supply information of the capabilities of many devices.

6. Think about navigation

Your website may include headers and footers like a regular website, but when any one surfs your website through a mobile, all this does not matter. Try to avoid all things that may not be of much interest to the readers. Eliminate all kinds of unnecessary links to destinations, as they do not have much mobile priority. On the other hand, try to add something that may be interesting to the viewers. E.g you could add a ‘search’ form on the header or you could also add contact information on top rather than bottom, depending on your service

7. Easy to find link to full content version

How many times does it happen that your readers might not find the main information they were looking for, when they are browsing through the mobile version? So, it is good to add a ‘Full Site’ button on the footer so that they can have a glimpse of all features on your website.

8. Shorten your links

Nobody likes to type in long complicated links into a mobile browser. In times of twitter, shorten your links using services like bit.ly.

9. Consider Text And Spacing

Keep in mind the behaviour of mobile users on your web site. If links appear close together, they may be to difficult for users to click on the correct one with a mobile device. Also, small text does not suit well on a mobile device. Keep these things in mind when optimizing your site for mobile users.

10. Measuring Mobile audience

If you know the percentage of the mobile audience that you have, it makes your work much easier. You will see what your readers prefer and how they navigate. You know the popularity of pages and and where you need to work on. For knowing that, you need to get closer to the audience and listen to them and track their behaviour.

Mobile Tools and Strategies

I’ve been doing some research on the best tools for your mobile friendly version and find the following very useful to implement in your communication strategy:

11. Mobify

This is a perfect theme for your website that gives you complete control over mobile site along with CSS. You also get some tools that help in managing all kinds of advertising of your websites.

12. WP Touch

This theme for wordpress helps you in showing your contents in a beautiful way and increases the page loading. Its design was inspired by Apple’s app store design specs. The importance of this application is that it does not interfere with your regular web themes. It beautifully transforms a Wordpress blog in to web application experience when you view it from iPhone, iPod, NAdroid and Blackberry touch.

13. MoFuse

This has become very famous. Over 23.000 blogs are using it for their mobile versions. MoFuse lets you easily create your contents, promote and build it and lets you track your own audience. The more visitors you get, the more it helps you in generating more sales and increasing income. Some of the big brands are like Mash able and Read write web are using it.

14. Mippin Mobilizer

This tool helps you to mobilise your site. You must follow some steps in order to mobilise your website. You also get full control towards your branding and logo. Hence, this makes it possible to monetize your mobile site. As your site is mobile, then surely it will be generating more and more visitors and in turn it will give you much more profit. There are advertising tools for your mobile site to increase your income.

15. Wirenode

Almost 40,000 mobile web pages hosted in Wirenode and among them are some famous brands such as Ford and Reebok. It only takes about 5 minutes to get a mobile version of your site up and running, and gives you features such as mobile widgets, mobile polls, RSS mobilization and forms.

16. WP Tap

WPtap offers a comprehensive mobile Wordpress theme for your website. WPtap provide mobile themes and plugins that can directly convert your website into a WordPress-application experience when viewed from the iPhone, iPod Touch, Android Smartphone and Blackberry touch-based. It comes completely with all the features for a standard WordPress blog: search, login, category, tags, archives, photos & more. In addition, WPtap also offers many customization features through a user-friendly panel Wordpress admin.

17. Mobisite Galore

With mobiSiteGalore allows you to easily build, publish & share a complete a mobile website that is guaranteed to work well on many mobile phones. The design template is owned by mobiSiteGalore and allows you to fully customize the colours, fonts and layout on the page to create a unique view of a mobile version of your site.

18. Zinadoo

Zinadoo allows you to create a mobile version of your website in just a few minutes. With Zinadoo you can also optimize your site for Google Mobile with keywords and tags. You can also make use of their special mobile widgets.

19. MobilePress

MobilePress is a free WordPress plugin that allows you to change your blog into a mobile friendly blog when viewed on mobile devices. MobilePress also allows you to create custom mobile themes for different handheld devices and mobile browsers like Opera Mini, iPhone and Windows Mobile.

20. Showcases of mobile friendly websites

Below is a set of examples or showcase of websites with a mobile version that might give you inspiration

• 15 Beautiful Examples of Mobile Website Design Done Right
• 35 Beautiful iPhone App Website Designs
• Showcase of 20 Mobile-Friendly Popular Design Blogs
• 60 Mobile Web Design Showcase
• 40+ Best Mobile Website Designs

Have more tips, tools or strategies?

Go ahead and join the discussion! If you liked this post, why not subscribing to KnowTeBook.com or check out our Facebook or Twitter page?

Write guest posts for KnowTeBook

If you’re a writer and know a lot about design, coding, …… or owning a small business, you can give great advices on branding, marketing, productivity, dealing with clients (and other related topics), or you can write ‘how-to’ posts, please get in contact with Sebastian.

This kind of scenario happens with every user in search of information on the Internet. After all, every user has several websites to browse through and choose. The need of the user is sadly not always the first thing that is taken into consideration whilst designing any website. Website owners and web designers then need to think and know whether the website performs as is expected for their business!

The most important thing for any website is interactivity. Why interactivity is what many would question! Well, the reason is that a website needs to capture attention and keep users on the page within the first few seconds. Yes, the first few seconds a user spends on the page is of utmost important. And whether people agree or not, the old saying where first impressions make the last impressions holds true! A website that can capture attention of the user to keep him/her on the page can be termed as truly successful!

Things to know for web design:

• Your website should be user-friendly
• The website should attract attention
• Study the target group for the design process
• The information should be presented appropriately
• It needs to highlight important points clearly
• Use of interactivity to keep users on page

Websites that engage with interactivity

Wrangler

We all know about the popularity of the brand Wrangler. This website displays the products in a very unique way. As seen in the image, a user has to unzip the jacket to browse the website further. The visuals then unfold in a very interesting manner. The collection can be viewed only after the user performs some action on the website!

Mnatwork

The design company, magneticNorth has used interactivity in a creative way. Their simple concept of drawing and discovering gives an exclusive touch to the website. At first instance, the website only has one statement in the beginning, which is ‘Draw and Discover’. As a user actually draws across the screen, various elements about the website are discovered. The display of their portfolio in this creative manner speaks volumes about the company!

Bebopjeans

Bebop, a lifestyle apparel company has displayed the required information in a creative way. The use of Flash with graphics and the entire presentation keeps users on the page. There is an interesting mix of elements. These creative web pages keep users interested for more!

Extre

This clothing store has made use of interactivity to displays details. This sure is attractive as compared to websites that place rows of photographs next to each other. Every bit of information is displayed through the circular forms of the plant. It engages users on the page whilst displaying information.

Apple Ipad

Also big images catch the users eys as Apple is used to do. This helps in presenting the information about the service in an engaging manner. Users need to perform some activity on the page to view more information. The design along with the content thus needs to be catchy!

All these examples of websites are uncommon although the topics can be termed as common. To put it across simply, there are so many websites related to clothing and accessories. Yet, it is not always the brand name that can cause users to browse through a website. An attractive website will do all that and much more for any web designer or web master.

So, do you have what it takes to make your website successful? Looking forward to your replies!

If you liked this post, why do you not subscribe to KnowTeBook.com?

About the author

Poonam Agarwal works as Program Manager at Harbinger Group and is looks after for Raptivity Web Expert, software to bring web pages alive through Interactivity. This software helps to add interactivity to websites without programming! She holds a Bachelor’s degree in Computer Engineering and is an active blogger.

Write guest posts for KnowTeBook

If you’re a writer and know a lot about design, coding, …… or owning a small business, you can give great advices on branding, marketing, productivity, dealing with clients (and other related topics), or you can write ‘how-to’ posts, please get in contact with Sebastian.

Photo by Richard-G

1. WPCompressor - Increase loading time up tp 80%

We couldnt believe it! Just by this small plugin, which activates GZIP compression of your website without any changes to your server, you can reduce your site weight to 80%. It uses PHP to activate GZIP instead of .htaccess. wpCompressor automatically compresses the data output and boosts the speed performance of your blog. You can test your speed here.

2. Remove unnecessary Plugins & upgrade current ones

Remove all unused plugins wordpress site. Disable them and then physically remove from your web server. Plugins are disabled will affect the speed of a site for WordPress plugin will check whether activated or not. You also must keep up-to-date with the latest version of the plugin you use. Developer would have released a new version because they have modified the code in several ways to make this plugin work better.

3. Minimize PHP and database queries

I also have read great tip on Wpcandy’s simple ways to speed up WordPress. The article makes a lot of sense, cutting down on PHP and database queries.Jadi when the page loads on your site, and your browser must execute PHP query, it adds to the burden of time. If you change the query PHP with static HTML, every time the page is loaded, the browser you only read HTML.

4. Optimize and Repair your Database from myPhpAdmin

Every week or so you should login to your myPhpAdmin and optimize your db. Locate your Wordpress DatabaseTables, check all the tables in the Check Boxes, select the Optimise Tables Option and repair. You would be surprised how well this trick might work, it saved more than 10% of my current database size.

5. Use Reliable image hosting service

Try moving the common web images, CSS, JavaScript and other static files to Amazon S3 Storage service and you will notice the average CPU load / memory requirement of the web server will be reduced a lot. Read this step by step guide. Signing up for reseller hosting gives you more power for your own projects. You will have more control of system ressources.

You can also try WP-Offload . This plugin will boost the performance of your blog by seamlessly offloading static content like images, documents and movies. This will greatly reduce bandwidth consumption and the number of HTTP requests issued to your web server. Additional features such as remote image manipulation and thumbnail generation are provided.

6. Install WP Super Cache Plugin

This plugin will generate static html files from your dynamic WordPress blog. After the resulting html files, your webserver will serve that file instead of processing the relatively heavier and more expensive WordPress PHP scripts and would not actually load content from a database at all, so the post will load faster with less stress on your server.

7. PHP Speedy WP

PHP Speedy WP can quickly and easily speed up your WordPress site and increase your blog’s response without too much effort on your part. PHP Speedy WP also allows us to automatically combine all the JS and CSS files into only two files - which in turn helps the opening page of times. CSS Background Images are automatically converted to URI.Dan this data will be useful in reducing the number of HTTP requests even further. And, importantly, is compatible with Internet Explorer, although the data do not support URI

8. Speed up access to your favorite frameworks via the AJAX Libraries API

The AJAX Libraries API is an attempt to make Web applications faster for developers in simple ways by becoming a content distribution network and loading architecture for popular javascript libraries including:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

You can either link to the source code directly:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

Or you can use Google’s API:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("prototype", "1.6.0.2");</script>

By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular, open source and up to date JavaScript libraries.

9. Optimize your images with this great tool

Shrink O’Matic AIR is a great application to easily (batch) resize (shrink) images. This will be able to handle JPGs, GIFs and PNGs. Simply drag and drop images and they will be resized as you wish! Options allow you to choose the output sizes, names and formats.

10. WP CSS

This plugin GZIP and strip whitespace from your CSS file. This plugin allows you to confidently use @ import in the CSS file and not have to worry about what happens at the end user. This can be seen through the style.css file and put all @ import files into it. You also can set the cache expiration time. In addition you can also add CSS files to a specific page or post and put them all into one file.

11. Display page loading time + number of queries

Here is a simple code that can be inserted in your template. This code is useful to know how long it takes to load your page, or how many sql query is executed.

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds

If you liked this post, why do you not subscribe to KnowTeBook.com?

About the author

Yanuar Prisantoso is a 25 year old web developer in Onebitmedia, he has experience in the web design and web development industry and is very interested about jQuery and interactive on his blog, Denbagus. You can follow on Twitter or contact him through his website.

Write guest posts for KnowTeBook

If you’re a writer and know a lot about design, coding, …… or owning a small business, you can give great advices on branding, marketing, productivity, dealing with clients (and other related topics), or you can write ‘how-to’ posts, please get in contact with Sebastian.

Demo

Tagaroo is designed to make your WordPress blog better for you, better for your readers and more accessible to search engines. As you’re writing, Tagaroo analyzes the text in your post and suggests intelligent tags for the things and events you’re writing about.

You can use these tags in your post - but even better - you can use these tags to automatically get great images from Flickr to include in your post.

Tagaroo works as a plugin by Calais and makes tagging fun and easy, makes your posts more visually compelling and helps search engines find your content.

What is so special about it?

Metadata in and of itself is not too interesting. Where things get more interesting is what you can do with it. For right now we’ll just provide a few examples of what publishers are doing and planning to do:

Tag your complete historical archives in hours

Perhaps you’re a complete convert to the value of tagging your content and are doing a great job with new material. But what about the tens of thousands to millions of pieces of historical content you have already produced? Several organizations are in the process of feeding their entire historical archives through Calais and automatically generating high-quality tags and metadata. Doing so, they translate a stale content asset into one that can be actively searched and integrated with other content assets.

Improve user search and content searchability

At best, keyword-based search solves a portion of your users’ search needs. Incorporate semantic metadata into your search solution and you can dramatically improve the user search experience – and this doesn’t need to be complicated. Simply process your content and append the resulting metadata to your search index. As a simple example, your users can now search for “IBM” and “Management Change” to receive a complete listing of IBM-related hirings, firings, promotions, transfers and new positions – something barely achievable with keyword-based search.

Improve syndication segmentation

If you syndicate your content to others, you can now offer syndication options based on the highly accurate information contained within your metadata. For example, a business-related feed limited to acquisitions and management changes can be automatically generated.

New information-driven products and services

You know what your clients need. Calais provides the framework for developing value-added products and service for your clients. Content-driven analytics, interactive segmentation, search engine optimization – you’re in the driver’s seat.

Smush.it offers an API that performs these optimizations (except for stripping JPEG meta data) automatically, and this plugin seamlessly integrates Smush.it with WordPress.

Features

• stripping meta data from JPEGs
• optimizing JPEG compression
• converting certain GIFs to indexed PNGs
• stripping the un-used colours from indexed images

How does it work?

Every image you add to a page or post will be automatically run through Smush.it behind the scenes. You don’t have to do anything different.

Installation and Use

Download the WP Smush.it plugin and extract in your wp-content/plugins directory. Activate the plugin and you’re done.

After creating the design follow part 2 of this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.