Tag Archives: css & HTML

Resolving CSS conflicts

When we use multiple sources for scripts to create a website, the possibility of conflicts between codes increase significantly. It should not deter you from using multiple vendors/programmers for your website because the advantages that comes with them are too large to be ignored.

Skip Tech Jargon

We can resolve such conflicts in several different ways depending on what is causing the problem. Today, I am going to talk about CSS (Cascading Style Sheets) specific conflict resolution methods. It is a widely used language for styling of web based text and media. It is so popular, I cannot think of a single major website that is completely CSS free. The CSS conflicts are easy to resolve because CSS web standards are very flexible. For example, if you would like to change a condition in a styles sheet, you may not have to edit the original file. Instead, you may be able to inject the change from outside. I am going to show you how to change a behavior defined in a CSS file without changing the entire file.

WordPress Theme Conflict with GravityForms

My desktop theme, Graphene conflicts with an element in GravityForms that controls the alignment of buttons. The theme uses the same tag for the buttons which are aligned to the right. However, I wanted my Contact Form’s “Submit” button to be aligned to the left.

Generally, "Submit" should be on the left side.
Generally, “Submit” should be on the left side.
How do you do this?

– First installed a Child Theme (WP).
– Find the specific code that causes the problem. I use the FireBug plug-in for Firefox browser to determine the specific code/code set.
– Test the code by changing it in FireBug
– Open the styles.css file in the Child Theme in your WordPress Editor
– Enter (copy/paste) the CSS code in question and change the alignment value

/*
GRAVITYFORMS : Correction to Graphene button
*/
.block-button, .block-button:visited, .Button, .button, #commentform #submit, .wpsc_buy_button {
  float:left;
}

But if you just did that, it will align all the buttons to the right. I don’t want that! To fix this, I can edit the CSS again, but this time with the post identification in which the change should be applied.

/*
GRAVITYFORMS : Correction to Graphene button
*/
.postid-80 .block-button, .block-button:visited, .Button, .button, #commentform #submit, .wpsc_buy_button {
  float:left;
}

Now all the other buttons will be alinged to the right, except in post with the ID 80. This will keep the theme specific styling and yet allow the second developer’s code to run as intended without any conflicts between them!

Now the "Submit" is on the left side!
Now the “Submit” is on the left side!

Yet, all the other buttons are on the right side!
Yet, all the other buttons are on the right side!

Word of Advice

When you working with programming languages, it is impotent to READ the basics of the language. Any CSS manual will provide you with the information needed for the task above. If you would like to be proficient at web based coding, please try out the FireBug. It can even make the learning the CSS language fun. For example, this is a very general CSS outline for this type of modification;

/*
YOUR COMMENTS (HUMAN READABLE)
*/
.POST_ID-HERE .WHAT_EVER_ELEMENT_TO_BE_MOD {
  VARIABLE:ACTION;
}

Yes, I said this over and over, but still I find my readers seems to forget. Please make good backups not only before you edit a file, but during incremental edits to avoid major code conflicts.

Creating a skin from Graphene theme

Please note this article is specifically written using Graphene Theme. The concepts can be implemented on others themes with slight modifications.

Yes, WP is a very flexible CMS with wide range of third party extensions. Another reason for it’s flexibility is that the developers of WordPress CMS are pushing for multipurpose program. Within few years of launch, it went from a casual and easy to use blogging platform to a large scale web management system. To me it is a good thing for average user. Like I always believe, jack of all trades is better than mater of none.

Skip Tech Jargon

Mix and match

When we have so many open source free software to choose from, why not use them all? Most of the time, it is better to use specific software for particular task than to use one for all. WordPress (WP) for blogging and small scale websites, Drupal for large scale websites with large user base, phpBB for forums, phpList for newsletters, etc are few specialized software out of many. If you are designer then you would have to theme each and every one of the independent system to match each other. This can be done in two ways; by creating themes or through skinning.

What is skinning?

Both skins and themes creates “holistic and integrated spatial organization” of materials in their own ways. Skinning is different from theming because what skin keep all the elements of one platform and embed into the looks and feels of another. It neither changes any theme files nor create a valid theme. Themes directly change the structure of the front end interface and they are limited to the conditions of the program. For example, if I want to create a phpBB theme (a well written one), I have to comply with the guidelines for phpBB. Skinning takes all those conformities out of the equation because it is just a “wrap around” for “eye candy”. Once a skin is extracted from one program and installed on another, it just apply the same/similar style across different platforms.

Graphene theme skin

