Archive for tag 'tutorials'

Feb 20 2012

From template to complete website in 10 minutes

The most popular posts in this blog are the six parts of the Building your first website tutorial. However, going through that tutorial takes some time, and this post is written for those of you who want things to go faster. I am going to explain how you could turn the latest template release, the "This is me" template into a simple but fully functional website in just ten minutes. This tutorial requires some basic HTML editing knowledge, although only the very basics.

Step 1: Download the template

The first thing to do is to download the template and extract it to a folder on your computer. In the folder, you should see the following sub-folders and files:

Step 2: Open index.html using a code editor

Once unpacked, use any program capable of editing HTML code to open the file index.html. I recommend Notepad++ for Windows users and Smultron for Mac users, but basically any regular text editor will work. Using an editor that displays line numbers will be helpful.

This is what you will see if you use Smultron on a Mac:

Step 3: Delete sections that will not be used

To keep it simple, I will only use a few of the content sections in this example and remove the rest. I want to keep the front page that shows the name and the tagline, the bio section to write a short presentation of myself and the contact section to display my address.

First of all, delete the lines 23-25 to remove the menu options that I do not want to use. It should be list items ("li") with the IDs #portfolio, #social and #custom. Left in the menu list should be list items with the IDs #start, #bio and #contact. It should look something like this:

Then scroll down to find the corresponding sections, also list items using the class="section" and the IDs you have removed from the menu, and delete them (lines 42-75 if you deleted the menu options mentioned above, or lines 45-78 in the original version of the template).

Step 4: Replace the sample content with your own content

Now you are left with three menu options and three content sections. Time to add your own content! First of all, find the h1 element which says "Your Name" and replace the text with your own name (or the site title you want to use). Then do the same thing with the tagline below the h1. In this example, I'll just write out my name and the tagline "Welcome to my website". The code should now look like this:

Then continue to the next content section, the list item with the id="bio". The h2 element is the section title, change it if wanted or needed. The sample content starts with an img element that shows a profile photo, aligned to the left. To replace the sample image with your own photo in the easiest way possible, find a picture that you would want to use and resize it to a size that fits within the template layout. The sample image is 120×235 pixels, but you can have other dimensions if wanted as long as the image is not wider than 300px and the height is below 250px. Replace the file photo.jpg in the "img" folder with your own photo, and leave the img element as it is. If you prefer to have a right-aligned photo, change the class="left" to class="right".

The sample content of the bio section is a basic "Lorem ipsum" text, in two paragraphs ("p" elements). Write a presentation of yourself, with each paragraph in its own "p" element. The layout space is limited, so you need to keep the text fairly short to make sure that all of it is visible on the site. For this example, I will just write a few short facts about myself in two paragraphs.

Once the presentation is written, move on to the third content section with the id="contact" and replace the address with your own information. Line breaks are written using the "br" tag (see the code for examples).

If you want to include a map, go to Google Maps and type in your location. Then click the link icon in the left sidebar and "Customize and preview embedded map" link. Choose the "custom" option and set the width to 305 pixels and the height to 200 pixels. Copy the code and paste it into the div with the id="map" in index.html.

Step 5: Edit the footer text

Finally, scroll down to the bottom of the index.html code and find the div with the id="footer". Change the copyright information text that says "Your Name" into your own name, and then save the document. Then open index.html in a web browser to see what it looks like. If you have followed this tutorial in detail, you should now have a very basic but fully functional website that is ready to be published on the web:

Step 6: Publish the site

If you are happy with the result, then the final step is to publish all files in your template folder to your web hosting account. If you don't have any hosting ready, there are plenty of options to choose from. Personally, I use Svenska Domäner AB which is a great option for me and for andreasviklund.com, but there are lots of different providers offering a wide range of services depending on your needs, so there are some things to keep in mind before choosing a web host.

I will write more about how to find a good hosting provider and how to upload files to a hosting account in a future post soon.

I hope that you have found this tutorial useful. If you have questions comments or just general feedback, feel free to post a comment either here or on the official andreasviklund.com Facebook page. You can also send feedback or questions to @andreasviklund on Twitter or in an e-mail.

By Andreas Viklund • Learn • 0 Tags: , ,

Jan 31 2012

Centered horizontal menus with CSS

Source: matthewjamestaylor.com

I got an e-mail asking how to make a centered horizontal menu, using XHTML and CSS. It may sound easy, but it cause me a lot of headache before I learned how to do it. After trying a lot of "text-align:center" and "margin: 0 auto;" approaches that didn't work as I wanted, I realized that the trick is to think outside the box when positioning the unsorted list I use for navigation menus.

Rather than just answering the e-mail question, I want to share a link to an excellent and very well illustrated guide on how to make centered horizontal menus. The guide is written by Matthew James Taylor, and it has a no-hacks approach that keeps the code clean and efficient. A few examples are provided that you can use and learn from. Check it out, and don't miss the many other good posts in Matthew's design blog.

By Andreas Viklund • Learn • 3 Tags: ,

Jan 20 2012

Video tutorials: Learn to write XHTML and CSS manually

After being asked about HTML/CSS coding tutorials for beginners, I ran across a site with a number of excellent guides: LearnWebCode.com. In a number of simple steps, you can learn the basics of both (X)HTML and CSS, and along with the texts you can find a number of videos that give you a visual guide on how it works. After viewing several videos and reading a number of the tutorial posts, I can warmly recommend it for anyone who wants to learn how to build websites from scratch using manual coding. Read more by following the links below:

