Hi, I’m Jonas Johansson, a developer and designer. As a member of the Stockholm iGEM team, part of my responsibility is to work the wiki. This post is an extension of a session I held within our team and will go through the following:
- General information about the World Wide Web
- What a server is and which type to choose
- What a domain is and how to get one
- Various ways of building a site
- What wireframing is and how it can be used to design an experience
This post is not directly connected to the iGEM wiki but instead topics born from interest within the team. To learn about how you effectively work with the wiki read my first post.
With that said, let’s start at the beginning (get ready for acronyms)…
What is the web? 🕷️
The World Wide Web was invented in 1989 and began general usage in 1991. It relies on a system of web pages formatted in Hypertext Markup Language (HTML) which can be found via URLs (Uniform Resource Locators). World Wide Web is not to be confused with the Internet, even though they are often used without much distinction.
No one really says World Wide Web or www anymore, simply say Internet.
You will often see HTTP, or HyperText Transfer Protocol, in front of a URL. HTTP is a set of rules which is used under-the-hood of the browsing experience. On Medium, it’s not just HTTP but HTTPS with an additional s for Secure. Serious sites use HTTPS and you should never provide any sensitive information to one that doesn’t.
A URL does not use only a protocol but also a domain name, such as medium.com which points to an IP-address pointing to a server (where the content of this page exists). This system is part of the invention of Tim Berners-Lee mentioned earlier.
You may have heard of server farms which are massive collections of storage units. This is where all our information is stored, and they are running hot serving us constantly, which is why they are often built underground or otherwise chilled locations.
A side note, we are at the point where using bandwidth is highly damaging to the environment, please make sure to consider climate compensation policies when making your choice. We have yet to put a limit the amount of information we create and server farms will continue to grow and effectively heat up the environment, on locations where they have the potential to do most harm.
For personal websites, there’s a long list of server providers, most of which does not only provide the server space but also the domain name as well as email services. This makes them refer to themselves as Web Hotels which is what you should be searching for.
Here are a few that I have used in the past, in no specific order:
Does it matter which country the servers are in? Yes, the further away the server is the potentially slower it will be for the visitors. It’s unwise to use a server in Asia for a website viewed in Europe.
Remember HTTP? Welcome to FTP, or File Transfer Protocol. For a web developer starting out FTP is a straight-forward way of working, it’s essentially a remote folder which you can transfer your documents to. I recommend using Cyberduck for this process.
- FTP is slow and risky and if something happens during transfer the files may become corrupt
- FTP has no version history which means it is not possible to traverse the change history
FTP is still useful, especially when deploying larger CMS that relies on PHP and MySQL (web technologies that web hotels often provide and which Github Pages does not).
Not interested in a tiny folder on a server? Get your own! A VPS (Virtual Private Server) is a service which provides you with your own server space. This is useful when the web hotel does not support the technologies you wish to use, or you simply have a high need for customization. I will not go into details on how this works but mention that some of the web hotels mentioned before are providing this. I recommend trying out Digital Ocean!
Git and Github Pages
For quite some time now modern web development has become more and more molecular. Smaller changes, more files (a lot more files), and so Git emerged as a way for developers to track and share updates, whilst keeping the process safe and sturdy. The creators of Git later created Github Pages which allows its users to get a website up for free. I ❤️ this service and suggest you learn more by going to their website. Github Pages is a Static Site Generator and you can find many alternatives, I just happen to really enjoy this one.
Besides FTP, VPS and Github Pages there’s a platform which is actually the one I suggest you get started with. It’s called Glitch and provides you not only with a code editor but HTTPS and a custom domain name, let’s check it out!
Glitch is a community of code that gets you creating immediately in a fun environment. I use this often with students that are starting out learning web technologies as they only need a browser to get the essentials.
Sign in with the button at the top right, feel free to connect with your Github account if you have one.
Once logged you will see your profile home. I have already done some projects. To get started choose New Project and hello-webpage.
Glitch generates a domain name for you, in this case, it’s catnip-telescope and can be viewed at catnip-telescope.glitch.me. Neat huh? The site is already live. Try editing the index.html. If you don’t recall the bit of HTML from the first post try adding the following inside the body tag:
Don’t worry about refreshing the browser to see the changes, Glitch does that automatically.
Unsplash is a great source for quality imagery, make sure to check it out as it can greatly improve the reading experience to have complementary imagery.
I’ll leave you here to explore on your own.
Both Github Pages and Glitch can be connected to a domain that does not involve them, for instance, I have jonasjohansson.se which actually points to my Github Pages.
Domain names can be purchased by Domain Name Registrars, and some registrars have several domain names whilst some have few. I use Binero for my .se-domains but Godaddy for all others. I want to mention that there are many alternatives, such as Namecheap.
Does my domain name matter?
Yes! In the beginning, there were only a few top-level domains that could be used, such as .org (organization), .com (company) and .net (network). Most countries also had their domains such as .se (Sweden), .no (Norway) or .co.uk (United Kingdom). These have been around for quite some time and are useful as they can inform the visitor about the website. If you are able to get your name along with your country code or any other of the domains mentioned, take it (or someone else will)!
Using the right domain name may improve your sites search engine rating. To learn more about how to increase your visibility lookup Search Engine Optimisation (SEO).
Nowadays we have a lot of domains to choose from such as .cool, .ninja, .fashion and many (many…) more. This part of the domain is
By going to Godaddy’s domain name search you can try out domains. Here I tried igem.cool which is available — a great success! And a decent cost, at least for the first year. Domains are often paid annually, and it’s easy to cancel the subscription.
In the early days, scalpers would purchase domains and then sell them for a higher price. Many also bought domains similar to popular ones, as spelling mistakes would give them visitors — which could lead to ad revenue or hacking opportunities. Read this article and interview with a domain prospector if you’re curious to learn more!
If your domain is already taken you can research who purchased it when it expires. To do this open up Terminal on Mac or Command Prompt on Windows. Type “whois” followed by a space and the domain that you wish to research. On Windows type “whois -v”.
We’ve now covered some of the basics of a server and domain, time to look into how to get them to tango.
Domain + Server = 💃🏽🕺🏿
A straight-forward direction is the previously mentioned web hotel where a domain name and server space can be bought in a package. When that is not an option both Github Pages and Glitch provide the option to use custom domains.
Look mum no code!
Not keen on making things from scratch? Sometimes it’s nice to focus on content and less on the code. Which is why there are so many web page builders around that help you create! Some of the most popular are Cargo and Squarespace, which are focused on showcasing portfolios but could be used for many things. If you want to set up a shop check out Etsy, and if you simply want to share your art and design have a glance at Behance (owned by Adobe) and Dribbble. Just like Medium provides a no fuzz experience for writing articles, the above can do the same and more.
These services provide templates which are highly customizable at a monthly and annual fee. They also offer plenty of support and tutorials, on for instance connecting a custom domain.
One downside using templates is that at the end of the day it’s tricky to create a unique experience. You are using a template after all. It is possible but will likely require much more time than expected (in which case you could learn to build it yourself…)
Whether you have decided to start from scratch or use a web page builder you are likely to need some way of planning your site. I know you may want to get started building the final thing right away, but I’d suggest you take a step back and plan out what you want to accomplish.
Wireframes to the rescue
Outlining an experience is not only for a web page, but it can also be used for pretty much anything. It’s a method that leaves certain aspects of aesthetics out, whilst focusing on the information architecture. Whilst you can do this with pen and paper (and in many cases, you should) there are a few tools that I’d like to share with you, in various ranges.
Check out Sans Francisco for a publically curated list of greatness, try some out and make up your own mind.
There are so many great tools out there for designing, and I’ve tried a lot of them. One that I’ve really begun to like is Whimsical which, like most tools I enjoy, does a specific thing flawlessly. I use Whimsical to create wireframes and also flowcharts. I won't go into heavy detail but share how that could look.
Sign up and later sign in with the buttons at the top right.
Once in you should have some free boards you can use, mine are all out. 😢
Go ahead and create a New Wireframe.
In the example above I’ve dragged in two screens, one for desktop and one for a smartphone. I can easily share this page with others and make it collaborative. This is a great start for getting a rough understanding of the content you wish to present and how it can look on different devices. A great first step before looking at the color, typography, and decorative elements.
What You See Is What You Get
WYSIWYG was a thing. Basically, you designed and that which you created was live immediately for others to view and use. Pretty cool, but also somewhat hated because it taught design and code superficially, and in some ways miseducated users. Anyhow, enough my ranting, WYSIWYG is back and stronger than ever thanks to tools like Webflow and Figma.
Both of these tools allow you to design your digital experiences directly in the browser. Webflow doesn’t only let you design but also launch your work online, and it’s powerful! If you are curious about learning great tools for UI/UX design as well as moving from design to code in an innovative way I urge you to explore these two options.
Bonus 🎉 License and copyright 🏳️
Copyright is automatic and applies as soon as you, the creator, have manifested your work in some tangible form. The © symbol has no power, it can however still be useful in combination with name and year as to declare the copyright ownership.
You can use a license in order to allow others legal access to your work, such as if you have created an application that you wish others to share. Read more at Choose A License to get acquainted with the alternatives.
With that said, anything that is uploaded can be taken and re-used. Be careful with what you upload, if it’s an image and you don’t want it used by others a watermark can help. The Internet is open source if your work is online — it’s accessible to others.
- Use a service such as Cargo or Squarespace if you are not a developer.
- Use Glitch or Github Pages if you are curious about development and want to build from scratch.
- Register your own domain and connect it in order to stand out!
- Plan your site using wireframing tools, and use modern design tools that export directly to code if you have the time.
I hope this was useful and that it can serve as an easy to grasp starting point for continued learning. Find me at jonasjohansson.se and reach out with any questions.