Philip Northeast's Web Design Tips

philnortheast.com

Philip Northeast’s Web Design Tips

The web is a fast moving place, riding on a raft of evolving technologies. Web developers who stand still soon get left behind.

This site is a collection of web design tips from my journey as a web developer and publisher.
One of the major developments in web site design has been the separation of HTML page structure from its appearance with the introduction of Cascading Style Sheets (CSS).

WordPress takes this trend a step further making content management a breeze by separating it from the HTML page code. This allows designers the freedom to create their own designs around the content management facilities offered by WordPress.

WordPress uses a fusion of PHP functions embedded in standard HTML code to create an HTML page for web browsers. The PHP functions manage user content in the HTML framework, with the appearance controlled by CSS.
Don’t panic, WordPress provides the PHP functions and designers include them.

There are many off the shelf designs, called themes, available for WordPress and it is possible to achieve an individual look rather than settle for bland sameness. Many theme developers include options for users to but these add complexity to the theme and adds a learning curve for users.

Some people find it is simpler to design their own theme – if you are one of those people then this is the place for you.


Web Page Formatting with CSS

Detailed appearance instructions in an HTML  web page

Cascading Style Sheets (CSS) allow web developers to separate appearance and structure from the content. This allows them to  re-use formatting code and speeds up the development and maintenance of web sites.

As browsers and Hyper Text Markup Language (HTML), evolved web page code became littered with HTML formatting information, defining the appearance of individual page elements such as text, graphics and links.

Each element had to have their appearance specified individually and as the display capabilities grew pages became over run with detailed HTML formatting code. While the code is hidden from the reader, they suffer because web page designers were spending increasing amounts of time writing or editing a myriad of individual appearance code snippets.  Instead web masters could providing new content or updating appearance. (more…)


Responsive Web Design

Developers usually use the larger screens while many readers use much smaller screens for the web

The new buzz in the web world is  Responsive  Design.   The popularity and increasing power of mobile devices  results in  more people using them to access web pages.

Google is encouraging web masters to make their sites  easy to view on  smaller platforms.  Also many  visitors from around the world use their mobile devices to view my sites, so it was an obvious thing to do.  I am one of the people who use their  smart phones  to  read web pages. So embracing Responsive Web Design is a natural progression.  This also reflects my own frustrations with sites that do not fit a mobile screen, and consequently require sideways scrolling and zooming to read the articles.   (more…)


Semantic HTML5 Elements

The HTML5  specification includes some new semantic structural elements. Do not be fooled by the fancy language, it only means the names of the elements relates to their function.

There are already a couple of familiar HTML structural elements with meaningful names, <head> and <body>.

The <head> tag naturally sits at the top of the web page   and contains information about how the page is displayed for the web browser. (more…)


WordPress Navigation Using Pages and Categories

WordPress has two main methods for navigation and post presentation available for  theme designers.  They can use custom pages or categories to organise posts for readers.

In WordPress pages are for an overview of topics while categories organise collections of related posts. Using categories as the primary navigation method displays posts in order of  their creation, with the latest shown first, revealing WordPress’s blogging heritage.

Choosing WordPress pages as the main navigation method is the WordPress  strategy  for creating a Content Management system (CMS). In this strategy posts are not as time related as the simpler category method, and each post is equally important. A WordPress page uses categories for  lower level navigation to posts for a topic. (more…)


the_excerpt() or the_content()

There are two ways to present a teaser of the content in a post in the WordPress loop.

The first is using “the_content()” command, the normal method used in a single post template to present the whole post. However, it can be used  on pages such as the front or index page  where only part of the post is required and there is a link to the full post.

This  modification is done at the editing stage using the more tool to insert this break mark in the post. This more tag is ignored in the single post template so the full post is shown.

The alternative is to show a portion from the start of the post using  “the_excerpt()” command.  This has a similar to using the “more” tag in “the_content()” but it is applied to every  post when it appears on pages such as the front or index page.

adding a more tag to a post in the WordPress editor

adding a more tag to a post in the WordPress editor

The choice depends on the proficiency of the content authors. Using a fixed excerpt is good so  the authors do need to configure the front page teasers.

Conversely, where the content author is more involved in the design and editorial control of the web site, then manually inserting the “more” tag  with the_content()  is the preferred option.  Sometimes the post is short enough to show it all on the front page.


What in the world is WordPress

The WordPress content interface is like a simple word processor

Word Press is an open source Content Management System for web sites, as well as an organisation of volunteers that produces the program.

The WordPress organisation also offers free hosting for basic WordPress sites. Hosting the site on another external server allows web publishers to take advantage of the full power and flexibility of WordPress.

WordPress started as a simpler blog platform, but has grown into a popular Open Source  flexible platform for hosting blogs, or it can now function as a Content Management System (CMS) with one to many users involved in its operation.

There is a vast array  of free WordPress web site designs, or themes. and there are also commercial custom designs. It is possible with a knowledge of HTML and CSS techniques to create your own WordPress theme. The overarching thrust of Philip Northeast’s Web Tips  is starting with a simple HTML web design and turning it into a WordPress theme design. (more…)


HTML Keeps Getting Better

The purpose of HTML, or Hyper Text Markup Language, is to tell  browsers how to display web pages.

There are three basic elements in an HTML web page; structure, appearance and content.  In a simple web site these happily co-existed in the one HTML file. The growth in size and complexity of web sites meant separating these functions made managing them more efficient. (more…)


Web Page Formatting with CSS

Cascading Style Sheets (CSS) simplify HTML page development and  are an important step in separating web page code from the content.

As browsers and Hyper Text Markup Language (HTML), evolved web page code became littered with HTML formatting information, defining the appearance of individual page elements such as text, graphics and links.

Each element had to have their appearance specified individually and as the display capabilities grew, pages became over run with detailed HTML formatting code. While the HTML is hidden from the reader, they suffer because web page designers were spending increasing amounts of time writing or editing a myriad of individual appearance code snippets, rather than providing new content or updating appearance. (more…)