Satsuki Ina Website

This freelance project was a complete redesign of an existing site for the writer and activist; Satsuki Ina. The focus of the project was to replace a slow loading WordPress theme with a custom one that was streamlined to be more performant.

The Design

This site was designed to be mobile-friendly, easy to read, and simple to navigate. The design is influenced by Japanese aesthetics and incorporates kanji characters for "book" and "film" as "watermarks" for content related to these genre of media. The homepage sections are styled to mimic the panels of a shoji screen.

The site features different layouts for the homepage, content pages and category index pages for books and films. The navigation is laid out horizontally for tablet and desktop devices with dropdown menus for pages under the main menu item. The navigation for mobile is collapsed behind the "hamburger" menu control and features submenus that expand when the main item is clicked.

Click on each screenshot to enlarge them.

Homepage screenshot
Homepage screenshot

The Homepage

Detail of the homepage top section

Detail of the dropdown menu
Detail of the dropdown menu

Navigation Detail

Detail of the dropdown menu navigation for desktop viewers

Detail of the homepage footer
Detail of the homepage footer

The Homepage Footer

Detail of the homepage footer

Full homepage screenshot
Full homepage screenshot

The Homepage on Mobile

Mobile View of the homepage

Content page layout
Content page layout

The Content Page

Detail of a content page featuring a hero banner

Detail of the menu for mobile
Detail of the menu for mobile

The Mobile Menu

Detail of the menu closed, opened, and expanded

Technical Details

This site was built from the ground up and includes a custom-built WordPress theme, succinct and semantic HTML, and modern CSS and JavaScript.

The Theme

The custom theme featured the use of custom fields to apply hero and featured images. Custom functions include the topnav menu and link list generator. Custom loops were developed to apply curated content to the homepage.

The Markup

Special care was applied to ensure that the markup was as shallow as possible since CMS systems like WordPress tend to have many nestings of sectioning markup. The resulting pages rendered markup that was sparse and incorporated recommended semantics to support accessiblility and SEO.

The CSS

This site was built to be mobile-friendly. Media queries are used to adjust the layout as the viewport expands or contracts. The "Lato" font was incorporated as a webfont sourced from Google Fonts to provide a simple and elegant typeface. CSS transitions were employed to manage the menu animations for mobile and desktop.

The JavaScript

JavaScript was used to run the menu including calculating the height of the main menu and the sub-menus for mobile so that the height could be animated via CSS transitions when they were expanded.