Responsive Table with content

He has a good point. Data tables can be quite wide, and necessarily so. A single row of data needs to be kept together to make any sense in a table. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can’t get any narrower.

Responsive design is all about adjusting designs to accomodate screens of different sizes. So what happens when a screen is narrower than the minimum width of a data table? You can zoom out and see the whole table, but the text size will be too small to read. Or you can zoom in to the point of readability, but browsing the table will require both vertical and (sad face) horizontal scrolling.

1

So here’s what we are gonna do:

We’re going to use “responsive design” principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. If it is, we’re going to reformat the table.

We’re being good little developers and using Plain Ol’ Semantic Markup here for our table. Bare bones example:

HTML…

<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>

Our regular CSS is nothing special:

CSS…

/*Generic Styling, for Desktops/Laptops*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}

The small-screen responsive stuff comes in now. We’ve already figured out our minimum table width is about 760px so we’ll set up our media query to take effect when the narrower than that. Also, we’ll target iPads as they are right in that zone.

The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it’s kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each “cell”, we’ll use CSS generated content (:before) to apply the label, so we know what each bit of data means.

CSS…

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
/* Behave like a “row” */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

/*Label the data*/
td:nth-of-type(1):before { content: “First Name”; }
td:nth-of-type(2):before { content: “Last Name”; }
td:nth-of-type(3):before { content: “Job Title”; }
td:nth-of-type(4):before { content: “Favorite Color”; }
td:nth-of-type(5):before { content: “Wars of Trek?”; }
td:nth-of-type(6):before { content: “Porn Name”; }
td:nth-of-type(7):before { content: “Date of Birth”; }
td:nth-of-type(8):before { content: “Dream Vacation City”; }
td:nth-of-type(9):before { content: “GPA”; }
td:nth-of-type(10):before { content: “Arbitrary Data”; }
}

And so, desktops get the regular table experience, mobile (or otherwise small screens) get a reformatted and easier to explore table:

2

 

Responsive Web Design – Easy Steps To A Responsive Website!

Browsing the internet today is not limited to the desktop screen alone. Users are increasingly switching to web browsing through mobile phones, tablets or small notebooks, with screen resolutions varying from 320 pixels (for iPhones) to 2,560 pixels (for larger monitor screens). Thanks to HTML5 and CSS3 media queries, creating a cross-browser responsive web design is no more an impossible feat.

res

Let’s take you through 10 easy steps for designing a responsive website, this is just one approach out of the many that can be applied for getting a responsive web site, depending on the needs and nature of the site and other considerations.

1. Define The Viewport Meta Tag

The viewport meta tag modifies the browser viewing area. Therefore, the first step for responsive website design is to define the particular viewport meta tag. The default scale will be disabled and the tag will tell the browser to use the device width as the viewport width. You can include the following meta tag in your :

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

2. Create The HTML Structure

The next part is to define the structure of your website. This includes setting the page layout by defining the header height, the width of the content container, and of the side bar and the footer in terms of columns. You will also include any navigation elements and supporting images in your HTML structure if required.

3. Set The Features Of Your Style Sheet

Because you’d want your responsive website to have some basic features the same across all screen sizes, determine style features such as typeface, color, icons to be used, etc.

4. Start With Media Queries For The Smallest Screen

Now we move on to CSS3 media queries – the magic behind responsive web designs. It’s a good idea to start with smaller widths – about 320-480 pixels – as this will require you to only include the very essential content. Set the media query to a max width of 480px or less, and set the header height and font size accordingly.

5. Move On To Media Queries For A Relatively Large Screen

By a relatively large screen, we mean the screen of a tablet. So now you set the media query for a relatively larger screen with a minimum width of about 480px:

@media only screen and (min-width: 481px) {

}

You can add more columns for the tablet screen to be able to display more content.

6. Define Media Queries For The Large Screen

Finally, you’ll write the media queries for the desktop screen. Set a maximum width of something like 769px or 1100px:

@media only screen and (min-width: 769px) {

}

7. Add Content

