• Skip to primary navigation
  • Skip to main content
  • About
  • Blog
  • Contact
  • Subscribe

Jenxi Seow

The world through my eyes

  • About
  • Blog
  • Contact
  • Subscribe

Web site

Dark mode

March 6, 2020 by Jenxi Seow

This site is now dark mode ready! If you have dark mode or night mode enabled on your desktop or mobile browser, you’ll be able to see the effect on this site.

Dark mode was added to iOS and recently to macOS 10.14 as well. This allows users to choose a dark theme, either as the default, or allow the operating system to automatically switch to light mode in the day and dark mode at night.

Why use dark mode?

Why would you want to use dark mode? The main reason is that it is aesthetically pleasing. It is a personal preference and some people prefer a user interface with light foreground on dark backgrounds.

For those of you who work in a dark room, using dark mode means less light colours on the screen and this reduces the strain on your eyes. Dark mode reduces the glare from the screen by switching the user interface to one that uses light text dark colours.

Dark mode for websites

With desktop and mobile operating systems supporting dark modes, an increasing number of people will be on dark mode. This also means there is a greater chance that people will land on your site with their computer running on dark mode.

Websites that don’t support dark mode will stand out, especially those with greater white or light backgrounds. When the user interface is darker, a website with black text and white background sticks out like a sore thumb. A website that noticeably changes with dark mode preference shows that the site designers value a holistic and considerate web browsing experience for their visitors.

How to apply dark mode?

It is very easy to implement dark mode on your website using CSS. You can use a media query to check if the browser prefers dark mode. While this isn’t supported everywhere yet, it’s a good start and it should gain wider adoption as dark mode becomes more widely used by web designers.

Add this to your media query section of your CSS file:

@media (prefers-color-scheme: dark) {
  body {
		background-color: #232222;
		color: #fff; 
  }
  
	a, a:hover { color: #fff; 
  }
  
}

What goes into this media query? Basically you just need to change background to a dark colour and text to a light colour. Add a tinge to the colours depending on your site’s colour palette.

Other elements you need to tweak include buttons, input fields and icons.

More than a colour palette inversion

Implementing dark mode doesn’t mean just inverting the colours or changing to light text on dark backgrounds. The whole premise of the dark mode is to reduce the glare and adjust the displayed content so they are not too bright for the user.

I dimmed the image in dark mode so the site will not suddenly feel brighter due to images. The images will still revert to full brightness when you mouse over them so you can hover your cursor to look at the images.

It took me about 40 minutes to implement dark mode on this site, my Journal and my Chinese blog. Let me know if I missed out certain elements! And I highly recommend you try it out on your site!

Filed Under: Blog Tagged With: Guide, Web design, Web site

Web design

August 10, 2015 by Jenxi Seow

I have been doing web design for a long time. It was something I took to naturally ever since I had internet access, but it was only when a friend asked me for the exact duration I have been designing websites that I realised just how long it’s been.

My first website was a fan site dedicated to the Japanese drama the Beach Boys, hosted on Geocities. I love the drama series and I think it had a big influence on my preference for lazing on the beach.The second was a Gundam shrine hosted by Angelfire.

MechaBay

WuxiaSociety

Two of fan sites that I run, MechaBay and WuxiaSociety.

These sites were memorable because they were the first two that I built, and also due to the way I coded them. They were conceptualised on paper. Sure, you might think it is perfectly normal for web designers to sketch out their ideas on paper. What I did was actually writing out the code by hand on paper.

Back in 1998, I did not have a computer at home, not to mention an internet connection. I got limited time to work on a computer either when I was at my uncle’s place or when I convinced my parents to pay for a couple of hours at the internet cafe. Since I had to work with time constraints, there was no time to spare for looking up references or even thinking about the code.

I loaned many introductory books on HTML from the library. However, the better books were often snapped up as soon as they are available for loan, so I made copies of a few references that I used regularly. Back then, I had no idea then that reproducing a whole book would be a breach of copyright.

danielho.com

danielho.com

Beautiful photography deserves web design that looks good. Source: danielho.com

With my design concept in mind, I would write down the lines of code and experimented with a few variations. So when I had the opportunity to use the computer, I could quickly typed out the codes in Notepad and tested the HTML files locally. Even after Microsoft Frontpage and Adobe Dreamweaver were released, making web design a visual affair, I still stuck to building sites by code. The applications were still useful as a means for me to instantly see how my code affects the design.

