I was recently asked to create a website for a non-profit, and I’m having trouble with an about page. I wanted something similar to Codecademies about page, and was wondering if anyone had any tips, or help on how to do this.
One wishes there was an easy answer to this question, but without going the code scraping route there isn’t one. CC is using any number of tools to fashion their site’s overall presentation. The easiest way to replicate it would be to examine the components and how they behave. Ask yourself, ‘what is happening, here?’ The site uses a responsive design that is suited to desktops and tablets. Will yours?
Most important to start with the basic structure. What information is going to be there, and how will it be structured in the HTML document? Structure is not about positioning or hotspots on the screen. It is strictly about outline semantics.
Create the ugly old HTML static page with no style sheets or behaviors. Get all the prescribed content wrapped in tags that describe their intended use (heading, paragraph, list, etc.) and then wrap them in containers that describe their division from one another. In this way we organize the content in a way that makes sense to a screen reader or a search engine. Neither of them care dither what styles or behaviors your page has. All they want is the text that is semantically organized to make sense enough for indexing.
This cannot be stressed enough. It is where the real mastery begins and never gets old. We start an essay with an outline that we ruffle through a few times. Then we start the writing, and rejecting and refining and paring. The topics should follow the proposed outline so now they get tagged and inserted into the document.
Focus on principal content first. Relate it back to the theme of the site later, giving every page license over its principal content. The stuff we just related to above goes in that space, but also at this point should be able to stand alone, in the raw, in a basic HTML page.
Concentrate on content and markup while sticking to an outline. Too many designers and content creators do not even know what raw HTML without CSS looks like in a browser. That’s like saying I can’t write unless I have this wallpaper in my office. The outline is at the very heart of a working webpage that search engines will want to index.
I stress this because too many template and framework systems force us into a rigid heirarchy and structure that abstracts away all the above thinking and practice which I believe is vital, and something we should do for sport at the start of any content creation session. Write in the raw and get the outline down pat.
Now that we know what our principal content will look like, we can turn attention to the auxilliary page elements and positioning, sizing, presentation, etc. That’s when you come back to the about page and wonder some more. It will click then.