Blog

Look what I made with Canvas

It’s been a good year for my freelance web design business and most of the projects I completed this year were WordPress sites. And for ALL of them, I built with child themes using WooThemes’ excellent framework called Canvas.

Canvas lives up to its name. It truly is a tool that I can shape into almost any design to my and my client’s liking. You can already do a lot of design modifications by simply using the built-in theme options panel. But where Canvas truly shines is in the template functions. It has plenty of hookable sections, shortcodes, and you can edit almost anything by copying php include files into your own child theme. The framework also takes care of making your theme responsive right off the bat. It regularly gets security and enhancement updates. Upgrading to a newer framework version is easy with just one click from the theme options panel.

Hey there! Building a WordPress website for your client or your business? I just discovered this excellent hosting service built specially for WordPress sites. Check ’em out.

getflywheel_728x90

The framework is extensively documented in an online codex and this helps immensely while I create customized templates. And when I am stumped with a problem during coding, the support team and the forum members are always ready with their advice or by giving straight answers in coded php!

So how flexible is Canvas? Flexible enough for me to take this default look:

Canvas

… and turn it to these:

 

 

… and those are just selected projects where I worked with the clients directly. I also used Canvas extensively in subcontract works, which unfortunately I cannot show here because I have sworn  not to publish them in my own portfolio.

So if you are a freelance web designer like me who does a lot of WordPress projects, try Canvas and make your WordPress development faster and life easier.

How to create a custom Facebook Page

Since my last post on the same topic, Facebook has streamlined the Page Tab creation process, so I thought an updated Facebook Page tutorial is long overdue. I have prepared a 3-part tutorial where I will teach you how to create a custom (1) Facebook Page using (2) Facebook’s Page Tab application, and finally I will show you how to serve the tab content using (3) WordPress.

Part 1: Create a Facebook Page

Step 1: Head over to http://www.facebook.com/pages/browser.php and click on “Create Page”.

Step 2: Select the type of Page you want to create, fill up the information and click on the “Get Started” button. In this tutorial I will be working on a “Website” fan page, which you can find under “Brand or Products”.

Step 3: If you have a profile photo ready, you can upload it on this page. Be creative about this space and make your profile photo full size, which is about 180px wide and 540px tall. Click on “Continue”.

Step 4: If you want to tell your friends/network about your page right away, you can do so in this page. However, I suggest not to do it yet since your page is still empty of content. Click on “Continue”.

Step 5: Enter the name of your website and description. Click “Continue”.

Step 6: Your page is ready.

Next: Create a Facebook Page Tab application

A case for affordable web design

How to lower your price without killing yourself, your business, the market or bringing on the ire of other designers

Recently in a Facebook group I belong to, an interesting discussion thread was started by my former creative director. The discussion revolves around a designer’s ad promoting his web design services for a low price of PHP 5,000. That’s USD 113.27 by today’s exchange rate. Not a few members reacted that designers who price their services this low are undermining the market, a fact which I agree to.

Last night I was mulling over this situation. He is not the first case of low-priced designer I have encountered, and definitely he will not be the last. I have also lost potential clients to other designers who undercut my quote. And I fear that designers who offer lower than prevalent rates are no longer confined to just within developing countries like the PHL or IND. I had a prospective client shoot down my proposal saying: I can get that project done for your price in Australia. In Australia! Really.

Hey there! Building a WordPress website for your client or your business? I just discovered this excellent hosting service built specially for WordPress sites. Check ’em out.

getflywheel_728x90

The Philippines’ golden age of web design business

Sorry but it’s over.

There was a golden age of web design biz in the Philippines, about ten years ago, when you can design a website and charge as high as PHp 2,500 up for a SINGLE PAGE for your services. But that age is long gone. One reason that fueled such high price was the fact that there were only a handful of web savvy professionals back then. Not even professionals in the real sense–(profession) an occupation requiring special education (especially in the liberal arts or sciences)–since many were not schooled in web design from a college or with a diploma to back the claim as “professional” (I hold a double degree in Med Tech and Fine Arts, weird mix I know). But eventually everyone got wind of this lucrative business, even the schools, and they created IT and multimedia departments to churn out hundreds of designers every year.

Then there is the outsourcing trend. Riding on the wave of ever increasing internet speed, tools were created that finally allowed real time collaboration between clients and suppliers from opposite sides of the globe. It enabled people to work outside traditional venues, and soho/remote working became a possibility. Online services sprang up around this new work paradigm–oDesk, eLance, etc.–and a client can now go online to find a supplier for almost any work required, from anywhere around the globe. He has the power to shop for the lowest price range he can get for a project. Designers everywhere logged on to these services, and there began a race to the lowest hourly rate just to attract clients. I have seen rates as low as USD1/hr, but that designer is in IND, and perhaps USD 1/hr is more than enough to live by in that part of the world.

