Computers in Libraries 2018: Day 1

I always have a mixed feeling about the annual Computers in Libraries conference. In past years, I hardly found the presentations inspiring. Many of my colleagues probably felt the same; therefore, most skipped this year. I was not planning on going either, but I changed my mind at the last minute before the discount ended. With the group rate and membership discount, the admission is quite cheap; therefore, I don’t feel so bad. Although the venue is in Arlington, Virginia, I get to get away from the office for a few days.

For the first day, I sat in most of the presentations on UX and digital presence. In the first presentation, “Creating Engaging Content Strategies for Maximum Impact,” I had no clue what the speaker what talking about. Followed by “Custom Data Rich Websites Using Information Architecture,” which is another boring talk on Drupal. After lunch, I was half zoned out on “Iterative Design: Users in Learning Object Development.” Worse was “Website Design Winners & Losers!” The title alone made me cringe.

After being fed up with boring web talks, I switched to a different track. Learning about Dash and Dot robotics for the first time excited me. It seems like an excellent way for kids to learn to code. Đạo’s birthday is coming up. I am thinking of dropping $280 on Wonder Workshop Dash & Dot Robot Wonder Pack for his present. It’s not cheap, but it is more useful than buying him Lego. With Lego, he would spend an hour or two building, but Đán and Xuân could just break it in a second.

For tomorrow, I will try to attend presentations that I don’t know anything about.

Gutted Google Analytics

After many months contemplating, I pulled the plug on Google Analytics last night. Although GA is not as intrusive as other trackers, I no longer want to keep track of my visitors. I don’t know how many of you are reading this site, but I respect your privacy. I have done nothing with the data GA collected and I have not checked my traffic for a long time.

I would love to know my readers (you can contact me any time), but I am also fine not knowing. It’s a personal blog after all. I write what I want to write and you read what you want to read. We can keep our relationship that way. It’s all good.

With all the in-your-face ads and snooping scripts all over the internet, I would like to provide you a place to escape. When you come to my site, you can read and leave. If you enjoy what I write, you can come back. That’s it. I want to help make the web a friendly place to visit again. I also want to comply with the General Data Protection Regulation (GDPR).

In addition to this blog, I gutted GA on my portfolio site, Vietnamese Typography, and Professional Web Typography. Now you can read and browse these sites without being tracked.

Grid-Gap Issue

I had an issue with the grid-gap CSS property when I redesigned this blog last year using CSS Grid. The gaps don’t work as I had expected. Take a look at the demo on CodePen.

Four equal columns:
grid-template-columns: 1fr 1fr 1fr 1fr;

Three columns where the middle column is doubled:
grid-template-columns: 1fr 2fr 1fr;

In a grid layout, I expect the columns and the gutters to line up correctly. The middle column (B&C) on the second example should match up with column B and column C in the first example, but they don’t. They are a bit off. I don’t think this is bug. Browsers just interpret grid-gap as gap in between the columns; therefore, they don’t know that column B&C, which has 2fr, should include a gap just like column B and column C in the first example. Am I missing something? If you understand the issue, please let me know.

Update: Ngô Thiên Bảo tweeted the solution. This is all I need:

grid-column: span 2;

I can’t believe I did not know that. Now I know.

Simple Content Management Solution

After writing “Web Design Doesn’t Have to be Complicated,” I had one designer asked me what CMS solution I offer to clients. Here is my somewhat long answer.

I use MODX and WordPress everyday at work. As much as I appreciate the “creative freedom” of MODX, it is way too complicated for a simple website. Standing up MODX is not quick and easy. Creating templates and user roles can be daunting. Updating MODX is not straightforward either. For a higher education website like Scalia Law School, MODX is perfect. For a small, brochure site, it is way overkilled.

WordPress is simpler and its automatic update is still unmatchable in any CMS. Installing WordPress is not too difficult even though a database is needed. WordPress has increasing becoming complex over the years. Creating a theme is no longer quick and easy. WordPress is still great for blogging (like this blog), but it is still too heavy for a simple website.

My ideal solution is a dead-simple CMS that allows my clients the ability to update the text and nothing else. They can’t mess with the design, fonts, and inline CSS. They don’t even need to add a new page or new image. I can take care of those for them. If I can create static pages (using PHP includes and simple functions) and only have the main text area editable, that would fantastic. If you know a CMS that does only that, I would love to learn more.

I have been keeping an eye on Mavo developed by Lea Verou. It seems like the solution have been looking for. Unfortunately, Mavo is still in beta; therefore, I am not sure if it can be used on live site. I read the documentations, but I don’t quite understand how storage works. I tried to reach to to Ms. Verou, but her email isn’t working. I also hesitated to bother her.

With a recent project, America: The Unknown Country, I created a static website for my client. At first I thought it was a launch and done deal, but the client had requested many text updates. While I don’t mind doing it, I don’t want to keep charging him for something he could do himself. He asked me to teach him to do the updates himself. I don’t mind teaching him HTML and FTP, but I don’t think it is a simple solution either.

