Archive for tag 'templates'

Oct 21 2010

Alternate versions of Variant Rounded

Last week I released two alternate versions of the andreas01 template. Today I have added two variations of the Variant Rounded template with wider layouts (960px width instead of 760px in the original template), including a 2-column version since that had been requested by a site visitor.

I did not make any changes to the colorscheme in these variations, but I have got a request for a pink-colored version of Variant Rounded that I am planning to release soon. I have also made alternate colorschemes to other templates, including the new Variant Duo so there will be more alternate version releases in the next couple of weeks. Requests for alternate versions are very welcome, post your suggestions in the comments.

Full-size screenshots of the two new versions can be found on the Variant Rounded page. You can also download the templates directly:

Variant Rounded (2-column edition)
Variant Rounded (wide edition)

By Andreas • Build • 0 Tags: ,

Oct 20 2010

HTML5 templates with CSS3?

The templates on andreasviklund.com are all written using XHTML and CSS2, but newer web standard drafts are on their way. HTML5 and CSS3 are gaining in popularity, and with more and more web browsers adding support for these upcoming standards the interest for using them for website production increases. As a logical result, the interest for HTML5 and CSS3 website templates is also increasing, and I get more and more questions and requests about moving on to HTML5.

Now, I am just as excited as everyone else. HTML5 is really interesting, and it appears to be lovely to work with in terms of code. And together with CSS3 it can become really pretty. I just haven’t taken the step into this new world of opportunities that HTML5 and CSS3 provides, atleast not when it comes to website templates. But it is time to get started now. Tomorrow I will release my first template that uses CSS3. It will be a kind of microsite template, an extremely simple layout for online business cards, product or company presentations, CV:s and similar content. A few sample pages with different layouts will be included, and the template design will be enhanced by text-shadows and other details based on CSS3.

However, I am a bit worried about the fact that CSS3 doesn’t work in all web browsers, so part of the beauty with the new template will get lost for many people. This is not in line with the design philosophy I have followed since I started building website templates, so I will stick with XHTML and CSS2 for yet some time. But this new template will be an experiment and as such, an exception – something that will be explained on the template page and in the template itself. I will continue to build upon it and maybe convert it into a HTML5 template at a later point.

What are your opinions on HTML5 and CSS3 templates?

By Andreas • General • 3 Tags: , ,

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: , ,

Oct 14 2010

andreas01, dark and wide editions

Inspired by the great modified versions that Jason Cole has made from my XHTML/CSS templates (see the forum for details), I have created two alternate versions of the andreas01 template. It is a bit like remixing my own work, in order to give you a few more options to choose from if you like the basic layout of the original template but want something a little bit different. The two new styles are andreas01-dark (which has a wider layout, no background image, white text on dark backgrounds and purple link color) and andreas01-wide (which is basically just a wider version of the original but with a touch of red colors). Here is what they look like:

Both designs are complete templates available as separate downloads from the andreas01 template page, not add-ons that require any editing to work. Check them out and let me know what you think. More alternate versions are on their way, request are of course welcome. And again, there are forum threads for alternate versions of every template in the forum that is well worth checking out, don’t miss it.

By Andreas • Build, Featured • 1 Tags: ,

Oct 8 2010

New template: Variant Duo

A new free website template has been published, called Variant Duo. This time it is a two-column layout which could work just as well for personal websites as for portfolio sites or product showcases. Featuring a simple button menu and space for a large header image but without any special layout options or bonus features, this one is for those of you who like simple and useful templates. Click the image below to download the template directly, or go to the Variant Duo page to see a live demo…

By Andreas • Build, Featured • 2 Tags: ,

« 18 19 20 21 22 23 24 25