Which brings us to the present. A saturated market with more designers coming in–not just local but global–more than willing to undercut the others to get a client.

The bad news: Cheap is in

Nowadays, the business news on tv center around the almost daily rise and fall (mostly fall) of US and EU economies. Should Filipino designers be worried? Frankly, I am. Most of my clients are from abroad. And if feedbacks from recent quotes I made for prospective clients are any indication, my current pricing rates seem unsustainable.

But I am not going to lay the blame solely on designers with lower-than-market-average rates. I believe that clients gravitate to them because current economic situation demands it. Everyone is looking for ways to cut overhead cost and stay afloat. Even big companies are cutting costs, so shouldn’t our clients be?

The good news: There is a market for affordable design and services

At least we can rejoice in the fact that the web design industry is not slowing down (at least I don’t think it is, I’m still getting a lot of inquiries just that more clients are turned off by my quotes). It’s just going to the lower price range. Our clients are rushing to the cheapest designers they can find. We can go into denial-mode if we like, but unfortunately that’s where the market is going. So should we join the rush and lower our rates? This is where things get touchy.

IMHO, yes.

But I believe there is a proper way of doing this. And most designers are doing it wrong, mainly because they simply look at the competitors’ pricing then undercut it mindlessly. This is the practice that is undermining the industry. What I am going to present here is what I think to be the proper way of lowering one’s price.

The price i$ right

I am not going to teach you how to arrive at a quote. There are many tutorials for that, and there’s not one standardized way to do it. When I compute the cost of a project, these are the basic variables that I consider:

  1. Design and features;
  2. Hours to be spent;
  3. Extraneous expenses;
  4. The client;
  5. My monthly overhead and how much profit I want to make to live according to my set standards.

Looking at these variables, I know that I can control nos. 1 to 4 to bring my pricing lower without compromising on no. 5 (which should be non-negotiable if you want to maintain a certain standard of living).

I am not going to teach you how to present your quote to the client either. Let just jump to the point where he says: it’s too high, I can get my grandson to do that for USD —- (insert some bullshitty price here). If you get this response, just walk away. I’m not kidding. But if you find yourself with a more reasonable client who understands your work but just doesn’t have the budget in this tough economic times, then try these suggestions on where to cut hours and arrive at a lower rate:

Design and features

Does the design require all the bells and whistles? Identify the must-have’s from the nice-to-have’s design features, and try to stick only to the absolute necessities. Same with site functionality. Sometimes, the client is not aware that what he is requesting will take a long time to build without adding much to the website’s usefulness. Communicate this clearly to the client and see if you can get him to take unnecessary embellishments out of the project scope.

Hours spent

Make your development process more efficient. This is a touchy topic to some–and there is also a right and wrong way of doing this, something I will blog about for next time–but I found that using frameworks and even commercial themes significantly decrease dev time. If you are against using frameworks and commercial/free themes, how about starting your own? Maybe you work in a niche market where clients ask for websites with similar layouts and features. Then start a base theme with all the similar layout and features built-in and use this for all your client sites. Offer clients a lower price if they agree on using the base theme with minimal modifications. You can even sell this as a commercial template and earn extra without you doing actual work.

You can also outsource parts of the project to someone with a lower hourly rate than you! Hire the guy who’s advertising his services for PHP 5,000 and let him do the boring, repetitive tasks like adding content to completed pages, etc.

Extraneous expenses

If your client demands face-to-face meeting, tell him you can lower your rate by doing Skype conference instead and save on gas or transportation expenses.

Need stock photos? There are still cheap stock photo sources out there, or look for willing suppliers from flickr. There are still people who will not mind you using their images in a design for free as long as you give them proper credit. Same for other media resources. But whatever you do, don’t steal other people’s work in order to save on expenses.

Your client

Go over your pricing. Maybe you are charging too high for your target market/prospective client. You cannot give the same quote for Aling Nena’s Online Sari-sari Store like you did for SM Supermart. Aling Nena will need a more modest set of features, so trim down your proposal and lower your quote.

Your monthly profit goal

Like I said this should be non-negotiable. After all, you cannot negotiate for a lower condo dues or apartment rent when times are tough. But if you must lower this (maybe you’ve done everything but still you lose out to Mr 5000), then you know where to cut corners: like don’t upgrade that iPhone until gen 10. Stuff like that.

Killing me softly with your price

And then there is Mr 5000. But maybe we are being too harsh on the poor guy. After all, I have not really seen the deliverable included with his price range. I can think of various cases where PHP 5000 is reasonable.

