Posts Tagged ‘web programming’

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.

A very simple stored procedure in MS SQL Server

Written by Peter Vejrum Terp on . Posted in Peters Blog

Lately I have been working with Stored Procedures, I must admit that it’s not a thing that I previously have had lot of experience in. I thought that it might be the case for other developers out there as well. First very and very short “A stored procedure is a subroutine available to applications that access a relational database system”. If you want to know more about the definition of a Stored Procedure then take a look at Wikipedias definition In this short post, I will try to show how to create a really simple stored procedure.

CREATE PROCEDURE sp_getUser(@userId int) AS
BEGIN
SELECT username, email, userid
FROM [user]
WHERE userid=@userId
END

This is our simple stored procedure, it retrieves user information (username,email,userid) from the table “user”, where the userid is set in the procedure head.

Let’s have a look on how to call the procedure

DECLARE @userId int;
SET @userId = 2;
EXECUTE sp_getUser @userId;

First declare a variable @userId as an int, next set the @userId=2 (we want to retrieve information for the user with id = 2. The next part calss the procedure, where sp_getUser is the procedure we just made, and @userId is the parameter we send to the procedure. The result will be a recordset with username, email and userid for the given user. I hope this very simple example can help getting started with STORED PROCEDURES in MS SQL Server.

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