DEV Community: Aptex - we create software

Top 8 Website Mistakes

Aptex - we create software — Thu, 16 Dec 2021 19:41:18 +0000

When creating a website you should definitely avoid these 8 common mistakes - it's easier than you think!

1. Your website is not responsive

We're almost in the year 2022 and still there are plenty of websites out there that aren't mobile friendly - or responsive.
This isn't only a big issue when it comes to your users, because the majority of people browse the web on their phones, but it also affects your websites SEO, as Google started ranking Websites that aren't optimised for mobile devices lower years ago.

2. Your website has bad usability

The most beautifully designed website with highly optimised SEO content is worthless if it isn't usable. It's not that difficult to provide a decent user experience with following a few simple best practices. For example it is important for mobile users to put the navigation in an easily reachable place. Therefore you could simply use a bottom bar navigation (see image below) instead of a hamburger menu. Or at least put the hamburger menu button on the top right, because the majority of people uses their phone with the right hand.

We're using a bottom bar in our free portfolio template for developers.

3. You don't use image descriptions

An often neglected aspect of web development besides usability is accessibility. A small step in the right direction to more accessibility is providing clear and expressive image descriptions. It's not enough to just put the text below the image, but provide a functional description in the image's alt-attribute.

An alt description for the above image could looks something like this:

<img src="./dog.jpg" alt="A light brown dog running happily through water - probably the sea or a lake - with its tongue out" />

Besides the positive effects on accessibility this also has an impact on your SEO.

4. You don't provide a clear call to action

A call to action is essentially the one thing you want your user to do. It could be numerous things, like asking the user to make a phone call, sending an email, submitting a contact form or ordering something. It's one of the most important things for lead generation and sales on the internet.

When designing a "Call To Action" you make use of the user's habits like reading from left to right (or right to left, in languages where that's the standard) or purposefully directing the user to the buttons they should click by making use of various design elements.

It's crucial, that the user can reach the desired goal with as little friction as possible.

5. You are missing out on analytics

As the legendary engineer W. Edwards Deming put it

Without data, you're just another person with an opinion.

Who are my users, where do they come from, which devices and browsers do they use and how many of them are actually converting? Getting all of these information about your website visitors is actually pretty simple and extremely insightful.

There are plenty of solutions out there, that can help you to learn more about your users. Obviously there are big players like Google Analytics or Matomo, but there's also enough small indie competition, like for example plausible.io

With all the knowledge you gain through the analytics, you can then create better tailormade experiences for your users.

It's often very easy so find out why your conversion rate isn't as high as you want it to be.

6. Your copy sucks

On the one hand it's important to write copy that will cater to the search engines, so your site will actually be found. A good rule of thumb for headings is using questions, that a potential visitor of your site would ask themselves and then proceed to enter the exact phrase into google.

But on the other hand you also should not stuff your website copy with keywords and actually provide value to your users in a clear and concise way.
By following these simple tips you immediately have a positive impact on your website's SEO

7. Your page is slow

Speed is key - When your site is slow or doesn't respond quickly on user interactions, people tend to get frustrated easily and leave your site.
Get rid of unused JavaScript and CSS, minify your files, optimize images for size and leverage the power of a CDN.
Also your hosting environment plays an important role in pagespeed as well!

We'll soon publish an in-depth article about ways to optimize your pagespeed.

8. You are using outdated software

When using widely used software, such as WordPress, Typo3, Shopware, etc. there is a huge risk to become the victim of hackers. They make use of exploits and other commonly known security breaches. Thus it's important to keep the software you use up to date.
But it's not just done with the software itself. If you use a CMS you are probably using themes and plugins and they are a risk nonetheless.
If you built your site from scratch you should also keep an eye on the dependecies you have in your project.

Conclusion

These are some of the most common mistakes we encounter on a lot of websites and a few suggestions on how to fix them.

What I've learned from the first free product I've created

Aptex - we create software — Mon, 08 Nov 2021 08:30:39 +0000

Since the beginning of the year I've spent an excessive amount of time on tech twitter, slowly and steadily building an audience.