Once you’ve defined the relevant commands, it’s time to add the meat to your website with the content. Add good content, including the most relevant ones for the small screen and more matter for the larger screens.

8. Make The Images Flexible

While you’ll be at it, don’t forget to make the images for your website flexible. Define the height and width of the image according to the media query for the relevant screen size.

9. Go For Flexible Embedded Videos

Using the same techniques mentioned above, you’ll also need to define the command for videos to make them flexible.

10. View The Final Demo

Finally, after all the things have been taken care of, you can view the final demo of your website. View it by resizing your browser, then check again on the iPhone, iPad, Blackberry, and other android phones.

Media Queries Css For Common Devices

Following are the media queries for most common devices:

/* All Smartphones in portrait and landscape ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in landscape ———– */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in portrait ———– */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}

/***** ANDROID DEVICES *****/

/* Android 240 X 320 ———– */
@media only screen
and (max-width: 241px) {
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in portrait 380 X 685 ———– */
@media only screen
and (min-width: 375px)
and (max-width: 385px) {
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in Landscape 685 X 380 ———– */
@media only screen
and (min-width: 680px)
and (max-width: 690px) {
/* YOUR STYLE GOES HERE */
}

/***** ALL GENERATION IPADS *****/

/* iPads in portrait and landscape———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}

/* iPad in landscape———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}

/* iPad in portrait———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* YOUR STYLE GOES HERE */
}

/***** Retina IPAD 3 & 4*****/

/* Retina iPad 3 & 4 in portrait and landscape———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape———– */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape———– */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* YOUR STYLE GOES HERE */
}

/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/