Along the way, I picked up CSS and Javascript as websites became more complex and interactive. When I entered university in 2004, I started taking paid web design jobs to earn money on the side. I was also building websites for fun. These personal projects helped me learn new skills, hone my techniques, and taught me how to be a better at running a website. All of these shaped me as a web designer/developer, and equipped me with the knowledge necessary to advice my clients on the design and administration of their websites.

Sherie #1

Sherie #2

Sherie #3

Photo layouts on my blog.

After years of working as a freelancer, my good friend Matt and I decided to pool our abilities and take on bigger projects in 2014. Several friends asked how it was possible for us to get into the web design business with no experience. That was the first time I actually counted the number of years that I have been doing web design. A decade working freelance is far from having no experience. Matt has a similar wealth of experience as well. We complement each other with our expertise in different aspects of the web design business.

Let’s make the internet look better.—RubyCoded

What we set out to do is not just build websites. We want to create beautiful web designs because the internet deserves to look good across all devices. It is sad that despite years of advancements in web browsers and web programming languages, many websites look horrendous. The website is a virtual representation of a brand, a person or an organisation. Time and money should be put in to make it look decent.

Websites nowadays need to look good not just on desktop, but also on mobile. As web browsing continues to shift towards mobile platforms, it is increasingly important for websites to look good on mobile devices.

We build websites with responsive designs. This means they adapt to desktop, tablet and mobile screen sizes fluidly, while maintaining the same design style and structure.

If you are keen to collaborate with us on a project or wish to have give you website a facelift, drop us a message.

Filed Under: Blog Tagged With: Web design, Web site

Flickriver

May 19, 2011 by Jenxi Seow

I like to browse photos taken by others to learn from them and when I need inspiration. Flickr is probably the largest image site and it should be the first place to search for photos. One of the sites that I like to use to browse Flickr is Flickriver.

Flickriver is a web-based Flickr viewer. It allows seamless viewing of photos. You don’t have to press “next” to go to the next page of photos. It automatically loads the next page to allow you to simply scroll downwards to the next page.

There are several ways to browse Flickriver.

Explore

  • Interesting Today – This allows you to view the photos that made it to the Explore page on the particular day.
  • Interesting Last 7 Days – Same as the above but for the past 7 days.
  • Everybody’s Recent Uploads – This lets you view the most recently uploaded public photos.

Search

  • Photos – Browse photos with a your desired keyword.
  • Groups – Search for a group and browse photos in the group.
  • Users – Search for a user and browse their photostream.
  • Tags – Search for a tag and browse photos tagged with the term.
  • Places – Search for a place and browse photos taken at the location.

Lens Explorer

One feature that I really like about Flickriver is the Lens Explorer. It allows you to view photos taken by a particular lens. Choose the brand of the lens and you will be taken to a page that lists most, if not all, of the lenses of the desired brand.

The lenses are sorted by focal length in several groups. They are grouped under prime lenses, zoom lenses, macro lenses or teleconverters. There is also a list of the top 10 most popular lenses for the brand. This is from my experience with the Nikon page and it may differ on the pages for other brands.

Badge Creator

The badge creator allows you to create your Flickriver badge to be embedded on your website.

My Flickriver

If you are logged in with your Flickr account, you can view your own photos. There are many ways to browse your photos. You can view by recent uploads, most popular photos, random photos, and  browse by sets or tags. Other functions include browsing by your favourites or recent uploads by your contacts.

My thoughts

I dig their concept of a river of images from Flickr. It embodies what a photostream means. Personally, I dislike having to click next to go to the next page and wait. Having the next page load automaticallymakes the whole browsing process more sleek and intuitive. I just need to concentrate on the photos.

I browse Flickriver using the Lens Explorer most of the time. I use this function when I want to get a feel of the kind of images I can get with a particular lens. This is especially useful when you are using a particular lens for the first time. This feature can give you  fresh ideas of what you can do with a lens that you are already familiar with. If you are looking to make a lens purchase, the Lens Explorer can aid your decision.

Whenever I feel like drooling, I would look at photos taken with my dream lens. Check out the sharpness and the bokeh!

If you haven’t, go try Flickriver now and let me know what you think of it.

Filed Under: Blog Tagged With: Web site

© 2002–2021 · Jenxi Seow · All Rights Reserved · Design by RubyCoded · 中文博客