Website Update: New Layouts
As I've discussed in previous posts, an overhaul of the layout on most of my pages was much needed. The main factor that was holding me back from launching some of my experimental pages was the performance of various animations. The animations were set-up so the contents of the page would "slide" up from off screen, then expand to show the content. The look was nice, and it helped to expand on the card metaphor I've been using with my layouts. Unfortunately, Squarespace has various components that all pages they host must load, which users have little control over, and the loading of those components meant one of two scenarios: 1) the animations were really slow, or 2) the delay before the animations began was too long. In the end, I decided to leave the animations out, but I kept many other improvements. Here, I want to detail those improvements, and my reasoning for them.
Better use of "real estate"
Screen real estate refers to the space on a screen available for use. With all websites, there is only a limited amount of room for "above the fold" content (i.e., content on the page without needing to scroll; the term is borrowed from newspapers that discuss content on the front page above the main fold, so the content seen when the newspapers are stacked). This is especially true on smaller devices (like smartphones), so it is important to use it wisely. In order to improve the use of screen real estate for my site, there were two main changes made.
Removal of the title on each page
Before, my name and professional title showed up on the top of every page (like what is shown on the home page of my site). That was due to the layout of the template I'm using; it included the site's title and subtitle on every page. While useful for some sites (the template is originally designed for wedding sites), it was unnecessary for my site and only ended up pushing the actual content further down the page.
Fixing that was as simple as setting the title and subtitle to be hidden on most pages. It's a change that should have been made a while ago, but I wanted to make the layout changes all at once rather than incrementally. The idea was to reduce how often the flow of the site would change, so figuring out the other changes led to the delay.
Multiple columns (desktop/tablet)
Another section of the site that wasn't using screen real estate most effectively on many devices was the sides of each page. The default layout with this template is to have a single column in the middle. That's fine for smartphones (where that column takes up the entire width of the screen), but it left a lot of blank space on larger screens. In order to make better use of that space, I set up certain pages to use two columns instead of one (i.e., my blog and social pages).
But why did I only make the change on those two pages? When deciding between single and double column layout, it's important to consider the type of content on the screen. For my blog page, it made sense to put the navigation tools in a separate fixed column so they are always accessible yet out of the way. For the social page, there are a lot of images and the text is limited, so there isn't too much information overload by using two columns. My resources page, which also has a lot of images, is a little sparse on content at the moment, so it didn't seem very beneficial to switch to two columns (though it is likely next in line, once I add more content that I have planned). Same thing is true for the research page.
A challenging page is my CV page. There is a lot of information on that page, so I originally planned to have it as two columns. But a key difference with the page is that it is all text. By having two columns of only text, my worry was that it would be a lot of information on the screen at one time. It would also seem less continuous, as eyes would more naturally jump between the columns and it would be harder to follow along as a result (which has been my experience in Microsoft Word when it shows pages side-by-side). In the end, I opted to keep it as a single column for now. If I can find ways to make the information represented in a more visual way (e.g., using images to online versions of the materials, such as the contents of the research page), then I may switch to two columns later.
Something very important to me is the consistency of the experience on a site. While Squarespace does a great job of making sites "responsive" (i.e., they can scale and change layout effectively with different screen sizes), there is still a lot that needs to be considered on the CSS side to make sure the scaling happens properly. Before, there were spacing issues with my site on mobile devices that were inconsistent with the desktop look and feel. Now those issues should be fixed, and spacing of cards should be more consistent (e.g., always the same gap around images, always the same gap from the edges of the screen or containers, etc.).
In the past, I made several changes to the site to make it easier to use on smartphones. For example, the menu at the top was adjusted to have more spacing between the links and to make the touch targets larger (which means the area you can tap to activate the link is larger). Squarespace, despite adapting the layout to smartphones very well, for some reason always kept the links the same as on a desktop even though taps are needed.
In addition to those changes, I made a few more links more touch-friendly, including the buttons at the bottom of blog posts to go to the next or previous post. (It sometimes causes a little inconsistency on desktops, but nothing major). There are certainly other links that could be made more touch-friendly, but in the interest of saving screen space I want to hold off changing more links until users identify any that are difficult to use on their phones. (So if you find one that is a challenge, use the Contact Me button at the bottom of my site pages, or leave a comment on this post!)
Along with the above changes, here are some other random fixes that I made:
- There was a bug with Chrome that caused the menu bar on small screens to be mostly unresponsive to taps. This has been fixed and should now work on all browsers and devices again.
- The site should be slightly faster to load due to the smaller CSS file. I removed the animation-related CSS and all of the CSS that was for the experimental pages (which have been disabled), so your device won't be downloading more CSS than needed.
The site is finally at a point where I feel the design itself doesn't need much more work. In the future I may consider shrinking down some components (e.g., making the images in the top navigation bar smaller so the bar can be shorter). However, some of the larger sizes and spacing are to keep my site more easily accessible to users who may have a harder time seeing or need to use navigation hardware/software that is less exact than a traditional mouse and keyboard (e.g., eye tracking software), so I'm hesitant to shrink things too much.
With the overall design more polished now, my main focus is going to be adding more content. That will include blog posts, but also more resources to the resources page, and hopefully more research files within the next few months!
I'm also interested to hear any suggestions for future changes. Is there something about the site that you wish were different? Does it seem like something is missing? Let me know in the comments!