/* iPad 1 & 2 in portrait and landscape ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in landscape ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in portrait ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}

/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}

/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}

/* Only iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}

How to Make a Responsive Navigation

So, let’s just get started…

HTML

First of all, let’s add the meta viewport inside the head tag. This meta viewport tag is required for our page to scale properly inside any screen size, particularly in the mobile viewport.

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

…and then add the following snippet as the navigation markup inside the body tag.

<nav class=”clearfix”>
<ul class=”clearfix”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>How-to</a></li>
<li><a href=”#”>Icons</a></li>
<li><a href=”#”>Design</a></li>
<li><a href=”#”>Web 2.0</a></li>
<li><a href=”#”>Tools</a></li>
</ul>
<a href=”#” id=”pull”>Menu</a>
</nav>

As you can see above, we have six primary menu links and added one more link after them. This extra link will be used to pull the menu navigation when it is hidden in a small screen.

Styles

In this section, we start styling the navigation. The style here is only decorative, you can pick any colors as you desire. But in this case, we (I personally) want the body to have a soft and creamy color.

body {
background-color: #ece8e5;
}

The nav tag that define the navigation will have 100% full width of the browser window, while the ul where it contains our primary menu links will have 600px for the width.

nav {
 height: 40px;
width: 100%;
  background: #455868;
font-size: 11pt;
font-family: ‘PT Sans’, Arial, sans-serif;
font-weight: bold;
position: relative;
 border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}

Then, we will float the menu links to the left, so they will be displayed horizontally side by side, but floating an element will also cause their parent collapse.

nav li {
display: inline;
float: left;
}

If you notice from the HTML markup above, we’ve already added clearfix in the class attribute for both the nav and ul to clear things around when we float the elements inside it using this CSS clearfix hack. So, let’s add the following style rules in the style sheet.

.clearfix:before,
.clearfix:after {
content: ” “;
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

Since we have six menu links and we also have specified the container for 600px, each menu links will have 100px for the width.

nav a {
 color: #fff;
    display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
 line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}

The menu links will be separated with 1px right border, except for the last one. Remember our previous post on box model, the menu’s width will be expanded for 1px making it 101px as the border addition, so here we change the box-sizing model to border-box in order to keep the menu remains 100px.

nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}

Next, the menu will have brighter color when it is in :hover or :active state.

nav a:hover, nav a:active {
background-color: #8c99a4;
}

…and lastly, the extra link will be hidden (for the desktop screen).

nav a#pull {
display: none;
}

At this point, we only styling the navigation and nothing will happen when we resize the browser window. So, let’s jump to the next step.

nav-styled1

Media Queries

The CSS3 media queries is used to define how the styles will shift in some certain breakpoints or specifically the device screen sizes.

device-screen-size2

Since our navigation is initially 600px fix-width, we will first define the styles when it is viewed in 600px or lower screen size, so practically speaking, this is our first breakpoint.

In this screen size, each of two menu links will be displayed side by side, so the ul‘s width here will be 100% of the browser window while the menu links will have 50% for the width.

nav-600-3

@media screen and (max-width: 600px) {
nav {
height: auto;
}
   nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
 width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
 text-indent: 25px;
}
}

…and then, we also define how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint).

In this screen size, the extra link that we’ve added before will start visible and we also give the link a “Menu” icon on its right-side using the :after pseudo-element, while the primary menu links will be hidden to save more vertical spaces on the screen.

nav-480-4

@media only screen and (max-width: 480px) {
 nav {
 border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: “”;
background: url(‘nav-icon.png’) no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}

Lastly, when the screen gets smaller by 320px and lower the menu will be displayed vertically top to bottom.

@media only screen and (max-width: 320px) {
 nav li {
display: block;
float: none;
width: 100%;
}
 nav li a {
 border-bottom: 1px solid #576979;
}
}

Now, you can try resizing the browser window. It should now be able to adapt the screen size.

Showing the Menu

At this point, the menu will still be hidden and will only be visible when it is needed by tapping or clicking on the “Menu” link and we can achieve the effect using the jQuery slideToggle().

$(function() {
var pull        = $(‘#pull’);
menu        = $(‘nav ul’);
menuHeight  = menu.height();
$(pull).on(‘click’, function(e) {
e.preventDefault();
menu.slideToggle();
});
});

However, when you resize the browser window right after you’ve just viewed and hid the menu in a small screen, the menu will remain hidden, as the display: none style generated by the jQuery is still attached in the element.

So, we need to remove this style upon the window resizing, as follows:

$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(‘:hidden’)) {
menu.removeAttr(‘style’);
}
});

Padding vs. Margin

Most beginners get padding and margins mixed up and use them incorrectly. Practices such as using the height to create padding or margins also lead to bugs and inconsistencies. Understanding padding and margins is fundamental to using CSS.

What Is Padding and Margin?

Padding is the inner space of an element, and margin is the outer space of an element.

The difference becomes clear once you apply backgrounds and borders to an element. Unlike padding, margins are not covered by either the background or border because they are the space outside of the actual element.

Take a look at the visual below:

1_a

1_c

Margin and padding values are set clockwise, starting from the top.

Practical example: Here is an <h2> heading between two paragraphs. As you can see, the margin creates white space between the paragraphs, and the padding (where you see the background gray color) gives it some breathing room.

1_b

Margin and Padding Values

In the above example of the heading, the values for the margin and padding would be:

1    margin: 15px 0 15px 0;
2    padding: 15px 15px 15px 15px;

To optimize this line of code further, we use an optimization technique called “shorthand,” which cuts down on repetitive code. Applying the shorthand technique would slim the code down to this:

1    margin: 15px 0; /*–top and bottom = 15px | right and left = 0 –*/
2    padding: 15px; /*–top, right, bottom and left = 15px –*/

Here is what the complete CSS would look like for this heading:

1    h2 {
2    background: #f0f0f0;
3    border: 1px solid #ddd;
4    margin: 15px 0;
5    padding: 15px;
6    }

The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything

I can still remember the day I discovered the <li> tag. It’s not that I had never used list items before—I had built plenty of bulleted lists. What I discovered that day was that with a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer’s arsenal. So versatile is the list item, in fact, that you could build and entire website layout out of just <ul> <li> tag pairs. Of course, that wouldn’t be semantically correct, but you could do it. This article is a tutorial and a tribute to the amazing <li>.

Using <li>s for Horizontal Navigation

