Inspiration
Here are some site features from various sites that might be good inspiration for our own site design.
Adobe Web Platform Team Blog
http://blogs.adobe.com/webplatform/
Nice body-text font, readable and friendly. Ubuntu typeface with font-size of 16px and line-height of 24px.
VoilaVie.fr
http://www.voilavie.fr/view/2595
This site has several nice features:
Shrinking Header
The header banner shrinks and retracts when the user scrolls down, changing the focus from the initial impression of site identity to an unobtrusive, utilitarian
Full:
Scrolled:
Animated Scrolling Gallery Thumbnails
Each gallery thumbnail consists of a picture and a caption; when the item is scrolled over, the caption title turns red, and the picture scrolls up to reveal the caption description.
BadassJS
A nice use of dropshadow on the content area, trendy floating folded banner, and subtle grid background to add texture.
HTML5Rocks
Search & Navigation
Nice use of icons in full-width menu dropdown to indicate different technology categories. Also, nice layout and colors on menus.
Ability to filter list of articles by format, audience, technology or tags (would be nice to have other parameters, like date, author, etc.).
Profile Page / Bio
Map of location, profile picture, list of contributions. (Our site should have a profile page for each contributor, but might have a “collection page” for all contributors in a team or employed by a specific organization.)
DocHub
Excellent autocomplete live-filtering search box. Simple, clear, non-distracting design.
ReadTheDocs
Elided long strings on items in sidebar are revealed in full text when sidebar is moused over (or in focus), rather than using a horizontal scroll bar. Focused list item is outlined.
For serial content, it’s good to have a “previous” and “next” link, with page title, though it doesn’t necessarily have to be in sidebar (could be in footer, or on right side callout, or whatever).
The Django Book
http://djangobook.com/en/2.0/chapter02/
Comments system lets you comment on any block inline in a handy but unobtrusive way, with a marker that indicates how many comments that block has. When the marker is activated, it brings up a forum-style comment dialog.
This could be implemented even more easily and extensibly by opening an absolute-positioned iframe with a dedicated forum page; the user could then choose to go directly to the full forum view, or could comment right there. It would also be nice if the comments were in the sidebar, rather than over the content area.
Some details about the comment system are on the help menu.
Inset Code Examples
I think it would be clever to have the code examples inset, as if they were “behind” the page.
<style class="example">
style.example {
display: inline-block;
white-space: pre-wrap;
border-radius: 8px;
font-family: Monaco,Courier,MonoSpace;
background: none repeat scroll 0 0 #777777;
font-size: 12px;
line-height: 1.8;
margin: 0 0 25px;
overflow: auto;
padding: 10px 20px 10px 10px;
position: relative;
box-shadow: 0 0 25px #000000 inset;
color: white;
}
</style>
HTML Dog
Nothing particularly notable about the design itself, but the structure and types of information is very useful for beginners.