This week we’re going to finish up our series on how to develop a clean website by laying out a secondary page. We’re going to include a secondary navigation bar along the top of our design, as well as include all of our text for the section on one page. This will eliminate the unnecessary loading of other pages when all that’s changing is the text. It will allow the visitor to browse your site quicker and be less work for you to develop. When all is said and done, this is what you’ll have developed:...
This is our third installment of how to design a clean a minimalist website. First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3. Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3. Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage. We left off in part two after we pulled our header, navigation and main image in to our layout. Now that we have...
The new HTML5 Markup Language has introduced several new element features not available in HTML4, for example elements like header, section, nav, footer, aside, and article. Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and earlier). The problem is that due to the way parsing works in IE, these elements are not recognized properly. This tutorial explains how to get HTML5 tags to work in IE8 and its earlier releases. It is possible...
Last week we discussed how important navigation is to a website and how developing an interactive navigation system will help give a clean, minimalist website a bit of character and make it feel modern and current. It’s too easy to make a clean website look dated and as though it were developed in the 90’s, so by injecting modern user interfacing techniques that are popular today you’re able to put the viewer at ease and reassure them that the content is fresh and up to date. We’ll pick up where...
In the last piece on our PHP online user poll, we look at the administrative service and how the site supervisor enters, deletes and manages the poll data. The first poll administrative page checks if the administrator is logged in. You can choose from Session variables or Cookies to check the site administrator login status. Once the application has confirmed the identity of the site administrator, the page lists the available polls. The first step is to use the class methods and variables in the class.polls.php...
So far in this series, we have developed the data layer (database tables) and the business layer (PHP methods) for manipulating the data. In this piece, we will look at the presentation layer that is used to display the poll question and poll results. The HTML header will check for the presence of a cookie (in case the user has voted previously) and refresh the page if it has timed out. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
There is one design style that can withstand the fluctuating trends that come and go in the design world, and that is to have a clean, simple, minimalist site. Think of sites like Apple, Amazon, and The New York Times. One thing you will notice that they all have in common is perfectly executed use of white space. However, there are some very subtle guidelines to follow or tips that you should consider when designing your own clean website. This tutorial will take you through the development process and...
This is the second part in our introduction to HTML5's video API. In part 1 of this series, I introduced you to the basic markup we'll be using to play the video, then I helped set up a simple script with which we were able to make the controls visible, while ensuring that the native controls will still be visible when JavaScript is disabled. We also touched on the use of JavaScript's addEventListener method, along with our first look at the video API -- the canplaythrough event. Let's dig a little deeper into...