I finally decided on Kirby. I have used Kirby in a previous project and what Kirby offers is very closed to what I have in mind. Setting up Kirby on my local machine is simple. I just drop Kirby into my MAMP environment. If you have PHP 5.4 and above, you are ready to go. You don’t need to mess around with setting up the database. The documents are well-written and easy to follow. For example, setting up a simple contact form takes 10 minutes.

With Kirby, I can still design just like the way have done with my static site. Kirby works with my design rather than me trying to my way around Kirby. The magic of Kirby is moving your final site from your local machine to the client server is as simple as uploading the entire project directory. The key attraction of Kirby is the Panel, which allows clients the ability to update the content without messing up my design. Updating Kirby is fairly simple. You just need to replace two directories: kirby and panel. Automatic update (for minor releases) would be fantastic for Kirby.

Kirby is not free, but affordable. As of this writing, a personal license costs $17 and pro license costs $89. I have no problem covering the cost of the license for the clients. What I like about Kirby’s model is that I don’t need to pay until your site goes live. I can download the full version to develop offline and I can pay when the site is ready to launch. So far I have developed two sites using Kirby and I will definitely offer it to future clients.

Vernon Adams, Thank You

As I was browsing the Google Fonts directory, the name Vernon Adams popped all the time. He has designed 51 font families for Google. Out of curiosity, I wanted to find out more about him. Unfortunately, Adams died two years ago after a motor scooter accident. His father-in-law has written a short blog post about him and his work as a type designer. His legacy lives on as his unfinished fonts are continued to be worked on from other designers. Thank you and rest in peace, Adams.

Small Websites Don’t Need to Look the Same

It gets me every time. Whenever I listened to an engaging web design podcast from well-respected web designers talking about the possibility of CSS grid or the excitement of art direction on the web, the host would ask the guest to hold on to that thought so the host could thank the sponsor. Then the host would proceed with something like, “When I have friends or a family members needed a website and they ask me to do it. I don’t want to hurt their feeling, but I also don’t have the time to do it. So I recommend Squarespace to them.” Then the host goes on to read all the wonderful features like big sliders and slick parallax scrollings Squarespace offers.

Isn’t it hypocritical of the hosts to accept those kind of sponsors for web design podcasts? On the show, they criticize how the web is losing its soul and yet they have no shame promoting pre-designed templates from Squarespace, Wix, and similar services. Don’t small businesses deserve a unique-looking website as well to communicate with their customers? Templating is not the way to go. These days, I can spot a Squarespace-templated website without even having to look at the source codes. They all have similar layout, typography, and big graphic area.

If you care about your brand, image, and uniqueness and your designer friends turned you down, don’t settle for generic designs. There are still tons of individual web designers specializes in creating small, simple websites. I am one if them. I have a full-time job already; therefore, I love working on small websites on the side. What type of sites are we talking about? Let’s take a look at some examples.

If you have something to promote, you could use a simple, fast website. For example, I recently designed a website for a professor who had written a screenplay. He didn’t need a CMS since the site is mostly information about the film. He updated the script from time to time and I am fine with helping him uploading a PDF.

If you own a restaurant, you could use a unique website that stands apart from templated designs from Squarespace. I designed a website for Le Mekong Vietnamese Cuisine almost ten years ago and it is still looking great today. The owner contacted me from time to time to update the menu, but most of the information remain the same.

If you want to have the ability to update your own content, I could help you choose a CMS that make works well for what you want to do. For Đẹp Designs, a small architecture studio, I implemented Kirby for them to update the contents with ease.

So if you need a small, custom-designed website, come talk to me rather than making your business the same as millions of others. You want to stand out, not stand in.

Font of the Month Club Renewed

I just renewed my membership for Font of the Month Club by David Jonathan Ross. I can’t believe it has been almost a year already. Time flies when you have fonts every month.

Even though these fonts are works in progress, I have been able to put them to use on this blog (current headings are set in Rhododendron) as well as my own site (Bild and Roslindale Text). I must sound like a broken record, but Vietnamese support in a typeface is crucial to me. I am glad David has included Vietnamese diacritics in every Font of the Month. I wish more type designers would make Vietnamese support part of their work-in-progress fonts as well.

After eleven months with eleven fonts, I am still a happy member. If you love playing with types, you’ll definitely find values in being a member. If you’re a design student, this is a good way to impress your professor and classmates without putting a whole in your wallet. As much as I love classic typefaces, I am getting tired of seeing Akzidenz-Grotesk, Helvetica, and Univers in every packaging, branding, and web design. It’s time step up your student projects with new fonts.

I am looking forward to getting all the fonts on the first day of each months to come. Thank you, David.

Logo Updated

