The Web Design Critique Thread

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread

Leshy: Jun 21, 2004

I recently gave my homepage/travel blog a completely new layout and I could do with some feedback on it!

Link: http://travel.leshy.net

What is it
Basically it's a mostly empty homepage that I just use for practicing webdesign, techniques, best practices and storing images and files. The only real content on it is a collection of travel stories that I wrote during holidays in the past few years, mainly aimed at friends & family, but of course also available to whomever else is interested. I'm currently in the process of also adding English translations since I'd like to be able to share them with a few non-Dutch friends as well, but only one of them is done so far.

In technical terms, it's all flat, handwritten PHP/HTML/CSS/jQuery; no CMS or database interaction involved.

What happen
The old layout was a bit boring and outdated, and I'd only added support to it for mobile devices as a bit of an afterthought. This time I wanted to build a new layout from the ground up featuring a mobile-first design that would make it easily readable and accessible on all devices and hopefully look good too.

What am I not yet happy with

One thing I'm not entirely joyful about is the FOUT (Flash of Unstyled Text). I'm using Typekit to load two fonts that I really like, but since the stories contain a number of Eastern European/Turkish words, I am forced to load the entire fontset rather than the standard European subset. That increases the size of the kit considerably, so as not to have the page be too slow on mobile devices, I've chosen to load Typekit asynchronously and set up fallback fonts that match the webfonts as close as possible. I figured that the FOUT would only happen on first page load and the font would be loaded from cache after that, but I am seeing the FOUT appear more often than I'd like. Not sure if it's something I can really fix, though.
The language selection buttons were added a bit late, and they look kind of out of place in the >1024px layout (they are okay in the menu in smaller layouts as far as I'm concerned). They end up a bit clustered too close to the home links and I'm not sure they're easy to tap on tablets either. Thing is, I'm not sure where to put them otherwise without breaking the design and still offering language selection at the top of the page. I've tried a few variations and this was the one that least bothered me � I'd be open to suggestions on this one.
Currently I feel the text runs a bit too wide in the medium ( <1024, >640) layout, so I'm thinking of giving it a maximum width there too, perhaps add another breakpoint in between if necessary. Generally make it a bit closer to the 'wide' layout than to the 'minimum' layout.

So yeah, feel absolutely free to critique and/or make suggestions

Leshy fucked around with this message at 14:24 on Dec 12, 2014

# ¿ Dec 12, 2014 14:22

Adbot: ADBOT LOVES YOU

# ¿ May 17, 2024 13:30

Leshy: Jun 21, 2004

kedo posted:

Overall this looks nice. The blue isn't my favorite as it's as close to default web blue you can get without being default web blue, but I like that there's a pop of color.

First of all, thanks a lot for taking the time to look and come up with quite a few good points of critique! You're right about the blue � it just so happens to be the color that I liked best to go with the black and white, so it stuck.

quote:

Random idea I had while clicking through the site: why not have the blue change to a color derived from the main splash image on the page? This could help each location feel like its own special entity.

This is actually an idea I had while doing the design too, but hadn't really gotten around to yet. It might be worth looking into how to best realise this; I'm pretty sure I can use PHP to place variables into the CSS, but it might throw a wrench into my workflow of writing SCSS and having it automatically compiled and minified before uploading. Could see about placing the support color declarations directly into the <head> of each page instead.

quote:

��@ mobile responsive state the main nav runs into the blue "Reisverslagen" headline, making Reisverslagen look like a piece of navigation. Maybe add some sort of bottom border to the nav?

Good spot. Happened only on the index page where there was no sub-navigation to cover up the heading; I've added a big fat black border in the narrowest layout that should cover up the heading nicely.

quote:

��Calluna is available from Fontspring, who lets you host your own fonts. Could help with your FOUT.

Unfortunately I'd have to buy Calluna there, which is quite a bigger expenditure than a Typekit subscription and would leave me with Calluna only. The typekit subscription was also a present (which I'm quite happy with), so I'm definitely sticking with that. Thanks for the suggestion, though!

quote:

��Blue links in your footer are hard to read due to contrast issues. I'd make them a bit brighter.

Tried a few lighter blues, but they didn't look good; I changed the links to white and dropped the brightness of the other footer text slightly to compensate. It should still be easily readable while still having the links stand out somewhat.

quote:

��Your hamburger icon feels huge. I'd keep the link the same size for clickablity, but make the hamburger itself about 2/3 as large.

I don't particularly mind this one myself, but I've dropped the size slightly. The clickable area has also gone down a bit (I'd have to introduce a wrapper div to set a different link size than the graphic and I'd like to avoid that where possible), but it still seems easy enough to activate.

quote:

��I wish the second line of dates in your sub nav lined up vertically with the first line (ie. Day 6 starts directly beneath Day 1). Feels like a mistake.

Not a mistake; the links are center-aligned. On this particular report, I never gave the days real titles, so it might look a bit off here. It's fine on the other reports.

quote:

��Make your lightbox overlay color black. Photos look better on black, and the gray you're using currently feels dirty.

I had it at first, but I didn't really like the way the site feels quite light and bright, and then the lightbox is suddenly very dark. I do agree that it is better for the photos, however. I've changed it to a dark color again and I'll see how I like it. If I do want a light lightbox again, I'll probably change it to a flat white instead of the slightly transparent gray, though.

quote:

��I might give the active date in the subnav a more obvious treatment. Bold + italic is obvious if I take the time to really look at it, but when I'm scanning my eyes slip past it. Try reducing the opacity?

Tried playing with the opacity, but by the time it really stood out it also started being fairly low-contrast against the background. I've tried giving the active link in the subnav a bottom border of the accent color, which seems to do the trick and which I'm not unhappy with as it fits the 'blue = active' theme of the main navigation and the language selection.

Thanks again for the good points. If you or anyone else has any others, suggestions are always welcome!

# ¿ Dec 15, 2014 11:08

Leshy: Jun 21, 2004

That is more a question for the Web Design & Development Megathread, but easy enough to answer.

Your images have a fixed height and width set in the HTML. If you only adjust the width setting in the CSS, it'll start compressing the image horizontally, but leave the height intact. Add a height: auto; to the #textPost img {} in your CSS, and the images should properly scale down as the viewport gets smaller.

# ¿ Apr 19, 2015 16:30

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread