How To Build a Mobile Detail List Webapp in HTML5/CSS3

Published September 18th, 2012 in Tutorials, Web Development - 6 Comments

There are countless mobile applications which use list views in their UI. Both Android and iOS offer platform-specific designs to make building applications easier. But there is another template you can build with just typical HTML5 and CSS properties.

In this tutorial I want to introduce a method for building clean HTML5 mobile web applications. For the demo below I’ve limited the width at a maximum of 800px but you can theoretically scale to any browser size. This is what makes mobile web development so profitable – the amount of control you have over the user experience. You can follow along with the tutorial code and download a copy of my source files from the link below.

Facebook-Style Inline Profile Edit Fields with Ajax

Published August 20th, 2012 in Tutorials, Web Development - 9 Comments

The standard Facebook layout is well known amongst fans of social media. Many of the dynamic form fields on the website started a huge trend of Ajax-powered backend scripts. Now we can see open source PHP developers offering examples of their code for dozens of platforms such as Wordpress, Drupal, or Joomla!

In this tutorial I’d like to focus on building a simple jQuery inline edit field. We won’t store any data locally, but instead we can update the HTML data directly on the page after each edit. It’s possible to then tie into a MySQL database and store all these values as default. But for now let’s code the mere frontend functionality.

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

Published August 10th, 2012 in Tutorials, Web Development - 1 Comment

There are not as many newer gaming fansites which utilize the power of HTML5 and CSS3 techniques. Some of the more popular gaming titles such as Final Fantasy and Kingdom Hearts have a devoted following. A large fan base will accompany forums and other online message boards – but this isn’t always the most successful CMS solution.

In this tutorial I want to demonstrate how we can build a simple retro Pokemon fansite layout using some newer CSS3 tricks. To keep the template fairly simple I haven’t included any extra jQuery effects. Although admittedly there is plenty of room for such a system of dropdown menus or sliding panels on the home page. Additionally I’ve included a few sprite resources ripped from the first 2 generation games.

Optimizing Your Mobile Design

Published July 10th, 2012 in Web Development - 4 Comments

With page views from mobile devices on the rise, shifting focus from standard to optimized and responsive design has become even more vital in preventing alienation of your site’s visitors. Some of the obvious elements exist: you have to use responsive design to make sure that your mobile website will fit on any size of screen. You have to design your mobile website so that people can use it with one thumb while they hold their phone with the other four and their dog’s leash with the other.  You have to design a mobile site so that it loads quickly and puts minimal strain on the user’s bandwidth limitations.

But there’s much more to the mobile web experience. Mobile websites are more than just tiny versions of your website, because people interact with mobile devices in different ways than they interact with desktop devices.

Coding a Guided Registration Form with jQuery

Published July 3rd, 2012 in Tutorials, Web Development - 3 Comments

Techniques for building a usable registration form can be a major factor towards bringing in new users. When you’ve got an overly complicated form it can scare away so many first time visitors. But a great technique for keeping these people around is coding form hints into the layout.

In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords. But it’s a great usability tactic which livens up even the most dull websites.

Picking a Mobile Strategy

Published June 28th, 2012 in Web Development - 7 Comments

With the proliferation of mobile devices growing ever larger, it’s become necessary to consider not just what content to put on your website, but how it will be viewed, and from where. Assuming your website is only going to be viewed on a computer monitor is about as outdated as an eight-track tape deck.

Today’s Internet enthusiast is just as likely (some evidence would say more likely) to look at your website from their smartphone. But here’s the problem—that awesome website you just paid big bucks for only looks awesome when viewed on a great, big LCD monitor. Try to bring it up on your phone and you’ll spend more time scrolling up and down, and left and right, to read it than you’ll want to spend.

12 ‘Must-Know” Advantages of PHP

Published June 27th, 2012 in Web Development - 8 Comments

The latest trend in today’s web world is using PHP. PHP is a general-purpose scripting language that is especially suited to server-side web development where PHP generally runs on a web server. Its clarity in design, well organized modules and better upkeep of various technologies, make it the most popular language in the online industry today. Its popularity and credibility can be gauged by the fact that reputed organizations like Harvard University and popular social Networking site Facebook, both are based on PHP. This is possible because PHP websites can be easily maintained, improved and updated from time to time.

Having said that, let us examine a few good reasons for you to pick PHP for your website.

1. Open Source

PHP is Open Source. This means it is readily available and absolutely free! If you are planning to hire PHP developers and they have a good background in C and Java, they will do excellently in PHP. If the truth be spoken, PHP is actually much simpler than the rest and so you can stay assured of fabulous results.

How to Add an Awesome Parallax Banner for Your WordPress Site

Published June 25th, 2012 in Tutorials, Web Development, WordPress - 6 Comments

The parallax effect has been used in the movie industry for a long, long time. Also, cartoons make great use of this simple technique. The general idea is to have 2 overlapped items moving in different speed ratios, to create an illusion of depth.

Parallax effects can work great even for websites. We can see many uses out there, and today we’ll take it a little deeper and create a banner making use of this technique.

The main challenge here is to do something simple because we’re dealing with dynamic content so everything will change pretty often. Our effect will need, for example, to automatically detect heights, since the only fixed dimension will be the width.

Also, we’ll learn how to do that on the top of a WordPress theme, in our case the Twenty Eleven theme (default theme), but you can easily use the concepts and snippets here to apply on your own theme.

Photo credits joeymc86

Cascading Content with CSS3

Published June 18th, 2012 in Tutorials, Web Development - 5 Comments

Today we’re going to creat a cascade content show with CSS3. The key point is using the checkbox button and a combination of the :checked pseudo-class with sibling combinators.

15 Free WordPress Theme Frameworks

Published June 12th, 2012 in Web Development, WordPress - 37 Comments

For designers and developers that frequently work with WordPress, theme frameworks and starter themes can have a noticeable impact of efficiency. Frameworks and starter themes can eliminate some of the repetitive work that you probably do with each custom theme. In addition, many frameworks provide additional features that can make your theme more powerful with less development time.

In the past year or two, responsive frameworks have become more popular. Since designing and developing responsive sites and themes can be highly time consuming, these frameworks can be a great resource.

In this post we’ll take a look at 15 of the best free WordPress theme frameworks and starter themes. There are also a number of outstanding premium options, but in this post we’ll focus on the free ones. Despite being free, these resources can be highly valuable.

Bones

The Bones framework comes in two variations: classic and responsive. The classic version is built on the 960 Grid. The responsive version gives you are starting point to design for multiple devices, with a stylesheet set up for media queries and a mobile first approach. Bones isn’t intended to be a framework for which you develop child themes. Instead, it is intended to be a project template.