Many web designers today are moving away from the traditional layout of a website. One of the layouts that are in trend today is magazine or news style of website. Magazine-styled website offer good usability, clean typography, and professional interface. Adding on to that is that even if you put many elements on a page, it will still look organized and not overcrowded. Usually, magazine style is used for online periodicals, lifestyle, and fashion websites.

Common Features of a Magazine-styled Website

Generally, these are the things you will see on a magazine-styled website.

1. Horizontal Navigation

It is common on any website to have a horizontal navigation, and that also goes with magazine-styled websites.

Horizontal navigation limits the space used because navigations always go from left to right. Also, you don't have to scroll down to find the last navigation. Adding on to that is the easy to understand drop down sub menus.

As I am searching for magazine-styled websites, I have seen one website with vertical navigation.

The good thing about vertical navigation is you can group sub categories without using a drop down menu. But, seldom web designers use vertical navigations for users quickly notice the menus if they are put at the top, horizontally.

2. Drop Down for Sub Menus

Since there are various menus and sub menus for a magazine-styled website, drop down menus make it easier for visitors to find what they are looking for.

Take a look at the website Slate. Instead of using sub menus under the main menus, you will see the articles listed on that menu.

3. Categories

Because magazine-styled websites have lots of contents, most of the articles are categorized to let visitors find what they are searching for based on categories.

4. Search Bar

The same goes with Search Bar. Websites with magazine style of layout have many contents to put on, and that is why most of them have search bars. In this case, visitors can find the specific topics they are searching for easily and quickly.

5. Popular News/Stories Section

Articles listed on the Popular News or Stories section are the most read by visitors of a website. Listing these kinds of articles is a great way to inform your readers on which are the most clicked.

6. Latest News/Headlines

With many contents posted on websites, putting Latest News or Headlines section on a website is recommended. This informs visitors and users on what the newly published articles on the website are.

Look at this website, not only that headlines are listed, there is also a mark saying “Most Read” for the most clicked link in an article. This informs users which are the popular ones.

7. Images and Videos

Putting images and videos on your website is one way to capture the attention of your visitors. Images are one way of letting your visitors understand the message you convey. And based on research, people like to view images rather than reading pure texts only.

Videos have become more common for online websites today, especially with online news sites. If viewers missed something on TV, they can watch it online. And instead of reading what seems boring to some viewers, they can just watch a video relating to that article.

8. Light-colored Background

Magazine-styled websites have light-colored background and the commonly used color is white. Light-colored background is better for it makes the content readable.

9. Columned or Grid-based Contents

Like what we see on magazines, contents are grouped into columns or sometimes into grids. The same goes with magazine-styled websites, grids are effective to use for they keep the contents well-spaced and noticeable.

10. Clean Typography

For magazine-styled websites, it is important to consider the typography for it puts a lot of content on a page.

Take a look at The New Yorker website. Even though it has a lot of content on its homepage, it still looks organized because of the neat-looking typography, grid-based contents and also the white background it has.

In this article, I collected different kinds of well-designed websites with magazine style. I hope you will be inspired like how I was with this compilation.

1. Azure

2. InStyle

3. InStyle UK

4. Giant Magazine

5. People

6. UGS Magazine

7. Clutch Magazine

8. Typographica

9. Vogue

10. Dazed Digital

11. WWD

12. Justine Timberlake Website

13. GQ Magazine

14. Macalicious

15. Vanity Fair

16. Spin

17. WMagazine

18. Rua De Baixo

19. Black Book

20. NFL UK

21. Wired News

22. Zaum & Brown Website

23. Details

24. More

25. UX Magazine

26. New York Magazine

27. One Nation Magazine

28. Frieze

29. INC

30. San Francisco

31. Creative & Live

32. IndiePit

33. Portfolio

34. BMI Voyager

35. TIME

36. The Christian Science Monitor

37. CNN

38. BBC

39. Economist

40. FILE Magazine

Before I finish, let me give you some advantages of a website with magazine style of layout.

Advantages of Magazine-styled Layout

1. It gives a professional look of a website.

A light-colored background with a clean typography where contents are put into columns or grids are some of the ingredients to make a website look professional.

2. Good choice of style for websites with a lot of contents to put on.

With a magazine-styled website, you can put several contents on a page without cluttering them.

3. It is easier and quicker to search for topics.

