Posts Tagged ‘web development’

4 mobile UX rules

Written by Peter Vejrum Terp on . Posted in Peters Blog

There are four rules you should remember when making Mobile Websites

  1. Mobile site is mobile
  2. Context is king
  3. Difference in media
  4. Mobile is not web

1. Mobile site is mobile
Never forget that a mobile site is mobile. A mobile website is used by users on the move. They can be on the train or bus at a cafe and 1000 other places. It’s important to remember that the user is on the move. Therefore it is important that you also make the page for that purpose. Typically you will not read long in-depth articles. It’s much more likely that they need to find a hotel, a restaurant or similar. It’s also likely that the mobile user has 5 minutes to check what it costs to get to Paris (he might surprise his wife, caused by working too many ours last month.)

2. Context is king
It’s very important that you focus on context. What does the user need right now in the given situation?

If you have 5 minutes. at the busstation, you might just have 5 min. to kill before the bus arrives, but on the other hand on the train then you might have 30 min. to kill.
It is therefore important to focus on what the user wants.

A desktop PC is usually used to read and search for more articles, send important emails and surfing in general. One can therefore say that the desktop PC typically used to solve more time-consuming tasks.

On most smartphones you can ‘track geolocation’, therefore there is already an important information which is unavailable on the desktop PC. This information can be used for many purposes and may be used if you think carefully. An example can be on a flight search preset nearest airport or on a hotel search engine prestart a search for nearest hotels.

In short, the mobile web evolve to be simpler than the desktop PCs and be more focused on solving a task here and now.

3. Difference in media
Mobile devices are obviously very different from notebook and desktop PCs. They often have a non-standard keyboard and a small screen. Furthermore, the mobile devices also vary in size and have different types of keyboard, resolution, etc. and most smartphones have both supine and upright screen size.

The difference between the mobile devices in between means that you have to think deep about what to present. Perhaps consider different designs for different variants and / or cut certain devices from being supported. And example could be – you do not want your mobile site to work on devices with a screen resolution of 320 pixels in width.

4. Mobile is not web
Design for a mobile site is markedly different to a website. So forget about plain website design and think about mobile. Mobile is a unique medium, therefore it must also be considered as a separate media.

  • Forget Flash – It doesn’t work on iPhone as an example.
  • Forget about 3 column design, there is not enough space.
  • Think about what the goal is with your mobile website, it is NOT the same medium as a Website.
  • Think about use of images (and video). Images can be heavy to download, and maybe they don’t have the same effect because the screen is very small.
  • Think about your navigation, navigation on a mobile is different than on a website. There is not much space and it should be intuitive to use.

Your mobile site is NOT a simple website but a media for themselves. Context of the mobile is different than on a website, it is important to remember that.

Why speed optimization matters

Written by Peter Vejrum Terp on . Posted in Peters Blog

An old saying says that “Time is money”, that is also the case on webpages. Walmart showed recently that this claim also fits on Web pages. The company had set out to test their website’s response time impact on their business. The result was surprising 0.1 seconds better response time resulted in up to 1% increase in turnover.If the response time is slower than 2 seconds, the conversion rate drops.

This test was made on a large Web page in the US, but it also fit other countries. Many pages doesn’t consider the page load speed as an large issue, example in Denmark where I live, it’s not something that many talk about. BUT! that doesn’t mean that it’s not an issue, that’s just the danes who hasn’t considered Speed as an issue yet. In US speed is big and large companies like Amazon and Google uses a lot of time on optimizing speed.

Why so much focus on speed?
Does it matter, can’t I just optimize my page for Google and create a good looking design. NO! Is the short answer, SEO and design is important, speed is equally important.

If you do the right thing from the beginning, many benefits will show up:

  • Your servers will need less capacity, and thereby save money for servers, and it will be cheaper to expand your server park.
  • The bandwidth your servers uses to connect to the world, will be less used, there by you probably will pay less for for the connection.
  • It will be easier to scale the servers for traffic peaks
  • When your page loads faster, people will be more likely to use your page instead of the slower competitor.
  • Google is actually looking on page speed when they rank the websites, therefore also a SEO benefit.
  • If your users uses a mobile device, you can’t be sure that they always has a good broadband connection, they will have a better user experience because the page loads a lot faster.

Why should i consider speed now?
If you example live in Denmark, the tendens is that many pages become slower. This is not the case in all countries, but it might be a case in your country. If this is the case then you might get some benefits by being a first mover. If your competitors website loads in 12sec, and your own homepage loads in 2 secs after optimising it, then I’m pretty sure that the customer will choose your website the next time. If your living in a country where speed is already known as a big issue, you really needs to start  fixing the website speed, otherwise the competitors will take your customers.

What to do about it?
What you need to do is make a plan, and set some goals for the website speed. Here is an example on things you should do:

  • Run a speed test on your own website and top 5 competitors website. This could be done with tools like  http://gtmetrix.com/
  • Set up a spreadsheet which contains information  for your website and competitors. This should contain “Time taken for loading website”, “Amount of requests”, “Page size in kilobytes”.
  • Take a look on the spread sheet, how good are your website compared to the competitors? If you have a bad page speed, take a look on the best competitors and look on the page size and the amount of requests. Do they do it better than you? If so, that might be a good place to start looking for optimization.
  • Set at goal on how fast the page should load, how many requests used, size of website.
  • Fix problems, like too many requests, too large images and so on.
  • After fixing those problems, you might also need to look at the database queries. There will probably be a lot to fix here, there usually is.
  • When database and the other stuff is fixed, then take a look at the server side coding. Is everything optimized.
  • Is there anything you can remove from the homepage, which doesn’t give you anything?
  • Last a very important thing is, you need to measure and track what you do. Make a stat which shows conversion, revenue and so on before fixing the issues, and make the same each time you make some improvements on the live environment.

I hope this post will inspire you to speed up your website.

Web fonts using @font-face

Written by Peter Vejrum Terp on . Posted in Peters Blog

When you develope homepages it’s you usually use websafe fonts like Verdana, Arial, Times New Roman and other fonts. That’s fint in most cases, but also a bit boring – you only have a very limited amount of fonts available.

It is of course possible to create images with text, but that’s a “NO GO!”, it’s bad for SEO it’s bad for speed and a lot of other stuff. Therefore normally not a good choice.

The good thing is, there is a solution for that, it’s called @font-face. Using the @font-face, you can get a lot of different fonts using css3 (and some kind of supported in css2). It’s pretty simple and you can actually use a lot of fonts for free (Google has a great library)

Enough talking, time for an example. Examples is often more usefull than 1000 words.

Example
<!DOCTYPE HTML>
<html lang=”da”>
<head>
<meta charset=”utf-8″/>
<link href=”http://fonts.googleapis.com/css?family=Nova+Script” rel=”stylesheet” type=”text/css”/>
<style type=”text/css”>
h1 {font-family: ‘Nova Script’, cursive;}
</style>
<title>@font-face TEST</title>
</head>
<body><h1>Test @font-face with Google Font</h1></body>
<
/html>

Copy the content in italic above and save it as a html file. You will see the magic happen 🙂

Notice
You have to inssure that you are allowed to use the font. A lot of fonts cost money, and it can be hard to find the pricing for use on web.

Great links
Web fonts with @font-face
@font-face generator
Google Web Fonts

Posts from my blog