50 Beautiful One-Page Websites for Inspiration

Here are some excellent one-page / single-page websites to check out. There are a variety of website types included in this showcase — online portfolios, restaurants, mobile apps, and more. I hope looking at these one-page sites will give you ideas and inspiration for your web design projects.

One-page website: Heart KidsHeart Kids

One-page website: Nigel Evan DennisNigel Evan Dennis

One-page website: VibrantVibrant

Café Frida

One-page website: Flavien GuilbaudFlavien Guilbaud

One-page website: Designer TrekDesigner Trek

One-page website: Jonathan David PostJonathan David Post

One-page website: The Hen HouseThe Hen House

One-page website: The WndrlndThe Wndrlnd

One-page website: Pauline OsmontPauline Osmont

One-page website: DangerousRobotDangerousRobot

One-page website: AirnautsAirnauts

One-page website: We Ain't PlasticWe Ain’t Plastic

One-page website: OxenOxen

One-page website: Adrian CabreroAdrian Cabrero

One-page website: Delhi TimelineDelhi Timeline

Urban Walks

One-page website: Bad AssemblyBad Assembly

One-page website: McWhopperMcWhopper

One-page website: Bright New DayBright New Day

One-page website: You Gotta Love Frontend ConferenceYou Gotta Love Frontend Conference

One-page website: MusicMusic

One-page website: GinventoryGinventory

One-page website: AMORIZAMORIZ

One-page website: Nua BikesNua Bikes

One-page website: BlocklevelBlocklevel

One-page website: Hound StudioHound Studio

One-page website: Jules Bassoleil PortfolioJules Bassoleil Portfolio

One-page website: creanetcreanet

One-page website: Le Tour de France - 100 ans de TourLe Tour de France – 100 ans de Tour

One-page website: Design EmbracedDesign Embraced

One-page website: KochaKocha

One-page website: Jacks BarJacks Bar

One-page website: FlatGuitarsFlatGuitars

One-page website: The TwelveThe Twelve

One-page website: Andrew McCarthyAndrew McCarthy

One-page website: Terminal WeddingTerminal Wedding

One-page website: ArcArc

One-page website: Guilherme PangnottaGuilherme Pangnotta

One-page website: Laura BaffariLaura Baffari

One-page website: Inception ExplainedInception Explained

One-page website: Axel AubertAxel Aubert

One-page website: EskahEskah

One-page website: Pen & QuillPen & Quill

One-page website: The Mohawk ShowThe Mohawk Show

One-page website: Michael SuenMichael Suen

One-page website: ÉléphantÉléphant

One-page website: MindworksMindworks

One-page website: BoldBold

One-page website: Names for ChangeNames for Change

Read Next

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

Circular Images with CSS

In this tutorial, we’ll go over some CSS techniques for rendering circular <img> elements. The main CSS property responsible for the effect is border-radius.

Though it’s quite simple to apply the effect to square images, rectangular images will require a little bit more extra work.

Examples of CSS circular/roiunded images

View Demo

Download Source

Square Images

An img element that’s perfectly square only needs one line of CSS. This technique works best on square images.

HTML

<img class="circular--square" src="woman.png" />

CSS

.circular--square {
  border-radius: 50%;
}

The style rule above is the shorthand for:

.circular--square {
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}

By setting all the border-radius properties to 50% of the width/height of the square img element, we end up shaping the img element into a circle:

How to create circular img elements from square-shaped photos

Rectangular Images

Rectangular images are a bit trickier.

To render a circle, the image must start out as a square.

To work around the problem, we can wrap the img element in a square div element. We then “crop out” the parts of the img element that go beyond the square wrapper div. We can carry this out by setting the wrapper div‘s overflow property to hidden.

So that the subject of the photo is less likely to get cropped out, we also have to treat landscape photos (which are horizontally-oriented rectangles) differently from portrait photos (which are vertically-oriented rectangles).

Landscape-oriented Images

HTML

<div class="circular--landscape">
  <img src="images/barack-obama.png" />
</div>

CSS

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

The width and height property values must be the same so that the wrapper div (.circular--landscape) renders as a square.