I will guide you on how to skin a WP theme using Graphene for WordPress. Some parts of this site uses phpBB and phpList with this exact skin. First take a back up of all your files and data. I would take up a task like this at nadir hours. You don’t want to mess with any code when your website is full of visitors. If you are launching a new site, consider things like forums before hand.

Copying the code

Log in to your website and choose appropriate Column Option. It is better to choose an option with no side bars because the screen real estate is very important. You can do do this by two ways in the Graphene Theme. One is using the Graphene Options.
Log in –> Dashboard –> Appearance –> Graphene Options –> Display(tab)

This will make the entire website (each and every page) default to whatever you choose. Another way to do this is under each post/page, you should find an option to choose Column configurations specifically for the current post/page. I used the later since I don’t want the entire website to have no columns during the setup.

After you setup the page/post, visit the page and go to the source code from your browser. Copy the code from div id="container" to div id="content-main" class="clearfix grid_16". Do NOT copy the following code. It will break your site since this is specific to my site.

The following code is used as an example. DO NOT copy the code and paste to your system even if you are using this theme. I am NOT responsible for any issues arise out of editing the core files of phpBB and/or WordPress.

<div id="container">
<div class="bg-gradient">
<div id="container" class="container_16">    
<div id="top-bar">

<!--Top Social Profiles bar-->
  <div id="profiles" class="clearfix gutter-left">
      <a href="https://G+_URL" title="Sanuja on Google+" id="social-id-1" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on Google+" /></a>
      <a href="http://FB_URL" title="Link sanuja.com on FB" id="social-id-2" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Link sanuja.com on FB" /></a>
      <a href="LI_URL" title="Sanuja on LinkedIn" id="social-id-3" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on LinkedIn" /></a>
      <a href="TW_URL" title="Follow on Sanuja Twitter" id="social-id-4" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Follow on Sanuja Twitter" /></a>
      <a href="http://FULL_FEED_URL" title="Subscribe to sanuja.com RSS feed" id="social-id-5" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Subscribe to sanuja.com RSS feed" /></a>
  </div>

  <!--Search form-->
  <div id="top_search" class="grid_4">
      <form id="searchform" class="searchform" method="get" action="http://MAIN_URL">
      <p class="clearfix default_searchform">
      <input type="text" name="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value="Search" />
      <button type="submit"><span>Search</span></button>
      </p>
      </form>
   </div>
 </div>

<!--Banner image->
<div id="header">
<img src="http://BANNER_URL.jpg" alt="" class="header-img" />        	       
<h2 class="header_title push_1 grid_15"><a href="http://MAIN_URL" title="Go back to the front page">Sanuja Senanayake</a><h3 class="header_desc push_1 grid_15">noreply@sanuja.com may end up in spam. Check your spam box.</h3>                
</div>
    <!--Main navigation menus-->
    <div id="nav">
                <div id="header-menu-wrap" class="clearfix">
			<ul id="header-menu" class="menu clearfix"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://MAIN_URL"><strong>Home</strong><span>Index Pages</span></a>
<ul class="sub-menu">
	<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://sanuja.com">Front Page</a></li>
</ul>
</li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://FULL_URL/about"><strong>About</strong><span>Site Information</span></a>
<ul class="sub-menu">
	<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about">About this Site</a></li>
	<li id="menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/about/biography/">Biography</a>
	<ul class="sub-menu">
		<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/cv">Résumé (Senanayake)</a></li>
	</ul>
</li>
	<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/system">Home Network and Servers</a></li>
	<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/faq">Frequently Asked Questions</a></li>
	<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/copyright">Copyright &#038; Privacy</a></li>
	<li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/about/sitemap/">Site Map</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-ancestor"><a href="http://FULL_URL/category/uncategorized/"><strong>Categories</strong><span>Article by Category</span></a>
<ul class="sub-menu">
	<li id="menu-item-1769" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/computer-science/">Computer Science</a></li>
	<li id="menu-item-2635" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/ce/">Consumer Electronics</a></li>
	<li id="menu-item-1716" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/earth-science/">Earth Science</a></li>
	<li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/documentary/">Documentary</a></li>
	<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/opinion/">Opinion</a></li>
	<li id="menu-item-1142" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/philosophy/">Philosophy</a></li>
