Plain talk about file names

There are a lot of conventions in web design and development, meaning “the typical ways things are done.” When you don’t follow the conventions, sometimes it would make a hiring person scratch her head and wonder why you don’t do things in the typical way.

The way we name files and folders in websites and apps follows some conventions. Some of these make a huge difference, and some are just for convenience.

  1. The primary HTML file on a site, or in a subject folder, is named index.html. This is more than just a convention — the browser will open that file automatically if it is left off the end of the URL. Examples:
    https://weimergeeks.com/ (index.html at top level of site opens)
    https://weimergeeks.com/examples/ (index.html in the /examples/ folder opens)
  2. The primary CSS file for a site or a project usually has a name that indicates its status as the main CSS for the site. Thus many web developers would name it main.css, or possibly styles.css. Some people like to name it default.css or site.css. When you have different projects, you will likely name the style files to match the project name. Look in the /css/ folder here to see examples.
  3. Note that a JavaScript library — such as Highcharts — often includes its own CSS file. Typically, that file is named after the library — highcharts.css, for example. Thus you should NOT name your personal CSS file the same name as a library you are using. It might create problems, later if not immediately.
  4. Your folder names in a web project should clearly indicate the contents of the folder. All images are typically inside a folder named /images/. The CSS files are often inside a folder named /css/. but (alternatively) may be inside a folder named /styles/. The JavaScript files are often inside a folder named /js/. but (alternatively) may be inside a folder named /scripts/.

As you continue learning and exploring other people’s projects, you will probably see folders named assets, modules, components, model, view — these will contain components that make the site or app work, rather than pure HTML files.

Remember:

  • Filenames and folder names NEVER have spaces in them.
  • They contain no punctuation other than possibly an underscore or a hyphen.
  • Do not use uppercase letters in filenames or folder names.
  • All files have a file extension — .html, .css, .jpg, .png, etc.
  • The only dot in a filename is the one at the start of the file extension.

Follow the conventions, and your work will be easier!

Advertisements

What is the minimum CSS that’s proper?

A student asked me what I mean by “decent CSS.”

In my mind, “decent” looks like you gave it some thought, care and attention. You have specified a nice font stack (no need to use Google Fonts, but you could), and you have spec’d some margins (and possibly also padding) to give the page a pleasing appearance. Any professional website has these characteristics. No professional uses the defaults for fonts, margins or padding.

Also, a professional will specify at least the body background color and the text (foreground) color, even when the background is white and the foreground is black. Why? You can never be sure that a user has not changed the browser’s default colors.

So, more precisely, decent CSS for a basic page includes:

  1. A good font stack, including a suitable font generic
  2. Changes to margins and padding as appropriate (for example, the text should NEVER sprawl full width across a wide screen)
  3. Values specified for both background and color for the BODY element, even if the background is white and the text is black
  4. Media queries as needed to make the page responsive, especially for mobile

Numbers 2 and 4 together mean that you are very likely to need at least one media query, because the way you specify left and right margins for a big screen are going to be bad on sizes more narrow than about 800px.

Do not forget to include the viewport meta tag at the correct location in your HEAD element.

I hope this is helpful.

A Web design example

I just came across this nicely designed, responsive page: U.S. Web Design Standards

Point 1: Design standards are important, and the U.S. government is starting to realize that too!

Point 2: The page reflects many of the principles of good, standards-compliant We design in 2015.

Point 3: If you click “View the Standards,” you’ll find all kinds of good advice about usability and accessibility for Web and mobile content. It doesn’t matter if you are never going to design a site for the U.S. government — these are simply good, solid design practices that serve the audience well.

Tips after Assignment 2 (HTML)

How can you do better?

One great tip is to run your HTML through a validator. Robbins explains this on page 67 (chapter 4). The one I use is here — the HTML5 validator. Check the two options, select “Text Field,” delete the default in the field, and then paste in your entire HTML — from the DOCTYPE line at the top to the closing HTML tag at the bottom. Click Validate and see what happens.

Screen shot of HTML5 validator

Filenames and folder names: Professionals lowercase all filenames and folder names. Also, NO SPACES. Robbins says this explicitly on page 53. Your page will not validate if any image filenames have spaces in them, for example.

Making your content fit to be seen by others: A photo caption that says “Photo by Joe Blow” is okay (really that’s a photo credit). A photo caption that says “Original Photo Here” doesn’t look like something I would expect to see on a real website.

Choice of filenames: For any assignment, the main page in a folder can be index.html. For Assignment 2, recipe.html makes sense. Naming a file assignment2.html looks like homework. Think about your portfolio.

Text for the alt attribute value:Alternate text (also referred to as alt text) should serve as a substitute for the image content — serving the same purpose and presenting the same information” (Robbins, page 126). More here, from the W3C, keeper of all Web standards.

Editing a super-long URL: Any super-long URL is unwieldy, and also, it will often throw an error in the validator. I demonstrated how to fix this in the “Assignment 2 Part 2” walkthrough video, at 4:00 in the video. This editing is also recommended for links you click in social media, like this one:

http://www.nytimes.com/2015/09/13/arts/design/review-broad-museum-los-angeles.html?smid=tw-nytimes&smtyp=cur

See the question mark in the URL? That question mark and everything following it can be deleted:

http://www.nytimes.com/2015/09/13/arts/design/review-broad-museum-los-angeles.html

That is a cleaner, shorter and better URL to share and to use on your Web pages. But a word to the wise: ALWAYS click the link on your page to double-check that it goes where you intended it to go.