Archive for category 'Learn'

Oct 19 2010

Tutorial: Building your first website using a free website template (part 1)

This is the first in a series of blog posts that will explain how to use a free website template to build and publish a complete website. The series will explain what a website template is, how you download a template, how you use code editing software to make changes in the template and add your own content, how you create multiple pages and add a navigation menu, how you make changes to the design and finally how you publish your website on an own domain so that the world can see it.

New posts will be published with a few days in between, allowing the series to be dynamic and include feedback from readers and answers to questions that may come up on the way. To follow this tutorial as new posts are published, you can subscribe to the feed or follow Andreas on Twitter. Feedback, questions and requests can be posted as comments to each entry.

Introduction

So, you have decided to build a website? Great! You are in for a lot of fun, a journey that will be full of surprises and useful experiences. But you will also come to a lot of intersections where you will need to choose directions, often without knowing what comes ahead. In this series of blog posts I will share some of the experiences I have learned during my years as a professional web designer. Not to provide the perfect guide to building websites as it is virtually impossible to create a tutorial that is suitable for everyone, but rather to explain one of the many paths you can follow and hopefully provide some inspiration on the way. A quite good way I’d say, but definitely the only one.

But let’s start from the beginning…

The first decision to make: The starting point

First of all, there are plenty of ways to build websites. It can be done using a variety of online services (free or commercial), or through different kinds of software (code editors or visual editors), or by hiring a web designer (professional or non-professional) to do it for you, or by using content management systems with different kinds of design themes – or by using website templates. Websites can be hosted on many different hosting services or on an own server, and accessed through a generic service URL or through an own domain name. For a person who wants to build their first website, the many options can be a bit overwhelming. And to make it even more confusing, each option has a wide range of quality levels, both regarding the user experience and the resulting website itself. I will write more about quality and why it matters later.

With so many possible starting points, which one is the best? Well, there is usually no good answer to that question. It all depends on the person who will run the future site, and what purpose the site will fill. If you want to run a blog, then a good way to start could be to use one of the many blog networks or a blog script. If you want to run an online store, then a e-commerce service or a content management solution built specifically for online stores may be a better starting point.

But if you want a regular website such as a presentation of yourself or your company and you want complete control of both the design and the content, then it can be a good idea to start with a website template. Beside giving you quick results – you can have your first page online within only a few minutes – you will also be able to learn about the code that websites are made of: HTML (also called the markup, the code that makes up the content and the structure of the site) and CSS (the stylesheet, the code that decides how the content is presented). And you can learn about it in small steps. A website template allows you to start with the one thing that is most important, the content of the website. Once you have the content in place, you can dive deeper into the code as you learn more and start playing around with design elements and visual styles.

The focus of this tutorial: website templates

Free website template: andreas01-wideThe main content of andreasviklund.com are website templates, pre-designed homepages that contain sample content that shows what a website can look like. The templates are free to download and free to use, and they can be modified in any way you may want to. Building a website from one of the templates on this site doesn’t cost you anything, and the templates are built in a way that makes them easy to edit and easy to learn from. Some templates are more advanced than others, allowing you to choose from multiple layouts and color schemes. But in this series I will use one of the less advanced templates to give you a simple start.

The free website templates on andreasviklund.com are built with a philosophy that ensures that the templates keep a high quality and that they are fully functional in all web browsers. This is important since you want your website to work for everyone who visit it no matter how it is accessed. A website that is accessible for everyone and that is built using well-written code that follows modern web standards will also be easier to find using search engines, which is one of the most common ways of finding websites on specific topics and also an important factor if you build a business website and want your company to be found by potential customers. In future posts, I will explain how you make sure to follow the established standards and how you can check for (and fix) errors in any code you add. But first things first…

Feel free to browse through the free templates gallery to see the different designs that are available, and write a comment to this post if you want to suggest a template that I should use as the example in the forthcoming posts.

OK, let’s move on!

Coming up in the next post: Choosing a template, downloading it and finding an editor for your operating system.

Click here to read part 2…

By Andreas • Featured, Learn • 35 Tags: , ,

Sep 1 2010

Welcome to the new andreasviklund.com!

Today, on September 1st 2010, andreasviklund.com got a major update. Several things have been changed from the previous version of the site in order to make the site easier to navigate and make it more useful for as many visitors as possible. Here are the most important updates:

The front page

The basic layout has been preserved from the previous version of the site. The main menu is still at the top of the page, the content is to the left and there is a sidebar to the right. But where the previous version of the site had five blog posts on the frontpage, this version of the site has moved the blog to its own page. From now on, you can find the blog on http://andreasviklund.com/blog/ or through the “Blog” link in the navigation menu.

Instead of showing the blog, the front page now shows a slideshow with screenshot of the latest free website template releases. If you click on one of the images, you will be redirected to a page where you can read more about (and of course, download) the release. Below that is a short presentation of the site and the idea behind it, with links to the most important sections of the site. And below that text is one of the most important changes: the “Learn”, “Build” and “Share” columns with links to articles related to each topic.