In addition, the width and height property values must be equal to or less than the height of the img. This makes sure the img element is able to occupy the wrapper div without being stretched out.

Generally, the subject of landscape photos will — but not always — be located around the center of the composition. To give us the best chance of not cropping out the photo’s subject, we can horizontally center the img element in the wrapper div by nudging the img element to the left to compensate for the left-biased cropping.

The amount we nudge the img element is equal to 25% of the width/height of the wrapper div. In this case, we will nudge the image 50px (25% of 200px is 50px) to the left. We can accomplish this by setting the margin-left property of the img element to a negative value:

margin-left: -50px;

How to create circular img elements from landscape photos

The assumption that the subject of the photo will be close to the center of the composition is not always going to be true. It’s best to keep this assumption in mind when you’re choosing (or editing) images for this technique.

Portrait-oriented Images

HTML

<div class="circular--portrait">
  <img src="images/woman-portrait.png" />
</div>

CSS

.circular--portrait {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: auto;
}

The assumption we’ll make for portrait-oriented images is that the subject of the photo is at the top-center of the composition. Again, this isn’t going to be the case in every single portrait photo.

Similar to landscape photos, the wrapper div of portrait-oriented img elements must have equal width and height property values so that the wrapper is a perfect square.

This time, the width/height property value must be equal or less than the width of the img element so that the image can cover the wrapper div without being stretched out.

For portrait-oriented images, we assign a height of auto and width of 100%. (We did the opposite for landscape-oriented images.)

We don’t need to move the img element, because our expectation is that the subject of the photo is at the top-center of the composition.

How to create circular img elements from portrait photos

Recap

This technique is best used on square img elements, with the subject located dead-center of the photo. But, we don’t live in a perfect world, so if needed, you can use a wrapper div for rectangular img elements.

The main CSS property responsible for the circular shape is the border-radius property. Setting the radius of the corners to 50% of the width/height results in a circle.

Related Content

Responsive Full Background Image Using CSS

How to Create CSS Ghost Buttons

Creating Responsive Images with CSS

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

20 Beautiful Examples of Modal Windows

Websites often use modal windows as call-to-action tools and for pointing out important information.

For example, the call-to-action in a modal window might ask the site visitor to subscribe to the site’s newsletter. A study by user experience research firm Nielsen Norman Group revealed that 90% of the study’s participants chose to receive updates from companies via an email newsletter, versus only 10% via Facebook. This might indicate that an email newsletter can be an effective way of developing customer relationships.

Let’s look at a few examples of well-designed modal windows. The following examples are mostly within the fashion industry because that’s the industry I’m currently working in.

Anatomy of a Well-Designed Modal Window

Seamless Design

It goes without saying that modal windows should be in tune with your site’s visual style. You don’t want modal windows to appear third-party-esque.

We follow this rule over at Mylo, a menswear mobile app that I have founded. The modal window that asks our website visitors for their email address is consistent with our brand’s visual attributes. In our case, a lot of white space, clear typography, and the copy all match up with the design guidelines of our brand.

MyloMylo

The modal window found at Jean Stories (a fashion site dedicated to denim) also stays consistent with the site’s overall visual style. Notice their consistent application of their brand’s color scheme and the incorporation of their logo within the modal window.

Jean STORIESJean STORIES

Clear Purpose

Modal windows should preferably have a single objective. The objective might be to let the visitor know of a site-wide discount or get him/her to sign up for the site’s newsletter.

A well-designed modal window should only request essential information. Overloading potential customers with form fields to fill out and boxes to check off is not wise because doing so might lead to inaction.

Ecommerce websites may want to consider offering an incentive in order to compel visitors to perform the desired action, such as a discount on goods in exchange for signing up to the site’s newsletter. Below are a few examples of modal windows that offer percentage-based discount incentives:

AYRAYR

FineryFinery

Misha NonooMisha Nonoo

M.PATMOSM.PATMOS

Content is King

Your modal window’s copy should embody your brand’s attitude, tone, and style.

You can also state a value proposition in the modal window. For example, DuJour magazine’s modal window states their newsletter’s value proposition to potential subscribers: "The luxe content you can’t find anywhere else."