But if, for example, you have gone ahead with the cost-cutting steps I outlined above and somebody else came along and offered to do the same set of features for some ridiculously low price, what should a designer do? Well if your client went along, and the designer did deliver… then god help us all but I guess this industry IS in a downward spiral and will not be sustainable for long. Time to look for a new job.

BUT. The forums are rife with situations like this:

Client X gave his project to designer Y because he offered such a temptingly low price. Designer Y was ok to work with at the start but as the project dragged on he started to get flaky and ultimately disappear and the project not completed.

I can imagine designer Y’s nightmare scenario playing out behind the scenes, unseen by the clients who decide to work with this guy. Designer Y has to pay the rent like the rest of us, so in order to stay afloat he has to take on more projects, double than what the rest of us handles at a given time. Often he delivers sub-standard work. By juggling simultaneous clients, more than he can handle, at some point the balls start to fall. With too many projects going on, he burns out bringing his clients down along with him.

I should know. In a past freelance life I was a Mr 5000.

bITs: How to check how your site looks like on iPhone and iPad using your desktop Safari

Need to check how your website looks like on iPhone and iPad but you don’t have either device on hand? Fire up Safari, go to the Menu > click on Develop > User Agent > and you will see a list of browser agents to choose from. Among the list are iOS devices and if your website supports switching to a mobile theme, then you should see your site reload to the theme you assigned for iPad or iPhone.

Guest Post: Web designer apps for the iPhone

Web designers will find that the Apple iPhone offers a variety of handy apps and tools to use when designing and accessing websites. All a designer needs is access to the best mobile broadband connection available and they’ll have some of the finest iPhone apps for web designers’ right in the palm of their hand.

What the Font

 

What the Font is a versatile iPhone app that allows the user to take a picture of fonts found in magazines, posters or other artwork and connect to the My Fonts website to identify the font. Fonts found in graphics accessed through the phone’s web browser can also be used. This is very useful for web designers that want to incorporate different fonts into their web pages.

[hr]

Photobucket

 

Recognized as one of the web’s most comprehensive photo collection sites, Photobucket offers an app that gives web designers access to its site. Users can create, upload, manage and browse the extensive amount of photos directly from their iPhone. By using the best mobile broadband, accessing the photos will be a snap.

[hr]

Word Press

 

The Word Press app gives users access to their Word Press web pages with many of the features available right on their iPhone. With the best mobile broadband access pages can be updated, shared and created. Posting and commenting are also available.

[hr]

ServersMan

 

Using Wi-Fi or the 3G connection, the ServersMan app turns the iPhone into an extension of a web server. Most common file formats are supported including text, PDF, HTML, CSS, XML, Word, Excel and Powerpoint. With this app, designers can use the power of their iPhone to connect to their server.

[hr]

Palettes 3.0

 

The iPhone can be used to access colour palettes found via photos, graphics or the web with the Palettes 3.0 app. Colour palettes and colour themes can be created directly in the app. Different colour formats such as RGB, CMYK, and HSV are supported.

[hr]

CSS Cheat Sheet

 

This is a simple app that allows designers to determine the colour code for a particular element of their webpage design such as background, colour or border. The CSS Cheat Sheet app is very useful when doing CSS layouts.

[hr]

Python Cheat Sheet

 

This coding language app provides helpful information to designers when developing pages using the Python language. It gives help with the format and layout information in a simple to use manner.

[hr]

My Database Manager

 

This app allows the user to access the database on their server directly from their iPhone. It’s a very versatile tool for making changes to the database tables, running queries and gathering information about their databases. Having the best mobile broadband connection makes this app easy to use.

[hr]

Ego

 

For web designers that need to keep track of their web page stats while on the go, Ego does the job in a user-friendly manner directly on the iPhone. Ego supports a variety of web stat formats such as Google Analytics, Tumblr, Feed Burner, Vimeo and many others. Hourly, daily, weekly stats are available via the Ego iPhone app.

[hr]

FTP On the Go

 

Accessing files on the server is critical for web designers who are constantly on the go. Just as its name implies, FTP On the Go gives them the ability to upload and download files, create directories, rename, move and delete files, and perform other tasks directly from their iPhone.

[hr]
[box type=”info”]Article written by Spencer Hogg from Broadband Expert where the best mobile broadband deals can be found.[/box]

How to make your WordPress site mobile-ready

A quick way to create a mobile-optimized
WordPress site without changing your theme

Consider these findings from a Google study:

71% of smartphone users search because of an ad they’ve seen either online or offline; 82% of smartphone users notice mobile ads, 74% of smartphone shoppers make a purchase as a result of using their smartphones to help with shopping, and 88% of those who look for local information on their smartphones take action within a day. (Source)