Learn, Build, Share (the blog)

The three columns on the front page represent blog categories, and they have space for five links each (currently for the five latest articles in each category).

Learn contains posts that are related to learning and understanding HTML, CSS and web design in general. Here you will find tutorials, how-to’s and material and resources that will help you expand your knowledge about everything related to web design. Want to learn how to edit the colorscheme of a specific template? Request an article about it through the new discussion forum and it may appear as a blog post in the “Learn” category!

Build is for articles and resources related to designing and coding, for example posts about what content management systems are suitable for different tasks or about new templates or add-on material. Reviews of web design software and/or services is one example of what you will find in this category in the future, articles about why web standards and accessibility are too important to ignore is another.

Share will cover a topic related to web design which I have previously not written very much about but which a lot of template users have asked me about: the various forms that your online precence can have, and how to move on from simply existing to really getting your message out. It is one thing to learn how to build and run a website, and another thing to use it in a way that moves you forward towards whatever target you may have. You will probably find a few case studies here in the future. Want to share your own experience about this topic? Send me an e-mail or start a thread in the discussion forum.

Beside these three primary categories, there is a “General” category for posts that do not fit into any of the three primary categories. For example, site news and personal entries. Blog posts are also tagged to make it easy to find posts about specific topic. For example, all blog posts about the Variant Mini template can be found by browsing the Variant Mini tag archive. A tag cloud and a complete archive of all posts can be found on the blog archive page.

Comments are now handled through the Disqus commenting platform, which provides a lot of new features for discussing each blog post. I have not used Disqus before so it is so far only a test, but I think that it will be a good solution.

The community-powered forum

The single most popular request that I have got throughout the years that andreasviklund.com has been online, is a way of getting easy support for the free website templates. A common suggestion has been that I should have a forum for support threads and for an open discussion between template users and template designers. Since I have fantastic experiences from the website template community sites where I got inspired to learn XHTML/CSS design and where I got answers to the questions I had as a beginner, I know that there are lots of people who want help – but also lots of people who are more than happy to share their knowledge and experiences so that others can learn from it. Through the new andreasviklund.com forum, I hope that I can provide a good meeting place for this purpose.

To join the community and get full access to the forum, you need to create a user account. You can do this through the registration page. Membership is completely free. You can still read all threads without registering any user account, but only registered members can start new threads and post replies. As an added bonus, each user gets an own profile page, an own activity stream and access to an internal messaging system where you can connect with other users. As a user you can also send friend requests to other users, and if a friend request is accepted you can post messages to the other users profile, similar to the “wall” on Facebook.

Please be aware that the forum is a new feature, and that the forum is in a wild beta mode. At launch is completely untested, and the visual appearence is not yet in sync with the rest of the site design. The forum will start off as a test, and it will be developed further once I see how it is used. Feel free to suggest new sub-forums if you want to see something specific.

The sidebar

The sidebar is simplified. It shows a small screenshot of the latest template release, a login box for registered members – and once logged in it shows shortcuts to the community features and the forum. Below the login box, there is a form where template users can search for available domains and get hosting space for their websites – another common request.

Final words…

To sum it all up, this is a long-awaited update which I hope (and believe) will move andreasviklund.com from being a sporadically updated personal blog into a living, inspirational and resource and community for people interested in web design, and especially in website templates, web standards, accessibility and usefulness. Since I now run this website on a professional level, the target is to provide a high-quality resource – for as many people as possible. Beginner or professional web designer, you should be able to find useful resources here no matter what.

Welcome to the new andreasviklund.com, enjoy your stay and feel free to join the community to be a part of the adventure!

By Andreas • Learn • 33 Tags:

Sep 1 2010

How to change the andreas01 header image

One of the natural effects of using a website template as a basis for the design of a website is that the basic visual design is not unique in any way. For many kinds of websites, especially sites which have a strong focus on text content, this doesn’t really matter. But many template users still want to make some kind of design change that makes the website stand out, something that defines the topic and purpose of the site. The single most common way to do that is to use an own header image, and some of my free templates have been built in a way that makes it possible to add an own header image in a simple way. In this post, I will explain how to add your own header image to the andreas01 template.

The starting point

To get started, download andreas01.zip and unpack it to a folder on your computer. Open the file index.html in a web browser to see the default design of the template. The header image is the large photo showing a snowy street in Porjus, the small town in northern Sweden where I grew up. Then open the same index.html file in a code editing program. I use Notepad++ for Windows for to see the HTML source code.

Now, there is no need to edit this code if you only want to change the header image. But the code that displays the image is still worth taking a look at since it contains important information. Line #21 of index.html will look like this:

[html]<img id="frontphoto" src="img/front.jpg" width="760" height="175" alt="" />[/html]

