Eugene Grachev | The homely page

This website is created with the technology of responsive web design which provides an optimal viewing experience — website can be viewed on any device from an ordinary desktop computer to a smartphone or even a fridge which has an Internet connection.

That’s interesting ↓

The previous version of website (January of 2010) looked this way:

Previous version

The website was aligned to the left side and had fixed width, so it began to look very ugly on high resolution monitors and especially on wide-screen ones. Moreover, it wasn’t adapted for iPhones, iPads and other smartphones and tablets with day-after-day growing popularity: the small-sized text was hard to read, and it was almost impossible to tap a link on touchscreen. Hence the main task was to make this website more up-to-date and to try not to change the design itself.

Well, we begin to draw a mockup. We make our website wider, increase the font size and change the font to lighter one. We keep the clouds but make them bigger and center-aligned. We also keep the coat of arms but remove the motto ribbon to make our website look cleaner:

Mockup

We begin from “Contacts” section because it has less information than other sections. For the icons, we choose a size not too big for a high-resolution screen and not too small for a tablet or a smartphone. And as soon as the background is a gradient from blue to azure, we keep all the icons white but add some semi-transparent elements:

Icons

Violating all the guidelines and rules we create icons in the same style for “Work” section. And also we remove all Flash objects from website: we change huge map for an image with a link to Google Maps, and in “Gallery” section we make a CSS-based slideshow. All these will guarantee that our website will work on all devices even if there’s no Flash support at all.

The “About me” section is made in questionnaire style, and among others there are “questions” like “favourite writers”, “favourite musicians” and so on. And we decide to try to use photos of those “favourites” because there are no more than five “answers” for each “question”. As it was mentioned above, the website has a difficult background, so we make photos in black-and-white:

Variant 1

The idea is good but square photos with straight borders are out of style, so we have to change something. We try to make these photos round:

Variant 2

No and no. Each photo has its own background… why not to totally remove them? And we’ve got the final result:

Variant 3

At first this website had two languages — Russian and Spanish, and the link to another language version was presented by a small air balloon at the top of the page. In new version we add English language and put icons in an unexpected place — right in the middle of main page.

And finally, using the responsive web design technology, we build our website to look great on any device connected to the Internet — a desktop computer, a laptop, a tablet, a smartphone, a TV, an e-book, a microwave oven, and even an iron.

Responsive web design

Creating a “404 error” page, we faced a very interesting question: which language to choose? We’ve got three languages and only one error page. The correct answer is — none of them:

404 error