</ul>
</li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/"><strong>Resources</strong><span>Exam Bank/Links</span></a>
<ul class="sub-menu">
	<li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/">Exams and Quizzes</a>
	<ul class="sub-menu">
		<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/anth201/">Anthropology 201</a></li>
		<li id="menu-item-1512" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/cpsc217/">Computer Science 217</a></li>
		<li id="menu-item-999" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy201/">Geology 201 GLGY/GOPH I</a></li>
		<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy311/">Geology 311 Mineralogy</a></li>
		<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy323/">Geology 323 Geochemistry</a></li>
		<li id="menu-item-2489" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy341/">Geology 341 Structure</a></li>
		<li id="menu-item-2499" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/goph355/">Geophysics 355 Exploration</a></li>
		<li id="menu-item-1754" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381/">Geology 381 Strat &#038; Sed</a></li>
		<li id="menu-item-2064" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381-final/">Geology 381 Strat &#038; Sed Final</a></li>
		<li id="menu-item-1426" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/alberta-class-5-gdl-quiz/">Alberta Class-5/7 GDL Quiz</a></li>
		<li id="menu-item-1472" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/canadian-citizenship-test/">Canadian Citizenship Test</a></li>
		<li id="menu-item-1069" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/other/">Other Types of Quizzes</a></li>
	</ul>
</li>
	<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/links">External Links</a></li>
	<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://secure.sanuja.com/"><img src="http://sanuja.com/lock_24.png" height="12"> Secure Access</a></li>
</ul>
</li>
<li id="menu-item-990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/science/"><strong>Science</strong><span>Geology/Computer</span></a>
<ul class="sub-menu">
	<li id="menu-item-991" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/">Introduction</a></li>
	<li id="menu-item-3038" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/computer-science/">Computer Science</a></li>
	<li id="menu-item-3026" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/earth-science/">Earth Science</a></li>
	<li id="menu-item-1722" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/field-geology/">Field Geology</a></li>
	<li id="menu-item-987" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/funny/">Funny Science</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-ancestor"><a href="http://FULL_URL/contact"><strong>Contact &#038; Feedback</strong><span>Please Leave a Comment</span></a>
<ul class="sub-menu">
<li id="menu-item-2965" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-577 current_page_item"><a href="http://FULL_URL">Subscribe to Newsletter</a></li>
	<li id="menu-item-1286" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/forum/">Forum</a></li>
</ul>
</li>
</ul>            
    <div class="clear"></div>
</div>
<div class="menu-bottom-shadow">&nbsp;</div>
</div>
<div id="content" class="clearfix hfeed">
<div id="content-main" class="clearfix grid_16">

You have to use the exact location of each file and replace FULL_URL plus whatever comes after that. For example, I have http://sanuja.com/blog/about/ instead of http://FULL_URL/about/ in the file I use.

Editing phpBB

After a successful install of phpBB, open overall_header.html and overall_footer.html file using cPanel, FTP or other back-end file access method in the following location:
…YOUR_INSTALLED_FOLDER / styles / prosilver / template /

The prosilver is a default theme that comes in the phpBB software bundle. You may edit any other theme and/or copy the theme for backup before editing it. Which ever the theme you decide to skin, find the template folder because that’s where we will find,

    → overall_header.html
    → overall_footer.html

In the overall_header.html locate the the area in which the phpBB begins it’s theme and paste the code just above it. I entered it in the first line after the body of the header file;

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

For the overall_footer.html repeat the same process except make sure all your div tags are closed properly. I found two divs not closing at the end causing the entire foot menu to get stretch. Of course, you add the footer code from WP at the appropriate place in the footer file. I added after the following code in the footer file;

<div>
     <a id="bottom" name="bottom" accesskey="z"></a>
     <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

Copy the information for the skin head as instructed above. If you have a different theme, then go to the source code of a loaded page and find the CSS containers for header and footer.

Summery

For those of you who tying to implement skins across WP and phpBB follow the following guidelines (with any theme):

  1. Install WordPress and phpBB on your server (recommend using two different folders).
  2. Make a backup of each system before editing the code.
  3. Create a page with no side bars (recommended, but may use side bars).
  4. Load the page/post on a browser and view the source code.
  5. Look for any div elements; where do they start, where do they end and what do they contain.
  6. Only copy the header data from WP to import into overall_header, vise versa. When copying, copy the information within div elements with full URLs to prevent 404 errors.
  7. Use the documentation for the new system (in this case phpBB) for it’s outline files.
  8. Paste the data copies in step 5 into the appropriate location in the new system and save.
  9. Clear cache; on server/system, browser and any others that would store cache files. I would clear the cache after completing on each and very single step. I recommend updating large scripts in segments, which will reduce the possibility of a major code error.

References

Customizing the editor for coding

A lot of people hate software just because they do not like the look and feel of the user interface. Surprisingly even the knowledgeable “geeks” have strong preferences on the GUI (Graphical User Interface). This often takes away the focus from functionality and versatility of programs and impact negatively on high quality products.

The good news is that most programs have customizing options available for both GUIs and back-end. However, very few users are aware of these hidden gems. In this article we will discuss the customizability of the open source free software Notepad++ (“Notepad Plus Plus”).

Notepad++

Notepad++ is highly customizable and flexible enough to work with almost all programming languages. As soon as you save your file as a .php, .html, .py, .cpp, etc it will pick up all the standard syntax related to each language. In addition you can use this program as a standard text editor.

The initial setup is simple. Download the program from here and follow the on screen instructions.

Select "Themes" during install.
Select Themes during install.
Make sure you select themes (check mark it). If you do not have much experience with the program, I would recommend you select exactly what I have above. I do not have an image of the next window, but if you are unsure, do not select anything on the next window. Just move on as next, next, etc.

Once the installation is completed, go to settings on the top ribbon. Open Style Configurator…

Settings drop down menu.
Settings drop down menu.

In the Style Configurator window you have variety of options. You can have fun with this, but for now, I would select a per-configured set from Select theme drop down.

Styles selection drop down list.
Styles selection drop down list.
Personally I like black background because I find it better on my eyes. I spend hours at a time writing code and most people I talked to also found back background to be very pleasant (as opposed to white).
PHP syntax coloured (automatic) on black background.
PHP syntax coloured (automatic) on black background.
It is my personal preference. The beauty of customization is you can choose a theme and/or color scheme to get your ideal working environment. Since you can always reset these, I entourage you to experiment with it.

HTML-Kit (free version)

Don’t get fooled by the name! This is one of the best free code editors out there. It started as a basic HTML editor and then transformed into what it is today. Like Notepad++, it also have support for almost all languages. However, this is big HOWEVER, it is not open source nor it comes with all the customization features like Notepad++. You cannot change the themes without having to buy their “premium” version. While I have used this extensively in the past, I am tired of limitations in free version. Please try Notepad++ first and if you don’t find it useful, the second best option would be HTML-Kit free version. Why pay for features that already included in FREE Notepad++?

Other Editors

All general text editing software that allow saving files in different formats (.php, .html, etc) can be used for programming. If you are new to coding please find a software that have built in syntax highlighter (eliminate Microsoft Notepad). This will make those first few steps into coding fun.

Mobile friendly websites

The file sizes associated with web pages have increased as designs get more complex and rich in media. As expected network speeds have also increased to accommodate the growing bandwidth demand. When it comes to mobile Internet, it is lagging bit behind the conventional Internet. The download speed of a average Canadian household is about 85 Mbit/s in the top tier plans as of 2013, while the average speed of mobile Internet not even 1/3 of it. The gap is so big, it impacts negatively on the performance of general websites. This is why even media companies like CNN, BBC and CBC have developed mobile versions of their web content in addition to media rich desktop version.

The mobile Internet is growing at a rapid rate in almost every country on Earth. Hence, the demand for mobile friendly fast loading websites are growing and so are the tools to combat it. I will introduce you to those tools and their advantages and disadvantages.

Mobile friendly right out of the box

I can categorically argue that almost every single non-graphic/media oriented website in 1980s and 1990s were 100 % mobile friendly. Even the most early version of the Internet called bulletin board system probably more mobile friendly than the desktop version of this site. Today visitors are not only attracted to functionality but also the visual appeal.

There are several way to balance between the visual appeal and mobile functionality. The concept of responsive themes are not a new one because it is similar to those 1980s sites. What sets it apart now is that modern responsive themes do not compromise graphical elements. If you are using CMS (Content Management System) programs, then you can load a theme with responsive support. When someone enter the site on a mobile device or on a smaller resolution device, the theme width and dimensions of elements will change accordingly. This is a right out of the box type solution, in which web editors do not have to depend on outside applications or scripts for mobile version of the site. Obviously it is better than an independent mobile site like in the old days. When you have independent sites, you have to edit two different files when publishing a single post. Another advantage is if you do not have a CMS program, you could still use responsive themes to automate using CSS and other scripts. It is not that hard to implement a responsive theme on a HTML site.

But it is not the silver bullet either. One of the major faults in responsive themes is that if a visitor decide to re-size their window on a desktop, it will response to the change as well. Not only that, on mobile devices you lose the ability to just switch to full desktop mode. Because we have large screen devices like tablets and SG Note II/III, I find some responsive themes can be annoying to use.

