Overview > Visual Design > UI Design > Hand Coded Responsive Website - 2014

 
 

Hand Coded Responsive Website - 2014

I’m not a Developer. But I always want to be as cognizant of what I’m asking Developers to code as I possibly can. So in 2014, when I set out to build myself a new portfolio Web-site, I decided to make it fully responsive. Every line of HTML and CSS3 was hand-coded by myself over the course of a few months. With over seven breakpoints, three major page types, each with four discrete layouts, the workload was considerable. But the result every inch as satisfying.

 
 
ResponsiveGUXD02.png

( view with animation )

 
art_responsiveportfolio_homepage_02.png

Home Page

With <a> tags turned into inline thumbnail tiles, each with animated mouseover titling, this page makes the most of every pixel of screen real estate across devices and only drops the slider image for mobile. See it live →

art_responsiveportfolio_portfoliopage_02.png

portfolio item

This page was used for the drill-down of portfolio items and puts the emphasis on the visual while keeping verbiage and ancillary links easily-accessible in the mobile context. See it live →

art_responsiveportfolio_textpage_03.png

level 3 content

In contrast to the portfolio layout, this page keeps the verbiage preeminent, dropping handy in-page indexing only in the slimmest of mobile contexts and adapting font sizes as necessary. See it live →