As a means to give back to the community and in order to build myself a portfolio of free products (which I also plan on expanding to paid products later on) I recently created a free portfolio template, mainly targeted to (beginner) developers.

From the beginning I knew, I wanted to create a portfolio template as my first product, because I come across of novice developers who are trying to build their portfolio. Often times (frontend) developers can be exceptional problem solvers and write decent code even as juniors, but struggle a lot with (UI) design.

Since this is something that I consider myself pretty well-versed in, I decided to offer this template to help them showcase their work in a way, that's not only pleasant to look at, but is also accessible at least to some degree.

I'm in no way an accessibility expert, but I try to apply the knowledge I have to all products I design.The least I can do is aiming for WCAG AA color contrast standards.

Ask audience first

So the first thing I did, was to ask people on twitter, what kind of content they'd expect to find in a developer's portfolio.

The takeaway was, that I portfolio should include:

Who you are
What you do
Examples of your work
How to get in contact

Also it should be simple to navigate and easily accessible from any device.

The first desgin

Based on the results of my tiny survey, I then started to create a mockup of the template in Figma. I've been using Figma for a while now, both for my personal projects, as well as at my day job and got quite comfortable with it's features.

Coming from Adobe XD it was super easy to transition to Figma, as both tools are pretty similar. One thing that makes me love Figma is the fact, that it can be fully used in the browser.

To get some insipiration for the colors, I used Actionable Color Palettes, decided for a color palette and tweaked the colors a tiny bit to meet the afforementioned a11y standards. For the contrast checking I usually resort to colorable.

After sketching out the first draft, I decided, that it would be cool, to give people the opportunity to easily customize the accent color used in the template and thus decided to look for some more colors, that fit the overall look and feel of the design.

As soon as I had something to show, I went back to twitter to showcase my work once more and get some feedback. The overall sentiment seemed to be very positive with minor suggestions in terms of content and increased whitespace in some places.

I applied the feedback and finished the mockup. Again, I then tweeted the final result, announcing that I would be launching it as a free HTML/CSS/JS template soon after. The reactions were super positive and a lot of people showed interest in the product.

Finally coding

So the next day I sat down and started implementing the portfolio in code. I coded everything from scratch in about 8 hours. The best thing? No dependencies! There's just an HTML, a CSS and a JS file and a few SVG graphics. I wanted something slim and easy to set up and customize. No heavy boilerplating, nothing. If you wanted, you could just open the HTML file in a text editor on your phone, replace the texts and you're ready to deploy.

I launched it like 15 minutes after writing the last line of code on a saturday evening. Which in retrospect might not have been the best decission. But, I just wanted to get something out there finally! For the next launch I will definitely pick a better time (there are actually less users active on the weekend) and maybe review the code once or twice and let some people take a look at it beforehand.

What happened next

In 24 hours I gathered 103 views and 19 downloads on gumroad.
Compared to the amount of people that priorly reached out to me and showed interest, it's not that much, but still I'm pretty satisfied with the results. Now almost a week later the product has 142 views and 28 downloads. Also one of them even decided to pay actual money for the FREE template, which is just mind blowing!

In order to reach all those views and conversions I did several things. First, I DM'ed all of the people on twitter, who previously showed interest in the product. On top of that I reached out to some of my friends on twitter, asking if they would help spreading the word about the free template.

So as you can see, I haven't done a lot of marketing for the product yet. The next steps will include writing better marketing copy, create marketing images and promote the template not only on twitter, but also on other platforms, such as facebook (especially developer groups on there) and reddit. Of cours, even this blog post is a way of marketing the template!

Next steps

After I'm done with all of the marketing experiments, I will then work on transforming the template into a version to use with next.js (maybe also gatsby!) and on top of that I will create a full-fletched WordPress Theme from it. These will probably be paid products, but very low-price ( < $5.00 ). Also, of course there will be more template from me in the future! I plan on creating a template for SaaS-Products next. Also I plan on building an enitre UI library with a lot of page templates, layouts and examples. So stay tuned for that!

Cheers
Nathan

You can find the free portfolio template for developers at aptex.gumroad.com!