You can use unordered list items to present horizontal navigation buttons and other horizontal lists. When I first moved from table-based layouts to CSS, this was a big shocker for me. It opens up a world of possibilities and it makes your code oh-so-beautiful and easy to read. Not only that, it’s semantically correct. The li tag is meant to denote “list items”, and that’s exactly what a set of navigations buttons is—a list of links.  Here’s an example of a five-button horizontal nav bar made completely of list items.

<!– The CSS –>

ul{
margin: 0 auto;
padding: 0;
}
ul.horizontal_list li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;
}

<!– The HTML –>

<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>

This is how it should look:

horizontal_nav

So now we have a decent-looking horizontal nav with just a few lines of HTML and CSS and we didn’t use a single image. That’s not to say that images are bad, but if you can cut the download size of a page by getting creative with your CSS, why not?

Multi-column Lists with <li>

Building lists that wrap into multiple columns is quick and easy with <li>. When data is actually tabular (requiring column header, columns, and rows), you should use a <table>. But when you’re just looking to spice up the look of a list and make it a little easier to read, you should use this method. Just like any other set of <li>s, multi-column lists make for simple HTML code and easy rearranging of list items. Here’s how it works.

<!– Here’s the HTML –>

<div id=”list_wrapper”>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>

<!– Here’s the CSS –>

ul{
margin: 0 auto;
padding: 0;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
width: 200px;
}

/* The wider this li is, the fewer columns there will be */
ul.multiple_columns li{
text-align: left;
float: left;
list-style: none;
height: 30px;
width: 50px;
}

This is how it should look:

multiple_columns

The list items just stack against each other horizontally until they fill the width of the containing wrapper. In this case we have a wrapper that is 200px wide and each list item is set to 50px wide. Since 50 goes into 200 four times, that means we’ll have four list items in each row.

Cool <li> Background Effects

Want lists with cool bullets instead of the boring default black dot? CSS makes this possible with some simple adjustments to the background properties of your <li>. For this example, we’ll borrow our code from the first example and build on it.

<!– Here’s the HTML –>

<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>

<!– Here’s the CSS –>

ul{
margin: 0 auto;
}
ul.cool_background li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 25px;
margin: 5px;
background: url(cool_background.gif) 5px 5px no-repeat;
}

IMPORTANT: Don’t forget to make your “cool_background.gif” file and put it into the same directory as your page.

This is what it should look like:
cool_backgrounds2

Animating Your <li>s with a Rollover Effect

A combination of <li> and <a> tags, and a little CSS can make for a good-looking rollover effect. Using CSS to produce your rollovers is quicker and easier than JavaScript and it also makes it easier change in the future. All you have to do is add a link tag to each nav item and use the pseudo class “:hover” to cause a background change when a mouse moves over the link. Below is a basic example:

<!– Here’s the HTML –>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Mission</a></li>
</ul>

<!– Here’s the CSS –>

ul{
margin: 0 auto;
}
ul.rollover li{
text-align: left;
float: left;
list-style: none;
}
ul.rollover a{
display: block;
text-decoration: none;
background: url(cool_background.gif) 5px 5px no-repeat;
padding: 3px 10px 3px 25px;
margin: 5px;
}
ul.rollover a:hover{
background-image: url(cool_background2.gif);
text-decoration: none;
}

IMPORTANT: Don’t forget to make your cool background images and put it into the same directory as your page. This is what it should look like:
cool_backgrounds4

Three Column Fixed Layout Structure Using CSS

HTML structure
The following picture illustrates HTML/CSS elements I added on the page:

column

The structure is ready to use. You just have to redefine font, color background, font-style for each layer and HTML tag, and define other custom classes.

Step 1: HTML file structure
Create a new page and copy and past this code within <body> tag:

<div id=”container”>
<div id=”topbar”>Top Bar/Logo Layer</div>
<div id=”navbar”>

<a href=”index.html?home”>Home</a>
<a href=”index.html?about”>About</a>
<a href=”mailto:myemailaddres@email.com”>Contact me</a>

</div>
<div id=”main”>
<div id=”column_left”>
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id=”column_right”>
<h3>Categories</h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers…)
</div>
<div id=”column_right_adsense”>
<h3>AdSense</h3>
Adsense 120 X 600
</div>
<!– Don’t remove spacer div. Solve an issue about container height –>
<div class=”spacer”></div>
</div>
<div id=”footer”>© 2008 Information about your site</div>
</div>

