Avatar of Sascha Jullmann

Sascha Jullmann

Maker of gatsbythemes.com. Interested in all things web. Focuses on making fast and esthetically pleasing websites with a mobile first approach.

3 min to read · September 24, 2017

Design Philosophy of GatsbyThemes

It goes without saying that nowadays mobile is THE platform which people use to access the internet. We live in a time where mobile web usage exceeds desktop web usage (check out this article on Techcrunch).

Hence every GatsbyThemes.com website follows a mobile-first development approach. I should note that I decided on this approach in order to adjust every GatsbyThemes.com theme to the way that the most people use the internet. While this approach may be the best when you don't know your customers yet, it's obviously not a good way to design, if you know that your target audience uses only desktops to consume your website/webapp. Keep that in mind.

Every subppage of a GatsbyThemes.com website is created first as a mobile version and adjusted gradually to work on higher breakpoints as well. Technically speaking this means that the css without media-queries is the css for the mobile version and media-queries are then used to adjust to larger screen sizes (@media (min-size: xxxpx)). The benefit using this approach is in my opinion less cognitive overload. I don't have to figure out how to make things that only work on desktop look good on mobile. Instead most things that work on mobile will also work on desktop and most of the time it just has to be tweaked here and there. This leads to much faster development time and less clunky code. Which in turn means that it's easier for you to use and edit my themes.

Technologies used

I'm a big fan of css-in-js and therefore every GatsbyThemes.com website will be built using it. I'm particularly fond of emotion, so this is my framework of choice as of now, though this might change in the future. I don't want to dive too deep into the pros and cons of this approach, because many people way smarter than me have already done so, but to me it's quite simple: I like this way of programming websites, because it couples my styles with the specific (React) component i'm creating and I don't have to think about where in the stylesheet the code for component X lives. I also don't have to think about class names, which leads to less naming fatigue sparing me creativity needed to make the site look good. I can keep my focus on actually designing a feature/component without thinking too much about technological difficulties.

General Philosophy

I'm a big believer in simple websites. This ranges from a simple design (colors rich in contrast, not too much info on the page) to - and this is even more important - a simple structure. Lots of pages nowadays are (in my opinion) trying to put too much information on a single page. This can lead to slow load times and more frustratingly to "bounces" (rendering of elements after the initial render) on the website. I can't tell you how often it happens to me that I load a website (on mobile) and want to click a link and just in that moment another element renders, pushes the content down and I miss the click. This is a no go in my opinion, hence I keep every GatsbyTheme as simple as possible. On top of that I'm pursuing an esthetically pleasing look for every GatsbyTheme created.

Of course I try my best to stay up-to-date to the latest trends, carefully evaluating them and if a trend seems beneficial, adopt it in my own process. Web development is subject to so many changes, which is generally a good thing, but it can be overwhelming for many developers. So let me worry about what technology to use and which best practices to apply and you can just use the my Themes and be done with it :).