Archive for the ‘Web Design’ Category
ASP.NET Navigation and Content Management
Posted by fr3dr1k | Filed under ASP.NET, Content Management Systems, Web Design, Web Development, Web Technologies, Wordpress
At the moment it feels like I am re-designing a navigation system that has probably already been built before. The reason for saying this is because the navigation controls provided to you by Visual Studio 2008 produce table-based layouts, which is not what I want for my website. I want my website to generate valid XHTML and use CSS for layout. So what do I need? I need a navigation system that generates valid CSS and XHTML and that is easy to administer and update without having to meddle in C#, XHTML or CSS code. How do I achieve this goal? Would I have to write my own custom navigation system? It seems so for now. The basic structure of the navigation system would allow for a maximum of three levels of navigation:
- A top level
- A second level
- A third level
The navigation system will at all times make the user aware of where they are in the website, which can be achieved with a breadcrumb navigation system. Each navigation item will display its own associated content. Second level navigation items will have top level navigation item parents and third level navigation items will have second level navigation item parents. The navigation system will also act as a source for creating the site map structure. If a visitor clicks on any item in the top navigation area then content associated with that item will be displayed and the active top level navigation item will show its active. The second level navigation items that are displayed will be associated with the top level item. If a visitor clicks any of the second level navigation items the one that is clicked will become active and content associated with the second level navigation item will be displayed and the second level navigation item that is clicked will show that is active. If the second level navigation item has third level navigation items associated with it then those items will be displayed. If a visitor clicks on the third level navigation item then that item becomes active and content for it will be displayed and that third level item shows that it is active.
The next step is to create an object-oriented design from this structure. Using an object-oriented approach would allow for easy re-use throughout. So lets say we create a class called “section” and give it the following fields:
- ParentSectionField – This will indicate if there is a parent item
- SectionField – This will indicate what the current section is
- SectionHierarchy – This will indicate where in the navigation hierarchy the section item belongs.
The other issue that is a concern for me is content management, and understanding why it is important. Content management is important because it alleviates the need to mess with the code in your website. If your website has a decent content management system you will have a consistent look and feel throughout the website and you will be able to change that look and feel with a few clicks. Wordpress is a perfect example of just that. Wordpress allows you to easily change themes by uploading it to a directory and by changing it in your admin panel. Wordpress is a clear example of design being a layer on top of the underlying function. Content management systems are ideally defined as a layer of functionality or business logic with another layer of presentation logic on top of that. Content management systems are also characterised by its development frameworks. Development frameworks can be seen as large collections of functionality assembled into one component. ASP.NET is an example of a framework technology, because it provides a whole host of features and functionality that you do not have to re-develop to make use of. The ASP.NET Roles and Membership functionality comes to mind, and is not too difficult to implement and administer without having to write much code. The advantage of this is that these features take advantage of the framework features across the whole website. The Roles and Membership feature in ASP.NET is an example of this, because you could easily manage more than one website’s user base from a central administrator control panel. You would not have to re-code the model for each website.
Sites that use Silverlight
Posted by fr3dr1k | Filed under ASP.NET, Web Design, Web Development, Web Technologies
How many sites actually use Silverlight? Silverlight is a Microsoft technology that allows you to create rich and dynamic content for the web. The same Silverlight applications can also be used as desktop applications with WPF (Windows Presentation Foundation). With that in mind I Googled for sites that actually use Silverlight in a live production environment. I already knew of the Hardrock Memorabilia site that uses the Deep Zoom feature. I showed this to some people at work and they were amazed, as was I. So check it out, but be warned you will be required to install a plugin.
So are there other sites that use Silverlight? And if so, what is the quality thereof. I found a site called Nibbles Tutorials which is done entirely with Silverlight. They also have tutorials and samples that you can look at. I found a few more examples on this blog. This site uses Silverlight in a way that allows you to page through books, which is not that new. This site shows a jeep of some kind that you can rotate. Another site allows you to create a valentine’s day card. A museum also used Silverlight and the Deep Zoom effect. Vertigo are the guys who developed the Hardrock Cafe Memorabilia website. They have some Silverlight content as well including a slideshow presentation. Pyramid fashion also use Silverlight.
Light up the Web – Mix Essentials 2008 Review
Posted by fr3dr1k | Filed under AJAX, ASP.NET, Web 2.0, Web Design, Web Development, Web Technologies
I attended the Mix Essentials 2008 event at Canal Walk (Cape Town, South Africa) today and there were quite a few things that interested me. There were five speakers at the event:
- David Ives – Developer and Platform Strategy Group for Microsoft in South Africa – Microsoft
- Brad Abrams – Group Program Manager for the UI Framework and Services Team – Microsoft
- Michael Koester – Designer Marketing Manager for Middle East and Africa and Central and Eastern Europe – Microsoft
- Julian Harris – Conchango
- David Pugh-Jones – Microsoft
The event was split into two tracks, a developer track and a designer track, but it generally focussed on Silverlight, and more specifically on two software packages, Visual Studio 2008 and Expression Studio, and even more specifically it introduced XAML as a common way for these packages to share content between them. XAML, Extensible Application Markup Language is an XML-like language that defines graphic elements in a human readable form that can be used in vector-imaging programs as well as Visual Studio 2008. This gives designers the flexibility to design interfaces without having to worry about programmers not being able to replicate their designs in a programming environment. Julian Harris demonstrated that you can export files from Adobe Illustrator into XAML format and import that XAML into Visual Studio 2008. XAML is also used in the Expression Studio range of products which includes amongst other two interesting products:
- Expression Blend
- Expression Design
Expression Blend is, almost like Adobe’s Flash Studio, which is an IDE that allows you to create WPF (Windows Presentation Foundation) and Silverlight applications. WPF is a technology that allows developers (and designers) to create applications that give users a better user experience (UX). Contemporary windows applications generally use square (often mundane) windows, whereas WPF applications allow designers to implement creative graphics into the interface. Rounded corners and transparent backgrounds for instance are used, and because Expression Blend can read and understand XAML, none of a designer’s creative flair is lost. The developer no longer has any excuses to develop interfaces that do not exactly meet the designer’s design.
5 Tips for Developing a new Website
Posted by fr3dr1k | Filed under Web Design, Web Development
- Firstly determine the purpose and aim of the website. What do you want to achieve with the website?
- Determine the type of content you want to put on your website.Once you have determined the aim and purpose of your website you need to determine what the nature of the content on your website will be.
- Look at design galleries I do spend time looking at other designs, not with the intent to directly copy them, but for inspiration. Sometimes you can’t get your head around a certain look-and-feel and you might get an idea from somewhere. I personally love Smashing Magazine. The designs they showcase are some of the best and most creative around.
- Use a CSS-based layout. Avoid the use of tables for layout. Rather focus on a CSS-based layout that looks the most consistent between browsers. I found The Perfect 3 Column Liquid Layout to be useful as well as a Simple 2 column CSS layout
- Don’t use pirated software. If you are not willing to pay the price for a piece of software, then you may have to spend time learning how to code web pages.
Business meets Web Development meets Web Design
Posted by fr3dr1k | Filed under Web Design, Web Development
One of the issues that has been plaguing me for the last couple of years is the issue of bringing the design of a website closer to the functional requirements of a website. Web development, in my opinion, involves the creation of frameworks that allow a business requirement to be effectively represented in a web-based environment. Often this involves the analysis of a business requirement and translating that business requirement into a functional business resource. At the end of the day a web-based resource for any business should be a functional one that speaks directly to your business need. The process of developing a website should ideally start off by looking at your business and specifically looking at the way your business is structured. It helps, but is not necessary, if your business has a strategic model by which it defines itself. A strategic model, however, is not necessary to build a great and effective web-based resource. What is needed, though, is a good understanding of what your business does. By understanding what your business does and by defining what it does in a formal manner, you can develop a web-based resource. Formal definitions may need to be captured, and I think that it makes sense to develop a strategy that allows you to capture the way your business works in a way that is easy to access and edit at any given time. The key to capturing information about your business is to actively keep it up-to-date, because effectively you are developing your business even more by defining it. One way to capture business-related information is to use a wiki. Wikipedias are great for sharing information in a structured way, and allowing others to contribute to that information in a collaborative and sharing manner. A wiki can be created within a business environment with a minimal amount of effort, and it should ideally be used to store definitions that are unique within your business. I have found that if I compile information in a narrative fashion before I build a solution, I tend to develop a better understanding of the solution I am building. The most popular wiki software available has to be MediaWiki. It requires Apache, PHP and MySQL to work and takes less than 30 minutes to install and configure. Popular websites such as Facebook use a wiki to store information relating to their API’s, Markup Language (FBML), Query Language (FBQL) and JavaScript (FBJS). I have seen or heard people compare Wiki’s to Blogs, but I do believe and strongly feel that they are not the same. Blogs have a chronological nature, whereas wiki’s have a more static nature. Wiki’s also differ because a wiki works on a search-and-if-not-found-create basis. It means that if you do not find an item that you search for, you can create that item.
Web Design Techniques
Posted by fr3dr1k | Filed under Web Design, Web Development, Web Technologies
There are a couple of design techniques that I have not spent enough time to learn, or master. Web design is not one of my strong abilities, but it is a skill that I believe you can learn and become good at. As with a lot of things good web designs can be created by following some basic principles and guidelines. One key thing that I have not yet mastered is designing nice rounded corners for buttons or areas of content. It has to be mentioned that there are a two basic ways of achieving the rounded corner effect:
- JavaScript
- CSS and Images
What are the benefits of both or either method? ASP.NET Ajax provides a rounded corner control that is extremely easy to implement on an ASP.NET website. What if you do not use ASP.NET? Well then you can use Nifty Corners to add rounded corners to your website.
After searching Google for articles on rounded corners, I came across an article on 456 Berea Street that explains how to use Javascript and CSS to achieve the rounded corner effect. Strangely enough they don’t seem to use that effect immediately on their own website. How important is it to use rounded corners on a website?
CSS Balanced Columns
This is another technique worth knowing. Faux columns without using images? Now thats interesting. Balance your CSS Columns with JavaScript