DuJourDuJour

More Modal Window Examples

Below are a few more modal windows that follow the general guidelines mentioned above.

Steven AlanSteven Alan

BonobosBonobos

Stella McCartneyStella McCartney

The Prince Ink CompanyThe Prince Ink Company

Need Supply Co.Need Supply Co.

GreatsGreats

The Socialite FamilyThe Socialite Family

Thisispaper ShopThisispaper Shop

Volta FootwearVolta Footwear

Austin BeerworksAustin Beerworks

Atea OceanieAtea Oceanie

Victory JournalVictory Journal

Zurb UniversityZurb University

Summary

Modal windows can be used to ask your site visitors to perform an action (such as subscribing to your email newsletter) or for sharing an important message.

A good modal window will have:

  • a design that is consistent with your brand’s visual style
  • a clear objective
  • good content that reflects the attitude, tone, and style of your brand

Thanks to Faiz Tariq and Carolyn Buszynski, the co-authors of this article.

Related Content

Creating Focal Points in Your Web Design

Optimal Techniques for Strategically Displaying Web Forms

What White Space Can Do For You

The Art of Distinction in Web Design

Daniel Eckler is an entrepreneur based Toronto, Canada. His most recent startup is Mylo. Past ventures include Piccsy and EveryGuyed. He has a background in New Media Arts. Learn more about him by via his website, and join him on Twitter and Facebook.

25 Things Designers Have Said About Design

The quotes we chose for this collection are from some of the most respected designers and artists to have ever designed. We chose quotes that we feel best represents each designer. We hope their insightful words inspire you to be better designers and artists yourselves.

Saul Bass

I want everything we do to be beautiful. I don’t give a damn whether the client understands that that’s worth anything, or that the client thinks it’s worth anything, or whether it is worth anything. It’s worth it to me. It’s the way I want to live my life. I want to make beautiful things, even if nobody cares.

Some of Saul Bass’ work.

Stefan Sagmeister

Having guts always works out for me.

Best known for his work here. 

Massimo Vignelli

Good design is a matter of discipline. It starts by looking at the problem and collecting all the available information about it. If you understand the problem, you have the solution. It’s really more about logic than imagination.

Possibly Massimo’s most recognizable piece is this. He’s done much more.

David Carson

You have to utilize who you are in your work. Nobody else can do that: nobody else can pull from your background, from your parents, your upbringing, your whole life experience.

An example of David Carson’s work.

Charles Eames

To whom does design address itself: to the greatest number, to the specialist of an enlightened matter, to a privileged social class? Design addresses itself to the need.

Ray Eames

What works good is better than what looks good because what works good lasts.

One of Charles and Ray Eames’ most iconic designs is this (one of many iconic designs).

Alvin Lustig

The words graphic designer, architect, or industrial designer stick in my throat, giving me a sense of limitation, of specialization within the specialty, of a relationship to society and form itself that is unsatisfactory and incomplete. This inadequate set of terms to describe an active life reveals only partially the still undefined nature of the designer.

You may have seen his work.

Paul Rand

I haven’t changed my mind about modernism from the first day I ever did it… It means integrity; it means honesty; it means the absence of sentimentality and the absence of nostalgia; it means simplicity; it means clarity. That’s what modernism means to me.

One of the most influential designers of the last 100 years.

Jony Ive

Simplicity is not the absence of clutter, that’s a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object and product. The absence of clutter is just a clutter-free product. That’s not simple.

You may have seen his work.

Marc Newson

People kind of tend to mystify design and architecture by suggesting you need to train.

His work here.

Dieter Rams

Design should not dominate things, should not dominate people. It should help people. That’s its role.

You may know these 10 principles.

Bob Gill

No matter how many times your amazing, absolutely brilliant work is rejected by the client, for whatever dopey, arbitrary reason, there is often another amazing, absolutely brilliant solution possible.

Sometimes it’s even better.

Learn more about Bob Gill work here.

Abram Games

Maximum meaning, minimum means.

His work.

Milton Glaser