Because of these findings, Google recently implemented a change in the “ads quality” ranking, as reported by AdWeek:

As of Wednesday, mobile optimization will now be included in Google’s “ads quality” ranking, which (along with pricing) determines what ads get served when. So—all other things being equal—an ad that links to a mobile-friendly website will get served alongside Google’s mobile search results before an ad that doesn’t. (Source)

Even if you do not use Adsense to drive traffic to your site, it’s obvious that the same arguments work for unpaid search results too. If your website does not work properly in mobile devices, you may be losing out on traffic. Therefore, make your website mobile-friendly. If you are using a Flash-only site, consider migrating your site to html5. If you have a website that is heavy on images and javascript effects that do not work in mobile devices, create a leaner mobile version.

If you are using WordPress to power your website, you are in luck. You can make your website mobile-friendly right NOW! The quickest way to make your WordPress site mobile-ready is to use a plugin that detects whether the user is viewing your site from a desktop or a mobile device and serve the appropriate theme depending on the result. The best plugin I have worked with so far is WPtouch. You can get the free version here.

The free version allows you to serve a mobile-optimized theme to iPhone, Android devices and a host of other smart phones, and includes customization options that should cover most WP website owner’s needs. You can customize the following options:

  • A different homepage;
  • Which pages to show in the menu;
  • Change menu icons from a selection of preset icons;
  • Exclude categories and tags;
  • Push notification using Prowl;
  • Google Adsense advertising;
  • Stats and other css codes.

WPtouch Pro

http://youtu.be/QpF4TRCmHyc

But if you want more advanced options, WPtouch also has a Pro version that extends the plugin features. Some of the notable enhancements I found in the Pro version includes:

  • iPad support. The free theme supports only iPhone, while an iPad will serve your desktop theme.
  • Theme customization. You can create a child theme and customize this to give your mobile site a unique look. This is especially helpful if you are careful about your site brand and do not want a generic theme for your mobile site.
  • Extended built-in icon sets for your menus, and the ability to upload your custom icon sets.
  • Assign a WordPress menu for mobile devices. In the free version, you can only assign pages and not an entire WP menu.
  • Ability to use in multi-site.
  • Backup settings.
  • License allows up to 5 websites.

And if you want to view WPtouch Pro version in action, try viewing my site in iPad, iPhone and Android devices.

advertisment

Disclosure: this post contains affiliate links.

WordPress for the clueless:How to build a WordPress site

Pinoy bloggers are on the rise. Surf the web today and you find many of our kababayans publishing blogs on a variety of subjects, some of the more popular topics being: travel, fashion, photography, gadgets, and business. Check which platform their blog is running on and more often than not you will find that WordPress is the engine powering many of these sites.

The growing interest in blogging has also extended to pinoy professionals and companies, especially because blogging is a good way to attract audience and potential buyers. Businesses are also becoming aware that WordPress is more than a blogging tool. It can serve as a content management system for business and commercial websites, and the hosts of available plugins can easily convert a site to an online store, events portal,  online collaboration tool, media streaming site, social network… almost anything you can think of. And if you can’t find a plugin to suit your business needs, there are many savvy developers out there who can build a customized solution for you.

Without a doubt, WordPress is driving even my freelance business. These past two months, I have had several emails from people inquiring about using WordPress for a professional portfolio, to set up an online store, or to convert an old company website into a content managed system.

But despite its popularity, WordPress can be a daunting subject for those without a background in internet technology, and most people who approach me belong to this group. They are business owners, or the marketing officer in a company or solo professionals, people who are not in IT and who would rather concentrate on managing their business than agonizing over geeky stuff. But they do wish to know if only a superficial understanding of WP and its machinations, just enough to feel secure that this is the tool they need before committing themselves to it.

And so I occasionally receive emails inquiring about the more technical aspects of WordPress, from dealing with domains and web hosts, to installing  and managing WordPress, themes and plugins. To help my clients and to stop myself from repeating my answers over emails when somebody asks me a question about WP, I have decided to write a guide on setting up WP and to direct future queries to these posts.

I will break up the posts into the following topics:

  1. How to choose and register a domain name;
  2. How to select a web host;
  3. How to install WordPress using cPanel;
  4. How to manually install WordPress;
  5. Where to find themes for your blog, niche-specific themes and how to install themes;
  6. Essential plugins for content management, performance, SEO and security and how to install them; and
  7. How to tune your WordPress site for performance and security.
The first topic will be out in a few days. If you would like to receive notifications about new posts, you can sign up to my newsletter using the form at the end of this post. You may also subscribe via feedburner, or add me to your social networks. Like my facebook page to get updates via fb.