It is easier and quicker for users to search a certain topic for they are categorized. For instance, most read articles are found on the Most Popular section. While, newly posted articles are to be found on the Latest News or Headlines section.

To be fair, let me also give you the disadvantages of a magazine-styled layout.

Disadvantages of Magazine-styled Layout

1. Confusion on what to click.

Viewers might be confused on what to click because many things are posted on a page.

2. Contents may look cluttered or disorganized.

If magazine-styled website is not well designed, contents may look cluttered or disorganized. To help you with this, always stick on a light-colored background, columned or grid-based contents and clean looking typography.

3. More maintenance and updates.

A magazine-styled website entails more maintenance and updates on the part of the web administrator. But it still depends on how often the website is updated. The more articles published, the more work for the administrator.

Share your Thoughts

What about you? What do you think about magazine-styled websites? Let us know your thoughts on the Comment section.

In the last part, I showed you how to use PHP to send e-mail messages. In this part I will continue this and also show you how to use PHP and forms together to make your PHP scripts more useful.

Setting Up Your Form

Setting up a form for use with a PHP script is exactly the same as normal in HTML. As this is a PHP tutorial I will not go into depth in how to write your form but I will show you three of the main pieces of code you must know:

 <input type="text" name="thebox" value="Your Name"> 

This will display a text input box with Your Name written in it as default. The value section of this code is optional. The information defined by name will be the name of this text box and should be unique.

 <textarea name="message"> Your message goes here </textarea> 

Will display a large scrolling text box with the text ‘Please write your message here.’ as default. Again, the name is defined and should be unique.

 <input type="submit" value="Submit"> 

This will create a submit button for your form. You can change what it says on the button by changing the button’s value.

All the elements for your form must be enclosed in the

tags. They are used as follows:

 <form action="process_script.php" method="post"> Form elements and formatting etc. </form> 