Make it mobile

gmneoBy using a separate set of conditions for mobile users, you can create a mobile version of the same content with different a mobile friendly outline. In order to do this, you will install two different themes. A mobile detection script will pick up on visitor using mobile devices and automatically direct them to the mobile version of the site. If they wish, you can still provide an option for the user to switch back to the desktop version. If you are using a CMS, there are many plugins and extensions for both Drupal and WordPress. One of my favorite is Graphene Mobile Neo. I recommend using a mobile theme from the same developers who created your desktop theme to avoid any script conflicts and to retain all the short codes in the mobile version. Hence if you are using the Graphene Desktop version, please consider buying the their Mobile Neo version. A lot of people don’t know that Graphene WordPress theme is highly customizable and can be use even on large scale corporate environments. You can also use either versions of the Graphene theme as a stand along (without the need to have one version to support the other).

Unfortunately I have already purchased a mobile friendly theme for this site from another developer. It is actually far more expensive than Mobile Neo. It does not support any third party short codes without major modifications to the code. It is called WPtouch. I don’t say that their version is bad, but they do charge an arm and a leg for not only for initial purchase, but also for higher upgrade versions. They probably have the most popular mobile plugin in the WordPress market. I do not recommend them because I don’t think the theme worth $59 Canadian.

I have to be honest that I am bias towards mobile themes (as opposed to responsive themes). I don’t exactly remember where I read them, but several research groups have studied the load time and resource usage by a responsive and mobile themes. The conclusions of these studies are about 50/50 in support of mobile themes. I personally noticed that having a mobile theme and/or an independent mobile version to be more useful. The biggest advantage is that since you have two independent set of options for each version, you have full control over both versions. In addition, users now have the option to switch between the versions when using mobile devices. I publish a lot of Geology and Programming related articles here. One of the responsive themes I tried pushed some of my content to a side when viewing on a mobile window. It makes it harder to read and sometimes even useless all together. While I am sure someone will come up with a way to switch off responsiveness of a responsive theme (what a crap load of words, lol), I still prefer the customizations of mobile themes. You can also reduce the server load by preventing scripts specifically used on desktop, when someone use your mobile site. Another thing I did with mobile theme is to replace a code in mobile version to optimize usability. For example, let’s say you have a photo gallery. Each photo is open on a pop-up “lightbox” on desktop. If you have the same operation, but now on a very small screen, the pop up will most likely will either go off screen or will be too small to view. You could replace the code specifically in the mobile side to avoid such issues.

Problems with browsers

A major problem with browsers is that there are too many. Look at IE (Internet Explorer) disaster. I hate writing code just to make IE users happy. Depending on the mobile browsers your visitors use, your site will be displayed either right or wrong. Nope, I never seen half-right rendering. Specially if you are running a business, you need to have the online publications as smooth as possible. Even I found myself switching to desktop version of my own site because some of my images are improperly rendered in the mobile theme. This another reason why I support mobile theme with a desktop switch option!

Conclusion

At the end it is your choice! Some of you will disagree with my experience with WordPress mobilization methods. As long as you can keep your mobile visitors (customers) happy, that’s what counts. When designing and coding websites, keep in mind that most people are not as tech savvy as you are. Do not expect your visitors to spend time figuring out how to make their experience pleasurable. It is your responsibility to provide support for the site.

Building a website, the easy way

notepad_edit

I remember when I first started working on websites, the only program I used was the default basic text editor in Windows 98/Plus, Notepad. For me it was easy to create a website with HTML tags and such, but as some of you remember in the old days most websites were plain and simple (yep, there are still websites like that). Other than companies like Sun Microsystems, IBM, Apple and Microsoft, not many websites were “pretty” to visit. The Internet technology has came a long way with the rapid growth in web based technologies during the infamous dot-com bubble. This has open up new possibilities for the average consumer, otherwise redistricted to large companies. Content Management Systems or simple CMS programs are the best thing happen since the discovery of the number-pi (π). 🙂

Skip Tech Jargon

Content Management System (CMS)

It is a piece of software that installs on a web server that can be used either internally or globally for communication. They are much like email programs, except they manage HTTP content. What is HTTP content? Well, to put it simply, the HTTP stands for Hypertext Transfer Protocol. It is like English language that we use to communicate to each other. While English may not be understood by everyone, HTTP language is standard on almost all web servers. There are many others and variations such as HTTPS, FTP, SSH, etc still in use today but to keep this article as simple as possible, I would avoid talking about them.