The real issue is not talent as an independent element, but talent in relationship to will, desire, and persistence. Talent without these things vanishes and even modest talent with those characteristics grows.

We heart his work.

Paula Scher

Another thing they don’t teach you in design school is what you get paid for… Mostly, designers get paid to negotiate the difficult terrain of individual egos, expectations, tastes, and aspirations of various individuals in an organization or corporation, against business needs, and constraints of the marketplace… Getting a large, diverse group of people to agree on a single new methodology for all of their corporate communications means the designer has to be a strategist, psychiatrist, diplomat, showman, and even a Svengali. The complicated process isworth money. That’s what clients pay for.

More of Paula Scher here.

Herb Lubalin

Typography can be as exciting as illustration and photography. Sometimes you sacrifice legibility to increase impact.

Herb’s work.

Wolfgang Weingart

What’s the use of being legible, when nothing inspires you to take notice of it?

Learn more about Wolfgang Weingart.

Ivan Chermayeff

Sometimes there is simply no need to be clever or original.

More of Ivan’s work here.

Susan Kare

You can set out to make a painting, but you can’t set out to make a great painting,” she said. “If you look at that blank canvas and say, ‘Now I’m going to create a masterpiece’—that’s just foolhardy. You just have to make the best painting you can, and if you’re lucky, people will get the message.

You’ll know her work.

Jan Tischold

White space is to be regarded as an active element, not a passive background.

He influenced you whether you knew it or not.

Emil Ruder

They work now with computers for building buildings and books, but not ever with new ideas.

Learn more about Emil Ruder.

Philippe Starck

We have to replace beauty, which is a cultural concept with goodness, which is a humanist concept.

A truly forward thinking designer.

Josef Müller-Brockmann

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

Swiss design at its best.

Michael Bierut

Not everything is design. But design is about everything. So do yourself a favor: be ready for anything.

Learn about Michael Bierut.

Tibor Kalman

I am interested in imperfections, quirkiness, insanity, unpredictability. That’s what we really pay attention to anyway. We don’t talk about planes flying; we talk about them crashing.

A unique graphic designer.

The 10 Best Mechanical Keyboards for Professionals

Is a mechanical keyboard essential to your workflow? Probably not. You can get your typing tasks done with any old keyboard. But if you’re looking for a comfortable, precise, and satisfying typing experience, nothing beats a mechanical keyboard.

Why Use a Mechanical Keyboard?

If you have a job that demands a ton of time typing — web development, web design, IT, and journalism are some professions that fit the bill — investing in a high-quality keyboard can lead to a more productive and enjoyable work experience.

I’ve used many keyboards in the past: Generic $9.99 replacement keyboards, stock keyboards that come free with a new desktop PC, high-end gaming keyboards, laptop keyboards, ultra-portable wireless keyboards, you name it. A mechanical keyboard has been my preference for the past three years. Here are some reasons why:

  • Delight: Mechanical keyboards provide you with a fantastic typing experience. Each keystroke feels gratifying and authoritative, unlike on a common dome-switch keyboard, which feels mushy. I sit in front of the computer 10 to 12 hours a day, so putting money into my hardware goes a long way towards improved comfort and productivity.
  • Speed and precision: Accentuating a key in a mechanical keyboard results in some form of tactile feedback, telling you that you’ve pressed the key successfully. Also, unlike dome-switch keyboards, you don’t need to press a key all the way down (called "bottoming out") in order for your keystroke to register. This results in increased typing speed and fewer typos, especially when you’re touch-typing.
  • Build quality: Good mechanical keyboards are sturdy and durable, being able to bear the brunt of your keystrokes for years without any degradation to your typing experience. With dome-switch keyboards, which rely on a soft rubber or silicone membrane, the typing experience may gradually change the older the keyboard gets.Under the hood of a dome-switch keyboard. Source of photo: wikipedia.org

Once you start using a mechanical keyboard, it will be hard to switch back to an ordinary keyboard. I use a laptop as my main work machine, but I have a mechanical keyboard hooked up to it 99% of the time. Also, after three years of hard use, my go-to mechanical keyboard still looks and feels exactly the same as the day I got it.

