One way to learn about web site design and function is to read and analyze and listen to experts. There are thousands of books and magazines written on the subject, as well as hundreds of thousands of pages online - including the ones you are currently reading. Below are the few guidelines and sources that we find most useful, those that we keep referring to constantly.
For those not interested in the formal study of web sites, you already have your most important tools - your own taste and judgement. Surf. Browse. See all of the Internet that you can. If you find a site you like, stop and ask yourself "why?" Is it the colors or the content or the layout or the speed with which it loads? Likewise, if you find a site that totally sux, try to figure out why... and resolve to never do that to a visitor of yours.
Using tools that are built into every browser, you can look at (some of) the underlying computer code for (most) any web page. This is a long-standing way to learn to do new things (hey, how did they do that?) as well as a source of inspiration. Your web programmers will dig into the code of sites that you like, trying to identify the source of your fascination so they can modify it to help deliver your vision. You can do the same, and also perhaps develop a new appreciation for this insane magic.
Some of the topics below are for the hard-core geek, but having a basic understanding of where these technologies are applied and what they do, even in a general sense, will improve the coordination of effort within a web development team to produce and maintain a world-class site.
Wikipedia defines information architecture as "the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape. Typically, it involves a model or concept of information that is used and applied to activities which require explicit details of complex information systems. These activities include library systems and database development".
Information architecture requires us to plan, to map out a developing website, to measure the distance in page real estate and mouse clicks between where the user currently is and where she needs to go. Yes, this is work, and it is iterative, frustrating and and surprisingly hard work. It also allows you to design your site to fit your content, instead of trying to fit your content to a standard idea of a website.
Please, do not try to rely on your visitors to complain about a disorganized site before you take its structure and information flow into consideration. Most likely, those unhappy, frustrated visitors won't complain, they will simply not return.
Web Site Design resources
The design guidelines presented in this site aren't new, and they aren't unique to us. Many of the references below give the same guidelines, and most are written much better and more clearly than what you've found here. Some of these predate the dominance of phones and tables as browsing devices, but the underlying ideas are still the same: design fast, efficient, attractive sites only around content. The sites below are a taste, there are thousands of such sites that can easily be found.
- Top 10 Guidelines for Homepage Usability
- Web Style Guide
- HHS Web Standards and Usability Guidelines
- The Birth of a Professional Web Site
A very well-written series of articles (that has been copied many times over the Internet) on developing a professional web site, starting from a blank sheet of paper.
An essential reference with tricks and techniques to optimize your site´s download speed and efficiency. These techniques are most useful as your site becomes ready for deployment, with lots of information to keep in mind throughout the design process. Also has a nifty feature that analyzes the download speed, server hits and actual "size" of a given web page. Very nicely done.
This site has some excellent discussions on how not to design web sites, with tips on how to avoid mistakes. Written by a professor, it would be nice if it took a more positive tone and tutorial approach, but that's life on the Internet.
Tools - nuts & bolts
The tools that the web site developer uses to implement the site are important to its owner. Not because the owner will be expected to code any content or feature, but because the choices of content, features and tools will necessarily limit the features of the site. Everyone in the project needs to be informed, involved and in tune.
All web sites share common characteristics. Web sites are hosted on servers, specialized computers that serve, or deliver, the content of each web page as they are requested by the site's visitors. Servers are so specialized in terms of their requirements, performance, and needs that the vast majority of web sites hire these services out to hosting companies. The cost of these services has, like all things digital, dropped to the point where they are truly cheap, and affordable to everyone.
As pages filled with meaningful content, they are sent by the developer via a secure FTP (file transfer protocol) connection to the host server, where anyone can access them through their web address or URL (universal resource locator). With most web sites, the site developer or administrator must update all content this way, and, in effect, acts as a gatekeeper between those who own the information and the vision, and the site's visitors.
Hypertext markup language (HTML)
HTML is the basic language of (almost) all web sites. It contains the instructions by which a browser like Chrome, Edge or Firefox can assemble and display your content. HTML has been around since the beginning of the World Wide Web and continues to evolve and become more powerful.
Unfortunately, not all browsers display the same set of instructions in the same way, and some have very different ways of doing so. There have been attempts to standardize how browsers interpret instructions and display content, and things are getting better. However, the standards themselves allow for variations in interpretation in order to encourage future growth, which sort of defeats the purpose of trying to establish a "standard." Oh, well. We are all learning as we travel together along this bumpy journey.
Since browsers display content differently, and since there are several dozen browsers available, both free for downloading and for purchase, there are decisions to be made about which browsers will be used for testing. In addition, there has been a vast change in the way web sites are viewed. Soemthing like 75% of the time, your site will veiwed on a phone or tablet, not a computer monitor. Today, websites have to be responsive, that is, automatically detect and configure themselves to the viewing area. Design your site for a phone, then a tablet, then a full-size computer monitor.
Cascading Style Sheets (CSS)
HTML directs a browser to break up a page into sections like paragraphs and tables and lists. Features were added to HTML to make those presentations more attractive, like changing colors and fonts, but were very cumbersome and hard to combine and maintain. But since we had the options, we used them and lived with the quirks and the headaches.
Several years ago, the concept of a style sheet was borrowed from the publishing industry. Publishing style sheets define how each part of a document (cover, table of contents, headings, ads, etc) is displayed (type size, font, placement of graphics, etc.) without dealing with the specific content itself. Applying this to web sites, it suddenly became possible to separate the content from how that content is displayed. We now develop better sites more quickly, design them to be easier to maintain and change when needed, and even make them faster to download and display. To call cascading style sheets the most significant enhancement since HTML is not much of an understatement.
It used to be that applying style sheets to a real, live, working web site was more quirky than applying cumbersome HTML, due mainly to the limited and varied CSS support in browsers. This has changed considerably, and style sheet technology is widely supported, providing vast improvements and lots of hope for the future. Smart, savvy web developers take advantage of CSS frameworks (as a bonus, some excellent frameworks are free) that take a lot of the work out of developing consistent style sheets.
As an example of the power of CSS, check out the css Zen Garden. This is a most remarkable site. It consists of just a single page of content. Graphic artists and designers are invited to submit their own style sheets to display this single page of content in wildly different ways. An incredible demonstration of the power and utility of CSS.
PHP / MySQL
ASP / VBScript / Access
When a site approaches true interaction, it is not possible to define the content of a web page until that page is requested from the server. Producing web pages on the fly allows for highly personalized content, huge flexibility and much tighter control of what is delivered. Combining this type of power with content that is stored in databases, ready to be changed and updated and subsequently delivered at a moment's notice, is to be truly interactive and results in web sites that are alive and vibrant and amazingly useful.
This sort of power also requires custom programming of the server computer itself, not a task for the faint of heart. It requires well-honed computer programming skills and has the potential, if done poorly, to crash your entire site, and even other sites that share your server. Your developer may use acronyms like ASP (Active Server Pages) and/or VBScript (Visual Basic Scripting language) when working with Microsoft Access databases on Windows servers, or PHP (a recursive acronym for "PHP: Hypertext Preprocessor") when working with MySQL databases on any type of server.