Anyway, in the old days you have to type each and every code using a program like Notepad or later Notepad++, HTML-Kit and other more evolved editing software. These files are saved with either dot-htm or dot-html extensions. The tides have changed when a new language called, PHP (Hypertext Preprocessor) was instructed in 1995. It is what we called a server-side scripting language specifically designed for web development, but later spread into other areas. Again, I don’t want go into much details, check out Wikipedia if you really want to how it works. With PHP we can do things differently to benift the average user. With PHP, the CMS has gone into overdrive because it allowed the programmers to develop back-end codes for general public use. For example, you can create a web page and attribute different conditions just by choosing from a list of items (I will talk about Categories and Tags in WordPress later). This is why using a CMS makes building websites as easy as ABC.

It is easy to make a website

By using CMS programs, anyone can build a website within an hour (not talking about large scale content with millions of pages here!). However, it all depends on the decisions you take at the very beginning. If you have limited knowledge with web development, I recommend you use a simple to use CMS like WordPress. In fact, the best CMS for beginners in my personal opinion is WordPress. There are many argumentative articles on the web for or against one CMS program over the other, but even the opponent of WordPress would agree that it is the best stepping stone into the world of HTTP over much more complex CMS like Drupal or Joomla. I will explain why in a bit. But let me introduce you to WordPress.

wordpress WordPress is/was designed for blogging as an open source CMS. Open source means that the code goes into development will be publicly available to others. Because it is open, it grew in popularity among professional bloggers. As it grew in polarity so is the amount of add-ons known as “Plugins” which extended the customization abilities. It comes with a well organized graphical interface and a large community of supporters for those of you who are new to web development field. To get access to this program, you will most likely have to choose a hosting service provider with WordPress scripts/program support. Shop around and Google is your friend. However, be careful of choosing bad hosting companies like GoDaddy. Just because of a company spend money on advertising doesn’t mean they are good at providing the service. I am satisfied with my host, HostGator, but I cannot promote any one of them, because I want you to choose for yourself. The other option is installing the WordPress script on your own server. Well, if you have a web server, you shouldn’t be reading this article! The software itself is free.

How to use it?

Since there are well written documents on usages, I don’t see the point of publishing the same thing over and over. So please read New To WordPress – Where to Start on the official site. If you are a visual person, please try YouTube. It is very easy to follow and if you would like me to explain something here, please contact me with your questions.

Drupal, Joomla, DotNetNuke and the list goes on…

Uh… I don’t want to go into those deep philosophical and analytical arguments. I wrote this article for novice users. Yes, I have used every single one of them and I am more of an expert on Drupal and WordPress. I found Drupal, Joomla, DotNetNuke and others as great CMS programs with very good possibilities. But the learning curve for someone who is new to web publishing it can be overwhelming.

I am not the only one who thinks this way. In fact, the Drupal developers have recognized the “problem” (I don’t think Drupal has a problem) so they are trying to close the gap between WordPress and Drupal usability. This is obvious on their new version Drupal 7 release this year. If you look at the standard costs associated with building and managing a website, most web design companies change more for Drupal based sites than for WordPress bases sites. Most large companies and organizations like University of Calgary and White House (Government of USA) use Drupal. However, I do not buy into the argument that Drupal is safer than WordPress. It is not the WordPress that can harm your site, it is the plugins and themes which can cause problems. As long as you use well written themes like Graphene (Developer) and well written plugins (even official ones like JetPack you will be fine. Make sure you keep the CMS and everything script (plugins, etc) up to date by installing updates regularly.

Joomla also have a huge downfalls for average users. I found their updates to be erratic and usability is far worst than even Drupal. DotNetNuke is based on the .NET framework, open source and it only runs on Microsoft Windows environments. Not many service providers would be happy to go with a Microsoft Windows servers without asking you to pay for a premium. Even for me, it cost me more than $500 (Canadian) to get my hands on Windows Server software for my home unit with a student discount. I despite Microsoft’s (and Apple) for being such cry babies. I would not recommend DotNetNuke to anyone.

There are reasons why you would choose a CMS like Drupal. But I am not going to go into detail on that, other than to say, if you require a complex website with advanced user management, Drupal is probably the best. DotNetNuke is best for Windows Server environments while others will run on open source server operating systems.

Last word on ethics of the Internet. Respect others by avoiding copying contents from sites and posting as yours. Happy blogging and keep the Internet safe for EVERYONE!