Lifehacker has a good intro to mechanical keyboards that you should read if you’re new to the keyboard technology.

Drawbacks of Using a Mechanical Keyboard

Mechanical keyboards aren’t perfect. Here are some reasons that might make you think twice about using one:

  • Cost: A good mechanical keyboard will set you back $80 to $300, making them a great deal more expensive than your run-of-the-mill keyboards. A lot of my recommendations in this article are in the $100 to $160 range, and three of them are over $200.
  • Noise: You have to be careful about which type of mechanical keyboard switch you go with if you’re concerned about noise. Mechanical keyboards are notorious for making a racket. The noise level will be a key factor for you if you work in an open office space. Watch this video on the Techquickie YouTube channel titled Mechanical Keyboard Switches as Fast As Possible to help you make an informed choice. For a more detailed guide, see the Keyboard Switch guides on Reddit.
  • Bulk: Mechanical keyboards are hefty. They’re generally bigger and heavier compared to normal keyboards.
  • Wires: Most of the good mechanical keyboards in the market are wired. Only one mechanical keyboard on this list is wireless.
  • Not designed for portability: Because of the size, weight, and wires of a typical mechanical keyboard, they’re not easy to lug around. You won’t be able to chuck them into your laptop bag as easily as portable wireless keyboards. If you’re always on the go, often working in coffee shops with tiny tables, a mechanical keyboard may not be the best option for you.

The Best Mechanical Keyboards for Web Professionals

The technology in mechanical keyboards is old. It resurged in popularity because of computer gaming. Mechanical keyboards offer gamers better keystroke precision and speed, and the durability required to withstand the wear-and-tear that comes with marathon gaming sessions.

But modern mechanical keyboards aren’t just for gamers. They’re also great tools for coders, IT professionals, designers, writers, journalists, and others who do copious amounts of computer work.

After a ton of research — hitting up review sites and tech publications, mechanical keyboard forums, articles, and so forth — I managed to find ten mechanical keyboards that are highly regarded by the Internet community. Originally, I did this research for myself because I’ve been desiring to add another mechanical keyboard to my collection. I figured I might as well share my findings, in the hopes that doing so might help someone out.

Aesthetically, my picks are fitting in professional environments, so don’t expect any multi-colored/rainbow backlighting, LED displays, and special keys for your macros. My mechanical keyboard recommendations are elegantly simple, reflecting my personal preference for simple, functional aesthetics and my needs as a Web professional.

Note: Some of the links below use our Amazon Associate links. This means we’ll get a small commission if you buy a product through those links. Also, the prices stated below are based off the current prices around the time this article was published. Actual prices may be different from what’s stated in this article.

Without further ado, here are what I consider to be the best mechanical keyboards for professionals:

1. Das Keyboard

Das KeyboardSource of photo: daskeyboard.com

The Das Keyboard is probably the most recognizable mechanical keyboard on the market.

Years ago, they received a lot of press from tech publications such as Tom’s Hardware (with an article titled Possibly One of the Best Keyboards Ever), TechCrunch, and CNET partly because of the novelty of the Das Keyboard Ultimate models, which don’t have any labeling on their keycaps:

Das keyboard ultimateSource of photo: daskeyboard.com

The mechanical keyboards are designed by Metadot Corporation, a Texas-based open source software company. The creators of the keyboard claim that the gold-plated mechanical switches in the Das Keyboard can handle up to 50 million keystrokes!

Das Keyboard 4C Professional

$116 on Amazon

2. CODE Mechanical Keyboard

CODE Mechanical KeyboardSource of photo: wasdkeyboards.com

The CODE keyboard is a series of mechanical keyboards designed with programmers and developers in mind. It sports a clean, minimalist design. The pleasant (and adjustable) white LED backlighting is great for those of us who often find ourselves in dark, low-light work environments (such as server rooms). In addition, the keyboard can switch between three keyboard arrangements: QWERTY (the most common), Dvorak, or Colemak.

