Skype Extension for Firefox troublesome
on July 15th, 2010 0I was working on a simple PHP form that would take in a phone number and other fields and add it to the database and eventually display it on the screen. As I was testing this form, I noticed that the phone number was getting added to the database but was not showing up on the screen. It seemed very weird. I could not see the phone number in PHPMyAdmin either. It showed up when I wanted to edit a record.
To make sure I did not have an error in my PHP code, I created a simple test.html with the following code in it:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Phone Test</title>
</head><body>
Phone Number: 123-234-3456
<br />
Another Phone Number: 980-989-9989
</body>
</html>
The first phone number did not show up but the second one was fine. If I replaced the dashes in the phone number with spaces, the number did not show up. I tried using parenthesis around the area code and still couldn’t see it on the screen. If I removed all delimiters, then the number showed up. It just drove me crazy. I tested the same web page in Internet Explorer and it showed up fine.
After struggling with this for a while, I opened up the error console and found many errors related to a Skype Firefox extension. I did not remember installing this extension. But, I did install Skype in my system. Apparently, when we install Skype, it automatically installs a Firefox extension which finds all the phone numbers on the web page and puts some CSS styles around it. It had a bug which caused the phone numbers to disappear. I disabled the extension by going to Tools > Add-ons. As expected, my page appeared fine.
Beware of extensions that get installed without your notice. You might see unrelated problems as a result of these extensions. As always, if you having a problem with the browser or if something is not showing up right, check the error console first.
Displaying a static front page for your wordpress blog
on July 13th, 2010 0Word press is one of the most popular content management systems out there. It is not only great for blogging, but also works really well for your portfolio. It can be easily tweaked and customized. There are a lot of free word press themes available for portfolio sites. If you are a web designer, you would definitely want to design one for yourself. Designing a word press theme and coding it up is very easy. (Check back for a tutorial on this).
Word press makes it very easy to maintain your site. Displaying your portfolio is a breeze with its many plugins.
Once you install word press and upload your theme, you need to change your settings to convert your site into a portfolio site. You can also have a blog as a part of your portfolio.
The first step would be to create all your pages by going to ‘Pages > Add New’.
If you wish to have your blogs displayed on the front page, then you do not have to make any changes. Just go the pages section of your admin login and edit your pages.
If you wish to display a static page as your front page, then go to ‘Settings > Reading and do the following:
Specify a static page to be displayed as your front page. Then select the the page which you wish to display as your front page of your site (this is the page you will see when you type your site url) from the drop down menu.
If you do not have a blog, then you will not select any page in the Posts page drop down. Now, update your new settings.
You now have a portfolio page ready to display your work to the world.
If you like this post, subscribe to the feed. I will have more on customizing your word press theme in the coming weeks.
CSS vs Tables
on May 19th, 2010 1The other day, my husband and I had an argument over CSS and Table based layouts for web pages. His point was that tables are more easier to predict and give a structure to the website where as with CSS it is rather difficult to achieve this. I think it is true to some extent. I used to design websites with tables before I learnt CSS. Now, I don’t think I would ever go back to table layouts entirely. Here are some reasons why CSS based layouts are better.
File Size:
The file size with CSS based layouts is smaller which helps in faster loading of the site. Table based layouts have a lot more tags that result in a larger file size. It has been found that CSS based layouts usually load 2-4 times faster than table based layouts. It also takes up less bandwidth. Some hosting providers charge based on the amount of bandwidth used. So, using CSS layouts helps lower those costs especially if it is a large site. Patrick Burt has some good suggestions to reduce file sizes with CSS.
Cheaper and faster redesign:
In CSS based design, the content of the website is separated from its visual appearance. External style sheets contain all the styling information. Modifying the information here changes the properties across the entire website. So redesigns are faster and cheaper.
With table based design, the content and the visual appearances are mixed together. So, changing it takes a lot more effort and is error prone.
SEO:
CSS based designs help with Search Engine Optimization. Since the file size is smaller, it is easier for search engines to crawl through the site. In a CSS based layout, the information is organized better than a table layout which also makes the spiders find the important content. More information regarding CSS and SEO can be found here.
Room for more creativity:
CSS makes it easy to code very complex designs. Achieving the same level of complexity with the tables requires a lot of nested tables which increase the file size. It also has less room for improvement or any changes in the future. CSS based designs are fluid and have more room for creativity.
More accessibility:
Since the flow of information is better in CSS based designs, it is easier to make the pages accessible for the disabled by using screen readers and other devices.
Skill in Demand:
The reason I pushed myself to learn CSS is because, everybody wants to hire a designer who can create table less layouts. That is pretty much the norm now. So, if learning CSS was going to get me more projects and clients, I thought why not?
CSS does have some drawbacks too . It has browser compatibility issues. Some styling properties need to be modified for the specific browser. Adding simple hacks in the style sheet makes the pages cross browser compatible. There are number of CSS hacks available on the internet. You can see some of the simple CSS hacks I have collected from many forums and websites.
Even though I love using CSS, I still use tables for any data that needs to be presented in a tabular form. That’s all I use them for. Before learning CSS, I thought tables were the best and I was reluctant to learn the CSS styling properties. It took me time and a lot of effort (since I was doing it on my own) to learn CSS but it was definitely worth it.
Some interesting and useful information about CSS layouts and techniques:
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
Mailing Lists
on March 13th, 2010 0A couple of days back I finished setting up a mailing list database for two of my clients. I searched a lot on Google for one that is free and easy to use. Not many free ones out there. There are many mailing list providers which are free if you are sending out few emails like 25 or 30. Anything more than that, you will have to pay a monthly fee. Of course, the monthly fee under $10.00 per month is not so bad. But, you can do without it. I looked at many PHP scripts and other sources.
I finally ended up installing Dada Mail. The free version is available through simple scripts through your hosting account. If you do not have access through your hosting account, you can download and install it from their website. It is very simple. There are instructions for basic and advanced installation. If you are overwhelmed with all the instructions, they offer a semi automatic installation which works with many hosting services.
Here are some others that I found in the process of my search:
Bravenet Web Services
You can choose a free version and an upgraded pro version. The pro version costs $99.95 per year.
The free version offers a few templates that can be used for your newsletters. You can edit the colors and layout of the templates and just edit the main content to add your information. Very simple for new users. If you are planning to start a newsletter without outside help, this is a good start.
If you wish to add background images to your newsletters, you need to have the pro version.
The free version has ads but the pro version is add free.
I have used this mailing list provider to send out monthly newsletters for a client. I liked it. It is very simple to use but is not free. If you wish to send up to 25 emails per month, then you can use the free version. There are 3 different payments starting from around $3.50 per month. I now switched the client to Dada mail as it is free.
You can find many other mailing list providers here.
SEO
on March 5th, 2010 0Whether you are a novice in the field of web designing or an expert, we are always looking for ways to improve search engine optimization. As we get further advanced into this topic, we might overlook the most basic but very important SEO techniques. This article here gives us a really simple understanding of SEO. If you are a beginner, this teaches you the basics of SEO to get you started.
How to add transliteration plugin to word press
on February 23rd, 2010 0There are many plugins that offer transliteration support to your word press blogs. I maintain another blog and wanted to blog in Telugu. So, I searched for those plugin’s and here are the two plugins that I really like. It feels good to be able to blog in your language.
Google transliteration: This allows visitors to your blog to comment in any of the supported languages. It supports many Indian languages too.
WPGoogleLangTransliteration: This allows you to blog in any of the supported languages. There are many Indian languages supported by this plugin.
You can install these plugins from your word press blog. Click on plugins-> add new and search for transliteration. Click install and you are ready to blog in any of the supported languages.
Valentines day wordpress theme
on January 26th, 2010 0I just finished working on a new wordpress theme. Valentines day is coming up in a couple of weeks. So, I decided to design a theme with beautiful hearts. It is a three column theme with widget ready sidebar.
So, here is the theme.
Download the theme.