It says that an image with the filename “front.jpg” located in the folder “img” should be displayed with the ID “frontphoto”. The image is shown with a width of 760 pixels and a height of 175 pixels, no matter the actual pixel dimensions the image file. No alt text is included. If you look at the front.jpg file inside the image folder you will find that it is 760 pixels wide and 175 pixels high, which means that the image shown in the template design is not scaled or resized.

Replacing front.jpg with a pre-designed header image

I have created a package of example header images that can be downloaded for free and used with the andreas01 design directly. Below is a scaled-down preview of what the images look like. Click the image to download the images in a .zip archive:

Once downloaded, unpack the files into a directory on your computer to take a closer look at the images. Pick one that you want to use and copy the image file to the “img” folder of your template, where the current “front.jpg” file is located. Rename the current “front.jpg” into something else (for example “front-old.jpg”) and then rename the new image that you just copied into the folder to “front.jpg”. Then view index.html in your web browser again – and the new header image should now be included.

Including an own header image

Most template users will prefer to to use an own header image. Replacing the default image is done in the same way as above, but there are a few things to keep in mind:

  • The image should be 760 pixels wide and 175 pixels high. Other dimensions may work, but results in scaling and possible proportion errors in the image when seen in the web browser.
  • The image must be in the jpg format, and use the file name front.jpg.
  • Try to keep the file size down through JPEG compression to make sure that your website loads fast. The header image should not be larger than 100 kilobytes. But don’t compress too hard, it can create visible compression artifacts in the image.

Details such as image dimensions, format and file name can of course be changed by editing the HTML and CSS code. But that is a different topic that will be covered in another post in the future…

By Andreas • Learn • 10 Tags: , , ,

Jun 11 2010

Repair, reboot and release!

After a long, long time without visible updates but with a lot of things happening behind the scenes, it is now time to bring andreasviklund.com back to life. There are lots of stories to tell, lots of templates to release and lots of plans ahead. As you may possibly have heard during the spring, andreasviklund.com has been sold and is now running under new ownership. Instead of handling everything myself, I am now a part of a team of people who share my interest for functional and standards-compliant web design and whom I will work together with to make the site and the templates even more useful to you. I will continue to run the site and release my work here, free for everyone to download as always, but from now on I will do it as an employee for the new owner. In other words, running this website is now my full-time job and I will be able to put a whole lot more time and energy into the site than I have for the last few years.

I will write more about this in a future post, as well as sharing some of the ideas and plans that the team has for the future. Feedback will be very welcome, and so will any ideas and suggestions you may have. The whole idea with the free templates is that they should be as useful as possible for as many people as possible, so all kinds of input from template users is good. The main plan is to make it easier to learn about XHTML/CSS and how to edit and build websites from the templates. Among other things, I will start writing guides and tutorials and share a lot of tips and tricks. I will also write about more advanced topics, such as how to use website templates as starting points for making themes for different content management systems and blog engines, and how to get your information out to the world. I have done a lot of work with WordPress, so WP-themes will probably be a common topic as well. It will also become easier to get help from me if you run into problems with the templates, and to find answers for common questions about my templates. Again, I will write more about plans and ideas in the next couple of posts!

For now, I just wanted to let you know that I am alive and well, and that you can expect new material soon. For real, this time. You will of course also get the full story about the site affair, the new owner and the team which I am now a part of.

Finally, I’d like to send a bunch of big “thank you!”-greetings to those of you who have sticked around despite the long silence, and of course also to all of you who have sent encouraging messages. Now it is time for me to make it worth the wait, and I honestly think that many of you will want to stick around in the future as well!

By Andreas • Learn • 43 Tags: ,

Oct 14 2009

What a template is (and what it is not)

One of the most common questions I get is “Why is template (x) not working with CMS (y)?”. The answer is simple: The website templates contain no CMS-specific code so they will not work with any CMS by default. They contain no scripts, only pure XHTML and CSS code that make up a basic design filled with sample content. To get CMS functionality you need to add the proper CMS functions to get the template to connect with your choice of CMS. Another option is to find ported templates or themes that have already been customized to work with the CMS you want to use. Like the WordPress themes which I have customized to work with WordPress specifically.

Porting is done in different ways for different systems, and since I do not have experience of more than a few content management systems I am not able to do ports on requests. I recommend sending such requests to the user/developer communities for the CMS you want to use, there are often people who are happy to take on such requests. If you want to make a CMS-specific port yourself you should look for documentation on the website of your CMS, like the Codex for WordPress, or learn from templates and themes that are already available.

If you want to start with a simple and easy-to-learn CMS, then you should check out sNews CMS. It usually only takes a few minutes to turn a website template into a dynamic CMS-based site. There is also good documentation to read on the website, as well as a forum where you can find many tips and tricks. And not to forget, the beautiful templates already customized to work with the system.

By Andreas • Learn • 0 Tags: , ,

« 3 4 5 6 7 8 9 10