The CODE keyboard was designed by WASD Keyboards (producers of customizable mechanical keyboards) and Jeff Atwood. You might know Jeff Atwood as the founder of Stack Overflow, the Stack Exchange network, and as the author of the programming blog, Coding Horror. Read his blog post about the CODE keyboard to get an insider’s perspective on the keyboard’s inception.

(Side note: This is the next mechanical keyboard I’ll be buying!)

CODE Mechanical Keyboard (Cherry MX Clear)

$150 on Amazon

3. KUL ES-87 Tenkeyless Mechanical Keyboard

KUL ES-87 Tenkeyless Mechanical KeyboardSource of photo: keyeduplabs.com

Keyed Up Labs (KUL) is a top-notch company that creates a range of well-regarded mechanical keyboards.

KUL specializes in tenkeyless keyboards, which don’t have the number pad that’s often located on the right side of full-size keyboards.

Many of us never use the number pad. Except for accountants, cashiers, statisticians, and those who frequently key-in numbers into their machine, most people can live without the number pad.

The advantage of removing the redundant keys found in the number pad is that it will create more room on your desk and it will reduce the distance your right hand needs to travel when reaching for your mouse.

KUL ES-87 Mechanical Keyboard (Cherry MX Green)

$149 on Amazon

4. Rapoo KX Wireless Mechanical Keyboard

Rapoo KX Wireless Mechanical KeyboardSource of photo: rapoo.com

Mechanical keyboards are typically wired devices. Not the Rapoo KX though.

Besides the obvious benefit of being able to eliminate wire clutter, the Rapoo KX is also one of the least expensive mechanical keyboards I’ve come across, at $85. It’s also smaller than most mechanical keyboards, which makes the Rapoo KX potentially portable.

For a more detailed look at the Rapoo KX, watch the video review named Wireless + Mechanical – Is This Real Life? on the YouTube channel Unbox Therapy (which has over 2.6 million subscribers). Also see the list of wireless mechanical keyboards on Reddit for more sans-wire alternatives.

Mactrem Rapoo KX (Black)

$85 on Amazon

5. Ducky Legend

Ducky LegendSource of photo: duckychannel.com.tw

Taiwan-based company DuckyChannel has a collection of mechanical keyboards for gaming and work.

The Ducky Legend is the model I feel best suits work environments. This keyboard has a stylish aluminum case and adjustable backlighting.

Ducky Legend (Silver)

$141 on Amazon

6. Happy Hacking Keyboard (HHKB)

Happy Hacking Keyboard (HHKB)Source of photo: pfusystems.com

The Happy Hacking Keyboard is geared towards professionals and heavy computer users. It was first introduced in 1996 by Japanese IT company, PFU Limited. Since then, the keyboard has managed to gain a loyal fan base.

In the quest to make a small-form-factor keyboard, the designers of the HHKB removed the arrow keys, function keys, and several other keys such as Caps Lock, Backspace, and Insert. Instead, these keys are coupled together with other frequently used keys. For example, the Backspace key shares the same key as the Delete key, and Caps Lock is combined with the Tab key. You can use the "missing" keys by pressing the Fn key along with the key that it shares.

The Happy Hacking Keyboard’s design results in an ultra compact 60-key keyboard, often referred to as a 60% keyboard (because a full-sized keyboard has 104 keys).

This mechanical keyboard has a cult following, as well as its fair share of critics. The biggest disadvantage is that if you use arrow keys, print screen, insert, etc. frequently, then this would not be an efficient keyboard for you.

In my case, as a web developer and writer, I have become accustomed to keyboard shortcuts that rely on several keys that the HHKB decided to drop, such as the Up/Down Arrow keys for jumping to lines of code, Ctrl+Left Arrow/ Right Arrow to move to the previous/next word in a sentence, Ctrl+Page Up/Page Down to scroll web pages, and so forth.

But if desk space and minimalism are things that matter most to you, then this mechanical keyboard is definitely something to check out. As for me, a tenkeyless keyboard is the perfect balance between minimalism, size, and functionality.

Happy Hacking Keyboard Professional 2

$229 on Amazon

7. Filco Majestouch 2

Filco Majestouch 2Source of photo: diatec.co.jp

