visualgui

Be Your Own Boss

I started to listen to WorkLife with Adam Grant last week and the episode on “A World Without Bosses” struck a chore. To be your own boss, you need to work for yourself. With a family to feed and my sans-savvy business skills, working for myself is not an option. Fortunately, I have built a responsible, reliable reputation for myself that I can be my own boss in an institution.

My boss has given me the complete freedom to do my job. I have earned her trust to make my own design and technical decisions. I still run them by her, but she lets me make the call. I work directly with members of the law school community as well as the people outside. The freedom allows me to balance my work and life. I take complete ownership of all my responsibilities. For example, I don’t mind making an update to MODX in the middle of the night when no one is using the system. Likewise, I can take time off when one of my kids got sick.

Flexibility is the key to employee retention. With three kids and one more on the way, flexibility is crucial to me and my family. I cannot work in an environment that lock me in from 9 to 5. I had been there before and I was miserable and depressed. I do not want to go back to that.

Before I was promoted to Director of Design and Web Services, I was interviewed for another position. When I asked about flexibility, the new supervisor told me that she can be very flexible but I have to earn it. That’s fair and I understood her perspective, but I didn’t have a year to build up the trust. One of my kids would probably needed me the second day on the job. How am I going to earn her trust? When she made the offer, the salary was good, the people seemed nice, the job was not bad, but the flexibility had me worried.

I thought about it some more and decided to talk to my current boss. I was honest with her about the whole situation. She understood and valued our working relationship. She not only promoted me, but also matched my new salary with 10 percent more. I decided to stay and turned down the new job. I am glad that I talked to her. My wife and I were pleased that I stayed.

My boss also promised to get me a part-time web developer and she did. He has been helpful in taking care of daily requests, which allows me to focus on bigger projects. I want to get him to the point where I don’t have to send him tasks. I would like him to take ownership of his responsibility just like what my boss has done for me. My goal is to improve our web experience by making pages load faster and more attractive. When requests are low, he can find issues to work on such as cleaning up pages with spaghetti markups or creating new banners. I would also love to see him initiates projects that are beneficial to our sites. We are not quite there yet, but I really appreciate his contribution so far.

Susan Kare Who Gave the Mac a Smile

Alexandra Lange writes about Susan Kare in The New Yorker:

What Kare lacked in computer experience she made up for in visual knowledge… She also designed a number of the original Mac fonts, including Geneva, Chicago, and the picture-heavy Cairo, using only a nine-by-seven grid.

Kare is a legend.

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.

Build a Static Blog with Mavo.io

In a three-part video series, Brian Haferkamp walks through the process of building a static blog using Mavo.io. Part three is particularly helpful to see how Mavo.io works. I need to learn this new tool to build websites that will allow clients to update their own content with ease.

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.
MODX is

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.

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.

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.