The form’s action tells it what script to send its data to (in this case its process_script.php). This can also be a full URL (e.g. http://www.mysite.com/scripts/process_script.php). The method tells the form how to submit its data. POST will send the data in a data stream to the script when it is requested. GET is the other option. GET will send the form data in the form of the url so it would appear after a question mark e.g. http://www.mysite.com/process_script.php?name=nick

It really makes no difference which system you use but it is normally better to use POST if you are using passwords or sensitive information as they should not be shown in the browser’s address bar.

Getting The Form Information

The next step is to get the data the form has submitted into your script so that you can do something with it. There are basically two different methods of getting the data into PHP, which depend on how they were submitted. There are two submission methods, GET and POST, which can both be used by forms. The difference between the two is that using GET, the variables and data will be shown in the page address, but using POST it is invisible. The benefit of GET, though is that you can submit information to the script without a form, by simply editing the URL.

This works the same as submitting a form using GET. The advantage of this is that you can create links to your scripts which do different things depending on the link clicked. For example you could create a script which will show different pages depending on the link clicked:

 yourpage.php?user=nick 

could show Nick’s page and:

 yourpage.php?user=laura 

could show Laura’s page, using the same script.

It is also possible to pass more than one piece of information to the script using this system by separating them with the & symbol:

 yourpage.php?user=nick&referrer=1stwebdesigner&area=6 

These could all be accessed separately using the GET variables user, referrer and area.

To get a variable which has been sent to a script using the POST method you use the following code:

 $variableName=$_POST['variable']; 

which basically takes the variable from the POST (the name of a form field) and assigns it to the variable $variableName.

Similarly, if you are using the GET method you should use the following:

 $variableName=$_GET['variable']; 

This should be done for each variable you wish to use from your form (or URL).

Creating The Form To Mail Script

To finish off this section, I will show you how to use what you have learnt in this part and the last to create a system which will e-mail a user’s comments to you.

Firstly, create this form for your HTML page:

 <form action="mail.php" method="post"> Your Name: <input type="text" name="name" /><br /> E-mail: <input type="text" name = "email" /><br /> Comments:<br /> <textarea name="comments"></textarea><br /> <input type="submit" value="Submit" /> </form> 

This will make a simple form where the user can enter their e-mail address, their name and their comments. You can, of course, add extra parts to this form but remember to update the script too. Now create the PHP script:

 <?php function checkOK($field) { if (eregi("\r",$field) || eregi("\n",$field)) { die("Invalid Input!"); } }  $name = $_POST['name']; checkOK($name); $email = $_POST['email']; checkOK($email); $comments = $_POST['comments']; checkOK($comments);  $to = "phpadmin@example.com"; $message = "$name just filled in your comments form. They said:\n$comments\n\nTheir e-mail address: $email"; if(mail($to, "Comments From Your Site", $message, "From: $email\n")) { echo "Thanks for your comments!"; } else { echo "There was a problem sending the mail. Please check that you filled in the form correctly."; } ?> 

Remember to replace phpadmin@example.com with your own e-mail address. This script should be saved as mail.php and both should be uploaded. Now, all you need to do is to fill in your comments form.

The first part of that script may look a bit strange:

 function checkOK($field) { if (eregi("\r",$field) || eregi("\n",$field)){ die("Invalid Input!"); } 

You don’t really need to worry about what this is doing, but basically, it stops spammers from using your form to send their spam messages by checking special characters are not present in the input which can be used to trick the computer into sending messages to other addresses. It is a function which checks for these characters, and if they are found, stops running the script.

The lines like:

 checkOK($name); [etc..] 

run this check on each input to ensure it is valid.

As you can see, using forms with PHP can be very effective. Now it’s time to share with you some final small things you should know about PHP (which as i think, should go in the very first part :) But i placed them where they are).

Comments

As with any programming language, it is quite important to comment in your script. If you are working on a script with someone else you must let them know what you code does and if you are distributing your script you will need to show people how to edit it. Even if you are the only one who will use your script it is useful to comment so that you can edit it at a later date.

In PHP there are two ways you can comment. One way is used for single line comments and the other is used mainly for comments that go over one line. A single line comment is written as follows:

 // Your comment can go in here 

Everything after the // will be ignored when the script is executed. You can even place these on the end of another line e.g.

 print "Hello $name"; // Welcome to the user 

Another way of commenting is by using multi-line comments:

 /* The following piece of code will take the input the user gave and will check that it is valid before adding it to the database */ 

Anything between the /* and the */ will be ignored. It is important that you always close this type of comment as not doing so could make your script not work.

Print, Echo and HTML

As you may have noticed during this tutorial I have actually used 4 different ways of outputting information to the browser:

 echo ("Text here"); echo "Text here"; print ("Text here"); print "Text here"; 

To clarify, all of these do the same thing and you can use any or all of them in a script. There is no reason to even use the same type all through a script. The only problem you may find is that all the ” in the HTML code must be replaced with \” which, if you have a lot of code, could take a very long time. This brings me to a very useful part of PHP. If, for example, you created the header of a page dynamically in PHP, then had the static page and finally a dynamic footer you can do the following:

 <?php Top PHP code in here ?> HTML Code <?php Bottom PHP code in here ?> 

This gets even better as the PHP code will just continue from where it was left off so you could do the following:

 <?php IF Statement { ?> HTML For IF Being Correct <?php } else { ?> HTML For IF Being Wrong <?php } ?> 

You must always remember to close IF statements and loops, though, as it is very easy to forget.

One Line Prints

Being able to place HTML code into your PHP is very useful, but what happens if you want to put the value of a variable into the code. Unlike when using an echo or print statement, you can’t just put in the variable name as this section is not actually part of the PHP code. Instead you must just put in a little PHP.

For example, if you wanted to print someone’s name from a script with HTML formatting you would do the following:

 <font face="Arial" size="7" color="red"><strong><?php echo($variableName); ?></strong></font> 

* – As again, Never Do Inline Styling!

In the above code you have just added in the following PHP:

 <?php echo($variableName); ?> 

Which is exactly the same as the following PHP code:

 <?php echo($variableName); ?> 

But all put onto one line.

Conclusion

This tutorial has given you some of the basics of PHP and should allow you to do most things you will want to. For a much more in depth look you should visit PHP.net, the official homepage of PHP. One major omission of this tutorial, you may have noticed, is using PHP with a database. Happily, 1stWebDesigner already have one tut on it: Getting Started With MySQL DB and PHP with PHPMyAdmin. You should know this, as this is one of the major reasons that people use PHP and because there are many options.

Hope I helped you in learning such wonderful and powerful language as PHP. What would you like to learn more about PHP? Next articles ideas… I’d love to hear your thoughts in the comments below!