The mechanical keyboard community holds the Filco Majestouch 2, often referred to as the MJ2, in high regard. It has a rep for having a solidly sturdy build quality.

Filco products are by a Japanese company called Diatec Corp. The company has been around since 1982, and they specialize in PC peripherals and mobile devices.

Reddit’s mechanical keyboard buying guide wiki says that the MJ2 is "The big boss of Cherry MX keyboards."

Filco Majestouch 2

$154 on Amazon

8. Vortex POK3R

Vortex POK3RSource of photo: vortexgear.tw

The Vortex POK3R mechanical keyboard, sometimes called the Poker3, is a range of compact and customizable mechanical keyboards. Besides its interesting appearance and small size, another notable feature is that the keyboard is programmable. (You can find more info about POK3R’s programmability via its user manual.)

The POK3R keyboard has an atypical design. When viewed on the side, you’ll notice that the keycaps and switches are mounted on top of the keyboard tray, a blackplate, rather than being embedded into it. This design contributes to the keyboard’s compact dimensions and distinct aesthetics.

Side view of the Vortex POK3R keyboardSide view of the Vortex POK3R keyboard. Source of photo: vortexgear.tw

Check out the in-depth POK3R keyboard video review at the Rhinofeed YouTube channel.

Vortex POK3R 3 (Cherry MX Clear)

$140 on Amazon

9. Topre REALFORCE 104U

Topre REALFORCE 104USource of photo: amazon.com

Cherry MX is the series of switches that you’ll often find in popular mechanical keyboards such as the Das Keyboard. But they’re not the only players on the block. Topre switches are another type of mechanical keyboard switch.

The Topre REALFORCE is the pricy, flagship mechanical keyboard by Japan-based Topre Corp, makers of electronic equipment. For an alternative that’s notably less expensive, the Topre Type Heaven, at $155, is also a well-regarded option.

Topre Realforce 104U (White)

$270 on Amazon

10. Kinesis Advantage

Kinesis AdvantageSource of photo: kinesis-ergo.com

The Kinesis Advantage is a long-standing, ergonomically-designed keyboard that vastly veers off from the keyboard designs we’re all used to. This keyboard is popular amongst software engineers, IT professionals, and web developers — people who spend a ton of time typing on their keyboards, and using keyboard shortcuts and command-line interfaces.

Kinesis Advantage Contoured Advantage Pro in front of a three-monitor workstation.Source of photo: wikipedia.org

The ergonomics of the Kinesis Advantage can help lower the impact of the repetitive strain your hands endure when you’re typing for long hours. Its keys are separated and angled to complement your hands’ natural positions.  The keyboard has concave key wells that minimize the distance your fingers need to travel to reach a key.

Jarred Walton, over at the hardware review site AnandTech, wrote that out of three ergonomic mechanical keyboards he reviewed, the Kinesis Advantage is his favorite.

The Kinesis Advantage may not be everybody’s cup of tea. The keyboard’s layout will take time to get used to. And once you get accustomed to it, it will be hard to use traditional keyboard layouts. On the other hand, a top Amazon reviewer that goes by the handle of Ed said that it only took two weeks to get used to the keyboard and that if you’re patient "it will not only pay off with better ergonomics, but speed."

The $270 price is quite steep. But if you’re suffering from wrist- and hand-related injuries like carpal tunnel syndrome, or if you want to prevent them from happening, the Kinesis Advantage keyboard might be deserving of your hard-earned dineros.

Kinesis Advantage (Black)

$270 on Amazon

Further Reading

Mechanical keyboards are expensive. They’re meant to be used for years. Choosing which one to buy is a decision that shouldn’t be taken lightly. Here are some resources that will help you learn more about the technology:

  • The MechanicalKeyboards subreddit is a large community of keyboard enthusiasts with over 86,000 subscribers. Check out their wiki, which will inform you of everything you need to know about mechanical keyboards. This subreddit was instrumental in helping me discover the mechanical keyboards on this list.
  • Tested, a site by the stars of the TV show MythBusters, Jamie Hyneman and Adam Savage, has an explainer on why you should use a mechanical keyboard.
  • Das Keyboard has a slightly technical mechanical keyboard guide that gives you a great overview of the technology.
  • Overclock.net has a detailed guide covering mechanical keyboard terminologies, popular types of switches, keyboard maintenance, keycap shapes/materials/printing methods, and more.
  • Read Ty’s comment below for more insights and tips.

