Programming Driven Design

The UI design of a new web application is usually driven by ux, product, art and other related considerations. Programming comes into play after the design is finished. If programming considerations are taken at the UI design time, it will be limited just to verifying if a new feature is technically possible. The following example will try to demonstrate why in some applications, programming considerations should also drive the design.

a responsive application example

A design team release a responsive design for a dev team. It contains the following heading sizes:

Phones Tablets Desktops
h1 42px 49px 70px
h2 18px 22px 30px
h3 15px 17.5px 25px

These styles translate to the following css rules (codepen1):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* Phones */
@media only screen and (min-width : 320px){
    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 15px;
    }
}

/* Tablets */
@media only screen and (min-width : 768px){
    h1 {
        font-size: 49px;
    }

    h2 {
        font-size: 22px;
    }

   h3 {
        font-size: 17.5px;
    }
}

/* Desktops */
@media only screen and (min-width : 992px){
    h1 {
        font-size: 70px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 25px;
    } 
}

what if h2 Tablet size would have dropped down 1 pixel to 21px:

Phones Tablets Desktops
h1 42px 49px 70px
h2 18px 21px 30px
h3 15px 17.5px 25px

Since now the headings relate with the same ratios between devices, the previous css rules can now be written with simple REM units (codepen2):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* Phones */
@media only screen and (min-width : 320px){
    html {
        font-size: 6px;
    }
}

/* Tablets */
@media only screen and (min-width : 768px){
    html {
        font-size: 7px;
    }
}

/* Desktops */
@media only screen and (min-width : 992px){
    html {
        font-size: 10px;
    }
}

h1 {
    font-size: 7rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2.5rem;
}

Notice that in this setup, each heading size style needs just 1 rule, in contrast to 3 rules living in different media queries. The REM version reduced the lines of code count by 27%, but this can go up to 67% as the design gets bigger, and as also REMs can be utilized everywhere (padding,margin,line-height,etc'). This change is not only about reducing lines of code, it's about clarity, ease of maintenance & development time.

Analysis

Was it a conscious decision to have h2 in a slightly different ratio between devices? or a result of "eye-balling" the sizes on different .psd files?

In either case, a developer commenting on a finished design with this issue will have a hard time selling there's an issue at all. The designer will not be keen to revise his art just so it would satisfy some "math rules". In some way, the designer is right. However, the essence of a responsive design is broader than the design scope- one of the reasons for choosing responsive design over adaptive design is to have 1 code base. Having 1 code base where the UI is split in 3 different CSS chunks, each at their own media query, misses the original intention.

Conclusion

The sequential work flow of "design first, develop later", has some drawbacks when building some web applications as illustrated in the example above. Developers should have a way to drive design decisions that would otherwise be looked over. This suggestion is less significant if the design team also codes, or if they design in the browser.