Step 2: CSS file
Now, create a new css file and link it into index.html

/* ——————————
HTML Redefine Tags
—————————— */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ——————————
PAGE STRUCTURE
—————————— */

/* #container has an absolute width (780 pixel) */

#container{width:780px; margin:0 auto;}

#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}

#navbar a{height:28px; line-height:28px; padding:0 8px; display:inline;}

#main{width:auto; display:block; padding:10px 0;}

#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}

/* ——————————
CUSTOM CLASSES
—————————— */

/* Add here your custom classes … */

Save all and try This!

How to Create Post in WordPress

To write a post:

  1.   Log in to your WordPress Administration Panel (Dashboard).
  2.   Click the Posts tab.
  3.   Click the Add New Sub Tab
  4.   Start filling in the blanks.
  5.   As needed, select a category, add tags, and make other selections from the sections
    below the post. Each of these sections is explained below.
  6.   When you are ready, click Publish.

Screen Options

The Screen Options allow you to choose which Post Fields are displayed, or not displayed, in the underlying SubPanel. Clicking on the Screen Options tab shows a list of the columns with a check-box next to each column. Check the box for each Post Field you want displayed, or uncheck the box to not display that module. Click the Screen Options tab again to close the Screen Options. These options are saved so that you can customize how your own editing screen looks.

Note: As of WordPress version 3.1, some screen options on the Post Administration Panel are hidden by default if they have not been saved before. Hidden by default: Excerpt, Post Author, Discussion, Custom Fields, Slug, Comments, Send Trackbacks, Revisions.


Descriptions of Post Fields

Title 

The title of your post. You can use any words or phrases. Avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hypens/dashes, and other typical symbols in the post like “My Site – Here’s Lookin’ at You, Kid.” WordPress will clean it up for the link to the post, called the post-slug.

Post Editing Area 

The blank box where you enter your writing, links, links to images, and any information you want to display on your site. You can use either the Visual or the Text view to compose your posts. For more on the Text view, see the section below, Visual Versus Text View.

Preview button 

Allows you to view the post before officially publishing it.

Publish box

Contains buttons that control the state of your post. The main states are Published, Pending Review, and Draft. A Published status means the post has been published on your blog for all to see. Pending Review means the draft is waiting for review by an editor prior to publication. Draft means the post has not been published and remains a draft for you. If you select a specific publish status and click the update post or Publish button, that status is applied to the post. For example, to save a post in the Pending Review status, select Pending Review from the Publish Status drop-down box, and click Save As Pending. (You will see all posts organized by status by going to Posts > Edit). To schedule a post for publication on a future time or date, click “Edit” in the Publish area next to the words “Publish immediately”. You can also change the publish date to a date in the past to back-date posts. Change the settings to the desired time and date. You must also hit the “Publish” button when you have completed the post to publish at the desired time and date.

Publish box 

Visibility – This determines how your post appears to the world. Public posts will be visible by all website visitors once published. Password Protected posts are published to all, but visitors must know the password to view the post content. Private posts are visible only to you (and to other editors or admins within your site)

Permalink

After you save your post, the Permalink below the title shows the potential URL for the post, as long as you have permalinks enabled. (To enable permalinks, go to Settings > Permalinks.) The URL is generated from your title. In previous versions of WordPress, this was referred to as the “page-slug.” The commas, quotes, apostrophes, and other non-HTML favorable characters are changed and a dash is put between each word. If your title is “My Site – Here’s Lookin’ at You, Kid”, it will be cleaned up to be “my-site-heres-lookin-at-you-kid” as the title. You can manually change this, maybe shortening it to “my-site-lookin-at-you-kid”.

Save

Allows you to save your post as a draft / pending review rather than immediately publishing it. To return to your drafts later, visit Posts – Edit in the menu bar, then select your post from the list.

Publish 