Incase you haven’t noticed, my logo has a bit update. The i’s are now dotted. The suggestion came from the type designer himself. David Jonathan Ross pointed out to me that he had created an alternative style for the i. When I implemented the i, the dot was a thin line. After looking at it, David made the dot thicker so that it is the same size as the upper part of the g. I did not see the correlation between the two. I love the new i’s. They are much more legible than the blocks I shamelessly created as part of the grid rather than the actual letter i’s. It is such an honor to have the type designer himself helped make the logo better. I appreciate his input.

Web Design Doesn’t Have to be Complicated

Designer Frank Chimero has written eloquently about the increasing complexity of web design. I appreciate his honesty. As someone who has been making websites for a living for 16 years, I share his sentiment. I feel his confusion and frustration, but I would like to offer a more optimistic view. Web design doesn’t have to be complicated.

In 2002, I landed my first full-time job as a web designer at Vassar College. At the time, I was transitioning from Flash to table-based web design. ActionScript overwhelmed me. Flash was no longer a fun animation tool for me. Table-based layout was a pain to code, but Dreamweaver came to rescue. I still remember slicing and dicing up Photoshop mockups with spacer GIFs all over the layout.

In 2003, I made another important transition from table-based to CSS layout after reading Jeffrey Zeldman’s indispensable Designing with Web Standards. Between 2003 to 2004, I spent most of my working hours retrofitting Vassar’s websites from table-based to table-less using floats. Like Frank, I did not quite understand clearfix either. My workaround was using Dan Cederholm’s “group” suggestion.

I came to web design without any design background; therefore, my approach has always been simple and clean—not only with the visual layout but also the markup. I was a proponent of separating structure and presentation. In the first decade of my professional career, I kept myself on top of the game by reading blogs, articles, and books. I made the transition from fixed layout to responsive web design with ease and excitement.

As I was getting older and starting a family, I began to fall behind. The web just kept on growing without me. I recalled listening to the ShopTalk show and had no clue what Dave Rupert and Chris Coyier were talking about. What the heck were Angular, Backbone, Dojo, and React? What were Broccoli, Gulp, and Beanstalk? I knew they weren’t talking about vegetables and drink. Eventually I just stopped listening altogether to save me from depression.

I had recognized that web design had become too complicated and overwhelming for me; therefore, I decided to refocus my energy on the parts that are important to me. I did not need to follow the latest trends. I was not into parallax scrolling. I did not want to use any frameworks. I wanted to create websites that focus on speed, legibility, readability, accessibility, and simplicity. My main tools are HTML and CSS. I use JavaScript only when I have to. Responsive navigation is an example that required JavaScript to work.

Typography matters a great deal to me and I understand that using web fonts could be complicated. As Frank rightly pointed out, Bram Stein has written an entire handbook on the subject. In my own book, I also pointed out various methods of delivering web fonts. To get started, however, I just need one line of markup:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

I knew that I would miss out the nuances of font-loading techniques, but I am OK with that. Frank pointed out that CSS Grid is daunting to learn and I agree. The complexity that CSS Grid can handle is mind-boggling, but it doesn’t have to be complicated. As demonstrated in my book, I could accomplish a solid grid layout with a few lines of CSS:

.grid-layout {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 1em;
}

Again, web design doesn’t have to be complicated. With HTML, CSS, and PHP includes, I can put together decent websites. I don’t need a CMS. Even WordPress has become too complicated for me over the years. I started using WordPress before WordPress launched. Remember B2? Back in the B2 and WordPress 1.0 days, creating a theme was a breeze. I just needed 2 files (index.php and style.css) and an optional image (screenshot.png) for the screenshot of the theme. Parts that needed to be dynamic, I just needed to hook up some PHP snippets. In fact, this blog is still built using this approach so that I know exactly the pieces of codes go into my theme.

Now, an official theme from WordPress, such as Twenty Seventeen and Twenty Sixteen, has about 100 files. These days, creating a theme from scratch for clients is such a huge investment. In the past, I used starter themes like Underscores for client, but even that had begun to get complicated. As a result, I stopped offering WordPress to clients.

I moved away from complication and get back to the simplicity of web design. I enjoy the web more that way. I am like the Jay Z of web design.

Dean is Dead

Although I don’t know Dean Allen on the personal level, I am shocked and saddened to learn that he had passed away. Om Malik has written a beautiful remembrance of a man who had profound influence in the web community back in the days.

For me, Dean taught me typography way before I even knew anything about type. I used to marvel the simple, minimal design of Textism. He was also a fine writer with impeccable prose and humor. “Annotated Maunifesto” is one of my favorite pieces he had written.

When I worked at Vassar college in early 2000s, one of my responsibilities was creating homepage banners. When I got stuck, I browsed Dean’s book cover designs for inspiration. I “stole” his simple use of imagery and typography.

Last week, I was thinking of him out of the blue. I tried to revisit his site, but it is no longer available. Today, I found out “Dean is no more.” Thank you and rest in peace.