XHTML and CSS tutorials (text with code examples)
CSS video tutorials
HTML video tutorials

Thanks Brad for these guides, I think that they could be really useful to a lot of aspiring site builders…

By Andreas Viklund • Learn • 4 Tags: , , ,

Nov 7 2011

Graceful degradation vs. Progressive enhancement (part 1)

With mobile surfing constantly rising in popularity during the last couple of years, there has been an interesting shift in the way many web designers build their designs. When I started building website templates back in 2005, I learned to make the designs work in all browsers – including text-based browsers which did not even support CSS. The way I did it was to build the complete design for modern web browsers first and then make sure that the design would be possible to browse even with the most basic text-based browser, including the mobile browsers of that time.

In short, the target was to always make sure that designs would degrade gracefully if displayed on an older web browser. The code structure would be built in a way that kept a text-only, no-CSS version of the HTML output logical and well-structured. This concept was commonly called "graceful degradation", and it simply means "display a basic and simple version if the full layout can not be rendered". There were many ways to achieve that effect, some were good and others were really nice – but at the cost of usability. I wanted to keep things simple to make sure that people with very limited knowledge about HTML and CSS could still use my templates and learn about the degradation by simply trying the examples included in some of the templates.

You can still see numerous examples of free templates that degrade gracefully among my older templates. I will show examples in the next part of this series, but for now I will focus on the terminology and the differencies between the two methods.

Graceful degradation worked well. Then the smartphones entered the arena.

When smartphones with more advanced web browsers started to appear, it became possible to use CSS and display the full version of the site on mobile devices. But since the screen sizes were (and still are) small and the resolution of most mobile devices were (and, most often, still are) lower than even the smallest laptop computers, the full layouts and designs did not look very well. Until recently, I still kept graceful degradation as my main design philosophy. But in the last few years, another design philosophy has became more or less a standard: Progressive enhancement.

Progressive enhancement: Mobile first!

Where graceful degradation was all about building the full layout first and making it usable on mobile devices, progressive enhancement turns the order around and builds from another perspective. A designer building with the progressive enhancement philosophy starts with creating the design and layout for small-screen devices and, once the mobile-friendly version is complete, moves on to adding more advanced layouts and design elements that are displayed on devices with higher resolutions and bigger screens. This has many positive effects, and it can be done in multiple ways.

Most methods can be summed up unde the term "Responsive design", where clever use of CSS3 media-queries makes is possible to automatically display a set of extra CSS if a number of conditions is met. Responsive designs scale down if you reduce the width of your web browser, most often by switching to a simpler layout that is better suited for small-screen devices. In more advanced designs, there could be several layouts included – one for each pre-defined screen width. I'll write more about screen widths and how to detect them and serve the proper CSS based on screen width in the next part of this series.

Erase and rewind…

Progressive enhancement and responsive design are still fairly new concepts to me, I have only experimented with it for a couple of months. But I can tell for sure that I will be adopting the progressive enhancement philosophy with all my heart for future releases. I have studied lots of great website templates, WordPress themes and live websites to get an idea of hot I could best apply this design process to my work. And my spontaneous reaction is that "Mobile first!" makes a lot of sense, and that this is an inspiring way to work.

In the next part: An example of how it can be done…

I am currently working on the next major update for andreasviklund.com. As with the current version of the site, it will be a site based on WordPress. But rather than building the full layout in the way I have done in the past, I started with getting the basic features and functionality in place, even before I wrote any CSS. I will describe my workflow in the next post of this series, and look back at older templates to see if they can be re-modeled using Progressive enhancement.

Part 2 will be published in a few days, stay tuned! And if you have any comments, questions or suggestions for what I should write about, don't hesitate to post a comment to this entry.

By Andreas Viklund • Learn • 0 Tags: , , ,

Oct 13 2011

How to select the grid width in The Grid v2 template

The new version 2.0 of The Grid template includes two separate grid layouts, one that is 960 pixels wide and another that is 1200 pixels wide. Both grids use 12 columns with 20 pixels of spacing, but the column widths are diferent. The 960 pixels grid use a column width of 60 pixels while the 1200 pixels grid use a column width of 80 pixels. Since both the included grids have a similar set up, you can use any of them with the layouts created with the template. The only thing that needs to be modified to switch between the two width options is the <body> tag.

Using the 960px grid

The 960px grid is the default setting. To use it, keep the <body> tag free from additional classes, and just let it be written out as:

<body>

Using the 1200px grid

The wider grid is applied by adding a class to the <body> tag. The class, named "wider", activates a part of the CSS which changes the grid width and all the relevant parts of the layout that are affected by the width. To switch to using the 1200px grid, modify the <body> tag to make it look like this:

<body class="wider">

No matter how the columns and rows are set up in the template, the layout and the background image will adjust to the width thanks to the body class. The exception is the header image which needs an additional edit of the HTML code. Change the header image filename by adding "-1200" to the file name, like this:

<div id="headerimage" class="col c12">
<p><a href="index.html"><img src="images/header-1200.png" alt="The Grid template" /></a></p>
</div>

…and you are ready to use your layout in a wider format!

By Andreas Viklund • Learn • 5 Tags: , ,

1 2 3 4 5 6 7 8
')