Publishes your post on the site. You can edit the time when the post is published by clicking the Edit link above the Publish button and specifying the time you want the post to be published. By default, at the time the post is first auto-saved, that will be the date and time of the post within the database.

Post Tags 

Refers to micro-categories for your blog, similar to including index entries for a page. Posts with similar tags are linked together when a user clicks one of the tags. Tags have to be enabled with the right code in your theme for them to appear in your post. Add new tags to the post by typing the tag into the box and clicking “Add”.

Categories 

The general topic the post can be classified in. Generally, bloggers have 7-10 categories for their content. Readers can browse specific categories to see all posts in the category. To add a new category, click the +Add New Category link in this section. You can manage your categories by going to Posts > Categories.

Excerpt 

A summary or brief teaser of your posts featured on the front page of your site as well as on the category, archives, and search non-single post pages. Note that the Excerpt does not usually appear by default. It only appears in your post if you have changed the index.php template file to display the Excerpt instead of the full Content of a post. If so, WordPress will automatically use the first 55 words of your post as the Excerpt or up until the use of the More Quicktag mark. If you use an Explicit Excerpt, this will be used no matter what. For more information, see Excerpt.

Send Trackbacks 

A way to notify legacy blog systems that you’ve linked to them. If you link other WordPress blogs, they’ll be notified automatically using pingbacks. No other action is necessary. For those blogs that don’t recognize pingbacks, you can send a trackback to the blog by entering the website address(es) in this box, separating each one by a space. See Trackbacks and Pingbacks for more information.

Custom Fields 

Custom_Fields offer a way to add information to your site. In conjunction with extra code in your template files or plugins, Custom Fields can modify the way a post is displayed. These are primarily used by plugins, but you can manually edit that information in this section.

Discussion 

Options to enable interactivity and notification of your posts. This section hosts two check boxes: Allow Comments on this post and Allow trackbacks and pingbacks on this post. If Allowing Comments is unchecked, no one can post comments to this particular post. If Allowing Pings is unchecked, no one can post pingbacks or trackbacks to this particular post.

Password Protect This Post 

To password protect a post, click Edit next to Visibility in the Publish area to the top right, then click Password Protected, click Ok, and enter a password. Then click OK. Note – Editor and Admin users can see password protected or private posts in the edit view without knowing the password.

Post Author 

A list of all blog authors you can select from to attribute as the post author. This section only shows if you have multiple users with authoring rights in your blog. To view your list of users, see Users tab on the far right. For more information, see Users and Authors.

 

Create a Vibrant Modern Webpage Design in Photoshop

Taking a closer look into the world of web design this tutorial will cover the process of designing a vibrant and colourful modern blog layout in Adobe Photoshop. Beginning with a blank canvas we’ll go through the process of creating the entire structure and effects from scratch.
Image
This particular design is one I’m currently producing as a WordPress theme for Springy Developments, in the future we’ll take a look at the coding process and see how the site is pulled together into the final product.

Bear in mind that during the original creating of the concept, the process was much less clear cut that the following tutorial steps. Plenty of experimentation was conducted and elements were often recreated to test out what worked the best. However this walk through will hopefully give a good understanding of what tools and techniques are used during the creation of this chosen layout from scratch.
2
Open up Adobe Photoshop and create a New Document. I like to work on a large document that reflects the larger widescreen resolutions. Remember to use the RGB color mode with the site being viewed only on screen, and a resolution of 72dpi.
3

The first area I tend to work on is the page background, this is where a little interest can be introduced which fills out the space for those on higher resolutions. Choose a solid colour for the background, then drag out a radial gradient from the top centre. Obviously the choice colour palette is down to you, but here I’m using a mix of green and cyan.
4
Open up a brown paper resource from a recent post, this will be used to add some interest in the form of texture to the background.
5

Desaturate (CTRL+SHIFT+U) the texture, then add quite a broad Gaussian Blur to remove much of the finer detail.

6

Position the texture over the gradient and change the blending mode to Overlay. Alter the opacity to 90%.

7