Read Next

5 Good Habits That Will Make You a Better Coder

12 Excellent Free Text Editors for Coders

A New Breed of Free Source Code Editors

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

5 More True Things Every Creative Already Knows (or Should Know) Vol. 2

1. Your Network is Essential

The truth is, successful creatives are successful not only because they do good work, but also because they have people in their lives who know they do good work.

Imagine two creatives. Artist number 1 is a superstar graphic designer who has worked for clients like Nike, Vogue, [insert dream client here]. The other is a struggling freelancer worried about where their next project is coming from. What’s the difference between them?

Luck? Geography? Talent? Socio-economic standing? Maybe all of these things?

In reality, luck or geography or varying levels of talent can all be compensated by the people you know and surround yourself with. The truth is, it doesn’t matter if you’re the best at what you do if no one else wants to support you or cares if you succeed or not.

This isn’t some kind of ringing endorsement to be a schmooze-y brown-noser to everyone you meet (those people are the worst). It has, however, more to do with valuing the connections you make with others and nourishing those relationships so that you have good people in your corner. Do good work for a client and they’ll be more than happy to recommend you to their friends. Share your passion and enthusiasm with others and they’ll want to help you succeed because who doesn’t want to be part of a success story? You must welcome others to care about your work because that’s the only way your work will be relevant to others.

No one gets “there” alone. Not ever.

2. Perfection is a Lie

Perfect work does not exist. There will always be something you’ll see in your work that will make you want to throw it out and start over.

We are our own harshest critics. If you’re a self-respecting creative (I’m assuming you are), you’ll always be overly critical of your work because you’ll always want to be a better version of yourself. The truth is, that’s enough because wanting to do better work is the same as actually doing better work. Be happy with that. Stop chasing perfection because that will get you nothing besides another missed deadline.

3. Trends Aren’t as Important as They Seem

Following trends is a dangerous proposition. Chances are, by the time you get the hang of an emerging trend, it is probably on its way out. Or at the very least, slightly irrelevant to the next incoming trend.

The truth is, trends are merely indicators of our shifting sensibilities. Trends are just reminders that things are always moving and changing. They aren’t destinations, they are merely directions or headings. Trends let us know which way the industry is moving so that we can adapt accordingly and keep moving forward with our work. Being good at the newest hot trend right now doesn’t mean you’ll have an advantage tomorrow. It just means you’ve been paying attention. Paying attention is all you really need to get by. Pay attention well enough, do good work, and you’ll get ahead of the curve.

4. Getting Paid is Important

As much as we would all like to make excuses for those times when we accepted work that paid us in”experience” or the opportunity to beef up our portfolios, the truth is we all need to get paid for the real work we do. Creative work is one of those professions in which “free work” is readily discussed and accepted for one reason or another. For instance, a friend will ask you to design a logo for free in exchange for a “mention” in some obscure section of their website. A client will promise to pay you in “future work” because they don’t have the budget right now. No other profession works like this.

No matter what anyone says, the truth is that the real work we do as creatives has value. That needs to be acknowledged and honored accordingly. Always.

5. Distractions are Real

The nature of creative work is such that you have to actually create things. This requires clarity of thought and a certain concreteness in your ideas. Distractions, by their very nature, keep you from those things.

Be honest about what distracts you and clear your surroundings of these distractions. You might think you work better with loud music playing in the background but what if the noise is just distracting you from your best ideas? You might think working in a busy cafe is productive, but what if it’s just mimicking productivity? Maybe you even pride yourself in being able to focus in the harshest situations but imagine how focused you can actually be if you weren’t so distracted all the time.

The truth is, distractions can take many forms and they’re not always obvious. The sooner you acknowledge what helps you and what doesn’t, the sooner you’ll be able to get your work done — and done well.

Tell us more about the true things in your life in the comments below.