When working in website design the range of user monitors plays a large part in the layout of a site. Unless otherwise required, I will accommodate resolutions down to 1024×768, therefore guides are drawn in to represent a 960px width in the centre of the document, this gives an approx 40px space at either side as a little padding before elements run beyond the confines of the screen.

8

Using the Rounded Rectangle Tool draw in a content area filled with light grey (#eeeeee) with 20px corner radius. Notice in this case the rectangle doesn’t span across both margins, this is to allow for a little design touch later down the line.

9

Double click on the rectangle’s layer and add an 8px white stroke. Change the Blend Mode to Overlay and drop the opacity to 30% to give a cool transparent effect.

10

Add a slight Inner Glow to the rectangle, using white at 5px in size to give a very slight bevelled edge effect.

11

Finally add a subtle Outer Glow using black at 15% opacity to give a slight shadow to the content area.

12

On a new layer, draw another rounded rectangle, this time with 10px corners at the same width as the original. Add a little gradient fading to grey at the bottom.

13

Right click on the Effects of the grey content panel and select Create Layers. On the newly created layer that consists of the stroke, use the eraser to fade out the stroke halfway down the document.

14

Add a little extra touch to the stroke by drawing a 1px line with the Pencil Tool vertically up the entire edge. Hold Shift to constrain the axis to give a crisp straight edge.

15

Fade out this line using the eraser to match how the rest of the border fades away into black.

16

The content area so far has a large flat area of grey, that gets slightly darker at the bottom. The top corners are a larger radius than those at the bottom and the border has a transparency that shows the underlying background and fades out towards the middle.

17

Position a copy of the paper texture of the top half of the content area. Use the Hue/Saturation Tool (CTRL+U) to give a blue/green colouring.

18

Press CTRL and click the thumbnail of the content layer to create a selection, inverse the selection (CTRL+SHIFT+I) and delete out the excess. Also use the erase to slightly fade out the texture leaving a strip across the top.

19

Use the Pencil Tool to add a horizontal 1px white line under the heading.

20

Create a selection from the content area again, then press ALT while dragging the Rectangular Marquee across the document to exclude the majority of the selection. On a new layer draw a white to transparent gradient downwards and adjust the opacity to 90% add a glossy highlight across the header.

21

Use the Rectangular Marquee Tool to draw in a sidebar that extends past the main content area. Fill this with the grey background colour (#eeeeee).

22

Add a transparent border effect to the sidebar using the stroke option from the Layer Style window.

23

Use the Outer Glow option to add a very slight grey border, adjusting the Spread to the max will turn the default glow into a solid strip of colour which helps add this double stroke effect.

24

Use the Inner Glow option in a similar manner to add a thin white stroke effect to the inside of the sidebar. The Choke option set to max also makes the glow appear as a solid block.

25

Finally add a gradient to the sidebar spanning from white to the light grey background to add a little interest and dimension.

26

Split the sidebar into individual sections, the plan is to have separate sections for each set of menu items.

27

A similar approach will be used on the post area of the blog design, each post will be enclosed in its own container. Draw a rectangular selection to simulate one of these containers.

28

Fill the area with white, right click on the sidebar and copy the layer style. Paste this layer style onto the container to quickly add the same border effects.

29

With the structure of the layout almost complete, mockup the textual elements of the page to test out colours and sizes.

30

Create a navigation area by creating smaller selections and adding a fading gradient above the header. Type in the links with the Text Tool.

31

Taking the content of an upcoming blog post, paste in the information and adjust the colour and sizing of the text to give the appropriate hierarchy. The title is the most important element therefore must be large in size and bold in colour. Whereas the meta information isn’t so important, so it can be smaller in size and lighter in colour.

32

Draw a rectangle with a subtle blue gradient at the bottom of the post container.

34

Using the fantastic icon set from Function, add secondary information such as the comment count and a link to read the whole article. Highlighting these in their own strip separates them from the content but gives useful information to the viewer.

35

Finally add other page elements such as subscription options. The RSS icon here can be found in the form of a tutorial or as part of a free icon set.

36

With a good selection of information presented on the page it gives a clear picture of what the overall website will look like. In a future post we’ll look at exporting elements of this design and coding up the layout into a real webpage.