Dissertation

The relevance of grids in contemporary design for the page without an edge

Contents Image list 5 Introduction 6 Chapter 1: Origins and evolution of the grid 9 The grid before graphic design

9

Rule of thirds

11

Formation of the modern grid

11

Karl Gerstner and the flexible grid

13

Chapter 2: Origins and evolution of the web

14

The web developer versus the web designer

14

Evolution of website design

14

Early websites 14 Table based designs

16

Design over structure

17

CSS based design 19 Website design today 20

Chapter 3: Catering for the page without an edge – the infinite canvas

21

960 pixel grid

22

Chapter 4: Further adaptations 23 Chapter 5: Responsive design 24 Grid use in responsive design

24

Fluid grids 24 Comparing the responsive fluid grid and Gerstner’s grid 26

Chapter 6: The problem with the solution

28

An opposing view on responsive grid layouts

28

Preventing innovation 28 Threshold dynamics

28

Conclusion 29 Bibliography 30

5

Image list Fig. 1 Zurich Tonhalle poster, 1955. [image online] Available at: <http://99designs.com/ designer-blog/2013/03/26/history-of-the-grid-part-2/> [Accessed: 15 November 2014].

Fig. 2 “18th Didacta/Eurodidac” Worldformat poster, n.d. [image online] Available at: <http://www.aiga.org/medalist-wolfgang-weingart/> [Accessed: 20 December 2014].

Fig. 3 Masolino’s ‘St. Peter Healing a Cripple and the Raising of Tabitha, 1425. [image online], Available at: <http://www.webexhibits.org/sciartperspective/ raphaelperspective1.html> [Accessed: 3 December 2014].

Fig. 4 A description of the golden rule, 2009. [image online], Available at: <http://99designs. com/designer-blog/2013/03/21/history-of-the-grid-part-1/> [Accessed: 15 November 2014].

Fig. 5 An example of Villard’s diagram, 2010. [image online], Available at: <http://99designs. com/designer-blog/2013/03/21/history-of-the-grid-part-1/> [Accessed: 15 November 2014].

Fig. 6 The rule of thirds, n.d. [image online] Available at: <http://99designs.com/designerblog/2013/03/21/history-of-the-grid-part-1/> [Accessed: 15 November 2014].

Fig. 7 A De Stijl publication , 1926. [image online] Available at: <http://99designs.com/ designer-blog/2013/03/26/history-of-the-grid-part-2/> [Accessed: 15 November 2014].

Fig. 8 Poster by Richard Lohse, n.d. [image online], Available at: <http://99designs.com/ designer-blog/2013/03/26/history-of-the-grid-part-2/> [Accessed: 15 November 2014].

Fig. 9 The Periodical Capital, 1962. [image online] Available at: <http://thinkingform.

com/2011/11/28/thinking-capital-magazine-no1-designed-by-karl-gerstner/> [Accessed: 3 December 2014].

Fig. 10 Karl Gerstner’s grid for Capital Magazine, 1962. [image online] Available at: <http:// thinkingform.com/2011/11/28/thinking-capital-magazine-no1-designed-by-karl-gerstner/> [Accessed: 3 December 2014].

Fig. 11 The First web page, 1992. [image online] Available at: <http://sixrevisions.com/ web_design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 12 Yahoo website, 1996, [image online] Available at: <http://sixrevisions.com/web_ design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 13 AltaVista website, 1996. [image online] Available at: <http://sixrevisions.com/web_ design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 14 HTML table, n.d. [image online] Available at: <http://www.w3schools.com/html/ html_tables.asp> [Accessed: 22 November 2014].

Fig. 15 Spacer GIFs, n.d. [image online] Available at: <http://sixrevisions.com/web_design/ the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 16 W3C website, 1998. [image online] Available at: <http://sixrevisions.com/web_ design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 17 Yahoo website, 2002. [image online] Available at: <http://sixrevisions.com/web_ design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 18 AltaVista website, 2000, [image online] Available at: <http://sixrevisions.com/web_ design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 19 W3C

website, 2003. [image online] Available at: <http://sixrevisions.com/web_ design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 20 W3C website, 2009, [image online] Available at: <http://sixrevisions.com/web_ design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Fig. 21

Pixelot.de website, n.d. [image online] Available at: <http://99designs.com/ designer-blog/2013/03/26/history-of-the-grid-part-2/> [Accessed: 15 November 2014].

Fig. 22 42Angels.com website, 2012. [image online] Available at: <http://99designs.com/ designer-blog/2013/03/26/history-of-the-grid-part-2/> [Accessed: 15 November 2014].

Fig. 23 Woothemes website, n.d. [image online] Available at: <http://sourcecookbook.com/ en/recipes/66/introduction-to-960-grid-system> [Accessed: 28 December 2014].

Fig. 24 Dusty cartridge website, n.d. [image online] Available at: <http://

www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/> [Accessed: 28 December 2014].

Fig. 25 MarleyEternit website, 2014. [image online] Available at: <http://www.igentics.com/ web-design> [Accessed: 29 December 2014].

Fig. 26 Hillsborough Independent Panel Website, 2012, [online] Available at: <http://

eyelearn.org/ma-stu-gallery/gridEssay-2013/annalise/> [Accessed: 7 December 2014].

6

Introduction There has been a rapid evolution within visual communication in the 21st Century. This has given rise to a different approach in the use of the grid, in both digital and print media. Taking into consideration, the combination of these factors, what is the future of the grid? As questioned by Roberts and Thrift (2005, p.145) ”Are designers getting bored with the grid as more high profiled projects such as Frank Gehry’s Guggenheim Museum indicates a move towards more expressive free-form design?”

This essay will investigate the relevance of the grid in contemporary web design and what the future holds for it. This will be done through exploring whether basic principles from the printed page are still usefully applied in the context of “a page without an edge” for screen-based media or if there is a need to re-think the established orthodoxies of the subject. By looking at the origins of both the grid and the progression of design for the screen, this essay will also investigate the problems associated with laying out information on the screen and the solutions designers have come up with to remedy this.

To most designers, the grid is what a foundation is to a building. Grids provide a platform for visual consistency. The use of the grid unifies the practical with the aesthetic, helps to arrange objects and bring order to a page, while allowing information to be accessible. This view is supported by the work of Roberts and Thrift (2005) who also suggest that; “The term “the grid” came into common use just after the Second World War. At that time, many designers saw their role in socio-political terms and wanted to be instrumental in building a new and better world.” (2005, p.19) Modernist principals were rooted in simplicity and clarity in all areas of design. Designers such as Jan Tschichold and Wim Crouwel enthusiastically employed these principles and the use of asymmetry, sans-serif typefaces and believed that the positioning of elements on the page was an effective method of guiding the reader. This resulted in the use of the grid. This view is supported by Roberts and Thrift (2005). In a collection of essays called “Graphic Design Theory, Readings from the field,” Armstrong (2009, p.62) states that “Josef Muller Brockmann divided and ordered Graphic design into the grid of Swiss Typography. He took elements that were subjective, irrational and chaotic and brought them under the tight, measured control. The grid was key to his pursuit. He popularized the grid while spreading the principles of Swiss Typography internationally through graphic design lectures and publications. His intense quest was to achieve a universal system of communication calls to contemporary designers seeking ideal global forms to the world of new media.”

7

Fig. 1 Zurich Tonhalle poster by Swiss designer, Josef Müller-Brockmann, 1955. It conforms to a strict grid (cited on 99 design, 2014)

Despite what seemed to be unanimous support for modernist and Swiss Typography principles, there were those that had contrary view and a different approach. For example, Wolfgang Weingart believed Swiss Typography principles were the beginning of dullness and lack of progression in design.

According to Armstrong (2009, p.77) “Combining extreme letter spacing, slant weight, size, and repetition with a fierce practical knowledge of printing, Weingart dismantled the rational methodology of his elders. Out of this radicalism, emerged a design movement appropriate to the changing postmodern times. New Wave was born.” Research by Roberts and Thrift (2005) supports the view that David Carson approached graphic design from the angle of implementing only that, which felt natural to him, completely disregarding the use of the grid in his work. During the early stages of new media design, Jessica Helfand started exploring interactive design in the 1990s through website design, online identities and her new media column ‘Screen’. In an essay she wrote in 2001, called “Dematerialization of screen space” (Armstrong, 2009, pp. 199-120), she describes the computer as, “Our connection to the world. It is an information source, an entertainment device, a communication portal, and a production tool. We design on it and for it, and are its most loyal subjects, its most agreeable audience. But we are also its prisoners: trapped in a medium in which visual expression must filter through a protocol of uncompromising programming scripts. “Design” must submit to a series of commands and regulations as rigorous as those that once defined Swiss Typography.”

Karl Gerstner, a post-war Swiss Modernist and an exponent of the use of the grid, took an approach from a different angle, proposing that it was first, better to consider establishing a good balance between “the maximum of conformity” and “the maximum of freedom”. He urged designers to aim for integral typography, which was an appropriate relationship between content and form and could only be reached by closely looking at text, images, hierarchy and a systematic approach to layout. This view is supported by Armstrong (2009). Curator, writer and Graphic Designer, Ellen Lupton who

8 holds the use of grids in high regard, states that “The power of the grid is to lift the designer outside of the protective consciousness of ‘self’ by providing an existing set of possibilities, a set of rules”. She however argues, “In the wrong hands the opposite is true. The grid is only limiting if it is used that way.

To say the grid is limiting is to say that language is limiting, or that typography is limiting. It is up to us to use these media critically or passively.” (Roberts and Thrift, 2005, pp.122-123)

Fig. 2 “18th Didacta/Eurodidac” Worldformat poster for the convention on teaching aids, film layering, 1980/81, designed by Wolfgang Weingart (cited on AIGA, n.d.)

9

Chapter 1

Origins and evolution of the Grid The grid before graphic design Bigman (2014), supports the view that in the period of the Renaissance, rules about mathematics and architecture overlapped with those of painting in order to formulate standardisations for perspective and establish a way to execute a sense of reality and depth in relation to a vanishing point and a horizon line.

This may seem rather divorced from the principle of the grid but according to Bigman (2014), “It was this marriage of architecture and visual representation that first produced the grid, although it was not called that at the time.” One’s attention might be grabbed by the ‘perfect geometry’ that emerged from centred and symmetrical layouts. Principles such as the golden rectangle – which was a rectangle with proportions of 1:1.618 that when you subtract a square from it produces another rectangle of identical proportions – are still referenced and referred to in design. Bigman (2014) supports this view.

In addition, Bigman (2014) highlights that during the 13th century, the architect Villard De Honnecourt created the diagram used for producing layouts with margins of fixed ratios. This is what was considered to be a harmonious design and is still used as reference when designing for print, for example, book cover design.

Fig. 3 Painting of Masolino’s ‘St. Peter Healing a Cripple and the Raising of Tabitha, 1425 made use of mathematical principles to develop linear perspective, as indicated by the lines superimposed (cited on 99 designs, 2014)

Fig. 4 A description of the golden rule (cited on Thinking with type, 2009)

10

Fig. 5 An example of Villardâ&#x20AC;&#x2122;s diagram being used to determined the proportions of books from the Renaissance through the present (cited on 99 designs, 2014)

11

Rule of thirds Bigman (2014) identifies the rule of thirds as yet another principle rooted in the concept of grids and describes it as “the assumption that images are more dynamic and engaging when the focus is somewhat off-center.” The effectiveness of the rule of thirds is achieved by dividing any workspace or layout into thirds, horizontally and vertically, while making sure the focus points of the composition are aligned to where the lines intersect. This view is supported by Boulton (2009), a typography designer and design director at Monotype.

Fig. 6 The “rule of thirds” in photography echoes the principle that asymmetric design is more natural and dynamic. Photo by Trey Ratcliff (cited on 99 designs, 2014)

The formation of the modern grid The work of Bigman also suggests that by the late 19th century, people began to perceive graphic design as a profession with people such as William Morris, of the arts and crafts movement, being the pioneers of using the term ‘designer’ to describe themselves. As mentioned earlier, the grid did not become a widely used term until after World War 1 in Switzerland. A problem came about from the need to print several documents in more than one language, with columns of French, German and English. The asymmetrical approach could no longer sustain this new demand and this brought about the challenge of employing new and innovative design solutions.

The Bauhaus school opened in Germany in 1919, carrying the ideology of ‘form follows function’. This explained how there was a direct relationship between the appearance of an object or design and to what extent its visual components helped it to perform its intended purpose, without any unnecessary decorative elements. Eventually, this resulted in the grid evolving into an extremely practical design element and tool. These views are supported by the work of Bigman (2014) Swiss typographer, Josef Müller Brockmann, became the pioneer of a new style called The International Style or Swiss Style Typography. Swiss style became established in the 1940s and 1950s and was characterised by design elements being organised with the aid of a mathematically

12 constructed grid, which resulted in a harmonious design with a sense of logic and visual unity. This view is supported by Seddon (2014). A similar approach had been employed in areas such as fine art, but was most evident in the Dutch De Stijl movement in 1917. The principles of this movement were rooted in modular design and simplicity paired with the use of primary colours and intersecting vertical and horizontal lines. Designers such as Richard P. Lohse, Armin Hofmann and Alberto Longhi also continued to spread concepts of the grid through their work.

Fig. 7 A De Stijl publication , 1926, in which the grid is clearly apparent (cited on 99 designs, 2014)

Fig.8 Poster by Richard Lohse (cited on 99 design, 2014)

13

Karl Gerstner and the flexible grid Bigman (2014) supports the view that that, due to its overexposure, people grew tired of the grid and many designers were in pursuit of ways to add variety and innovation to the grid. “Swiss designer, Karl Gerstner was the first to truly exploit the grids and create them with unmatched complexity which yielded incredible flexibility,” (Carusone, 2010). Gerstner created the 58-unit grid in 1962 for some commission work for a journal called ‘The Periodical Capital.’ Gerstner’s grid displayed the use of fields and multi-column structure that allowed never-ending possible variations. This view is supported by Roberts and Thrift (2005). Gertsner’s explorations within the use of the grid were visionary and were a glance into the future of the grid. Additionally, the existence of the web was about to cause a shift in design.

Fig. 9 The Periodical Capital which was designed by Karl Gerstner, using his flexible grid (Cited on Thinking Form, 2011)

Fig. 10 Karl Gerstner’s grid for Capital Magazine, 1926 (cited on Thinking Form, 2011)

14

Chapter 2

Origins and evolution of the web Tim Berners-Lee, a British computer scientist, invented the World Wide Web in August 1991. The very first website, http://info.cern.ch, was launched on 6 August 1991, Expanding on this, an article written by Cameron Chapman on Six Revisions, (2009) describes this website as “A simple, text based page with a few links, and simply served to tell people what the World Wide Web was all about. Subsequent pages were similar in that they were text based and had a single column design with in-line links. Initial versions of Hypertext Markup Language (HTML) only allowed for very basic content structure such as headings, paragraphs, and links. Subsequent versions of HTML allowed the addition of images to pages, and eventually support for tables was added.”

Evolution of website design The Web developer versus the Web designer A web designer uses graphic design software such as the adobe creative suite to formulate a look for the web. He/she relies on visual concepts including typography, colour, and effective use of space and user experience. This end product is then paired with the more technical back-end aspect called coding.

Coding can be seen as the ‘wires’ that help the design to come to life online.

In some cases, the designer is not the one that writes the code and can work separately from the team that will bring the design to life. The web developer however, builds the ‘backbone’ of the website by using a language that is specific to the web. These languages include HTML, JavaScript, JQuery and CSS. From a historical aspect, good developers do not make their primary focus the visual appeal of the website but are more concerned with ensuring that the site functions effectively and efficiently.

The roles of web designers and web developers have started to overlap now, more than ever as more designers are learning to code and more developers have started to become aware of design theory. These views are supported by Cousins (2013. It is important to note that even though the two roles have different functions, they share the common goal of creating a product that will give the user a wonderful and fulfilling experience.

Early websites The first web page was very basic and its only purpose at the time was to establish the fact that it existed and to inform people what it was about. Early website design was not informed by grid structure. It is apparent in fig. 11 that the structure of the website is skeletal. There is minimal typographic awareness apart from the hierarchical intentions posed by using a bold font for the heading. The text is left aligned and runs across the screen.

There is no sense of a grid layout that seems to have been considered here.

15

Fig. 11 The First web page in 1992 (cited on Six Revisions, 2009)

The structure of the Yahoo website in fig. 12 still shows a lack of grid use. There is however use of graphics and images and the text remains left aligned.

Fig. 12 Yahoo website in 1996 (cited on Six Revisions, 2009)

16 In fig. 13 there is more use of colour and buttons centred. There is, however still no sense of grid layout. .

Fig. 13 AltaVista website in 1996 (cited on Six Revisions)

Fig. 11–13 illustrate the point that there was a higher preference for the functioning of a website rather than the aesthetics. The main focus was to simply transfer information. As the Internet became more widely used, it was not enough to have information but to also ensure that it was displayed in an attractive, logical and engaging manner. This opened up a door for designers to start exploring methods of achieving better-looking websites with a higher quality of user experience.

Table based designs An attempt to incorporate grid structure in web design was use of HTML tables. According to simplehtmlguide.com, “Table tags are used for displaying spreadsheet-like data neatly formatted in rows and columns. They can be used to design page layouts by placing content into invisible rows and columns in a table.” HTML tables are ideally useful when one wants to tabulate data, but due to the presence of cells, rows and columns, they provided something that designers could resonate with something that echoed the idea of organising information by use of the grid in print design.

This view is supported by Boulton (2009).

Fig. 14 Example of an HTML table created by w3schools.com

17

Design over structure As web design continued to progress, the focus shifted from the desire to just put information on screen regardless of how it looked, to the desire to make it look attractive. Chapman (2009) says, “web layouts paid little attention to logic and accessibility.” There was now a desire to have more control over the whitespace of the web, and this resulted in the emergence of the use of spacer Graphic Interchange Formats (GIFs). This tug-of-war between function and form implies a possible separation or minimal collaboration between those that saw themselves as web developers and those that saw themselves as designers. The aesthetic qualities of the website seem as though they were initially being held back and were being considered more of an ‘add-on’ rather than a leading component. In contemporary web design, there now seems to be a balance between the aesthetics of a website and the backend technicalities. There is a better relationship between the developer and the designer because of the overlapping of their roles and how both sides have actively started becoming aware of both the technical aspects and the visual aspects when creating a website. This view is supported by the work of Cousins (2013)

Fig. 15 Example of spacer GIFs in use (cited on Six Revisions, 2009)

Fig. 16 W3C website in 1998 (cited on Six Revisions, 2009)

18 Fig. 17 shows some progression in website design at this point. The column widths are becoming more consistent and organisation of information is starting to improve. There is now a sense of grid layout. There also seems to be more awareness about typographic principals previously ignored, such as line length and how it affects the readability of text.

Fig. 17 Yahoo website in 2002 (cited on Six Revisions, 2009)

In comparison to the previous altavista website in fig. 13, this is definitely more organised and there is a use of 'boxes', presumably the HTML tables which acted as grids to separate and organise information.

Fig. 18 AltaVista website in 2000 (cited on Six Revisions, 2009)

19

CSS Based design According to Jurmann (2008) â&#x20AC;&#x153;Cascading style sheet (CSS) is merely the tool used to style a websiteâ&#x20AC;&#x2122;s visual information.â&#x20AC;? CSS had always been available since 2000 but due to the minimal support for it on the predominant web browsers at the time, most designers avoided it. In addition to compatibility issues, the unfamiliarity of CSS naturally manifested a feeling of intimidation amongst designers as they felt it was more difficult alternative. Despite all of this, CSS, however did have substantial advantages over table-based designs and it was only a matter of time before it was embraced as the new method of website design. Advantages included the fact that design elements were dissociated from the content. This meant that the visual aspects were separated from the content. CSS also brought along the opportunity to make advances in how the information was laid out and this was a step forward from the limitations that table layouts presented. This view is supported by Chapman (2009).

In fig. 19 and 20 a grid structure is more present than the earlier websites.

There is a sense of order which makes it easier for the eye to access information. Also noticeable, is the fact the elements appear less cluttered and cramped on the page, especially in the 2009 version in fig. 20.

Fig. 19 W3C website in 2003 (cited on Six Revisions, 2009)

20

Fig. 20 W3C website in 2009 (cited on Six Revisions, 2009)

Website design today Websites now look much better than earlier websites, as the use of the grid is more common than before, when the web has just come into existence. There is a strong use of the grid in both of the websites below. Fig 21 fully brings out the grid by allowing the vertical and horizontal lines to be visible. In fig. 22 the website uses a five-column grid.

Fig. 22 42Angels website (cited on 99 designs, 2014)

Fig. 21 Pixelot.de website (cited on 99 designs, 2014)

21

Chapter 3

Catering for a page without an edge – the infinite canvas When designing for print, once a design has been finished and printed, that is it. It becomes a final piece of work that goes out into the world to serve its purpose of reaching out to the relevant audience. The web, however, created an opportunity for creatives to have more freedom by allowing one to make further changes to a design even long after it has been published for the world to see. This view is supported by the work of Boulton (2005) “Our debt to print goes much deeper than language or borrowed terminology such as masthead, whitespace, leading and fold,” says Marcotte (2011, p.2). Marcotte explains that another concept that has been borrowed is ‘the canvas’. Taking a look at various creative mediums, it is apparent that the artist always starts by selecting a piece of paper or appropriate material of a specific size. This is a very crucial aspect of the creative process as it not only predetermines certain future aesthetic decisions but also puts into the place, a sense of overall structure and organisation for whatever work is going to evolve in that space.

Berners-Lee created a canvas on which information could not only be shared and distributed but also a canvas on which that information could be organised and presented in a manner that was appealing and optimal for the user. If the idea of the canvas allows the designer to set parameters and boundaries then why has it caused seemingly endless problems when it comes to designing for the screen? Marcotte (2011) proposes that cause of the problem lies in the fact that the designer becomes separated from the canvas at the point at which the content is published. This takes away some of that power and hands it over to the user who is now able to alter the way in which the content looks, in terms of font settings, colour, shape and size of the browser. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the printed page.” (Allsopp, 2000). Graphic design experienced a turning point as soon as the web came into existence. By 1997, there was an influx of creative professionals venturing into designing for the web because they found it to be more exciting and less restricting. Many of the print design principles were, however, being forced into a media in which they do not necessarily fit into. This view is supported by the work of Boulton (2009) in his book called ‘Designing for the web’. “Designers were trying to make the web what it wasn’t by imposing conventions on technology that it was not designed for”, says Boulton (2009 p.3).

22

960-pixel grid Web designers embraced the grid as a tool for laying out information on the screen but it was altered slightly in order to allow it to be useful when designing for a different “canvas”, the screen. This made way for the use of the 960-pixel grid. Boulton (2009) suggests that “We start by dividing the 960 pixel wide ‘page’ into thirds, giving us three equal columns of 320 pixels wide.

We also use the same measurements vertically this will give us nine equal squares of 320 pixels by 320 pixels.” Designers that made use of this size and variety of column and box layouts using the grid layout, found it helpful to design in software such as Photoshop and Firefox. A new problem, however, arose for grid layouts when websites that had previously been viewed on a laptop or monitor with a standard 1024 pixel width were now being accessed on several other devices. These devices varied in shape and screen size and although the 960-pixel grid was still fairly applicable and useful, it did not suffice and a new and innovative method was required. In this day and age, no user enjoys the hassle and annoyance of trying to view a full size layout on say, a mobile phone, and has to scroll up, down, left, right and centre in order to read a full sentence or to just simply locate what they are looking for. This view is supported by eyelearn (n.d.).

Fig. 23 Woothemes website design that applies the 960 pixel grid. (cited on sourcebook.com, 2007)

23

Chapter 4

Further adaptations The web page is a screen with no edge and a canvas that is seemingly endless and fluid. It is not only under the attempted control of the designer but also the user and the various platforms that the content can now be accessed on. With this is mind, is applying grids the best way of handling content for the web? Has the grid found a way to evolve along with the evolution of design for the screen? Has it lost its relevance and have designers found a different way of managing content without having to worry about the grid? During a dicussion with Tina Burton, a Graphic and New Media Design lecturer at Anglia Ruskin University, she explains that she is not a huge advocate of the grid when it comes to designing for the screen and prefers a different approach, “I prefer applying principles of information hierarchy to organize my content.” Meanwhile Ian Bennett, also a lecturer in Film and Media at Anglia Ruskin University, with a background in print design, feels that the grid is still and should be a significant part of designing for the web.

Boulton shares these sentiments and supports the application of the design principles that were based on print design as he sees them as a unique offering, granted that one finds a unique and effective way of still incorporating them into design for the screen. He supports this view in his book called “Designing for the web” he urges designers “not to lose sight of their core offering.”

“Mine, for example, could be layout. With my experience, traditional background and my leaning towards typographic design, clients come to me because of that” (2009, p.7). Boulton sees this as a selling point for himself as a designer and uses that as an advantage by applying grid layout to the modern web.

With this in mind could the approach of the use of the grid now be likened to the way in which the use of letterpress is perceived today? Those with nostalgia now seek it out as a rich and pure element of the past. It served well in its time, as this is where the fundamentals of typography are anchored, but because of new technologies and the computer it became obsolete. Perhaps in the same way, the grid had its time, and now new methods have been employed?

While Bennet and Boulton are in agreement about the use of the grids as something very important still, even in designing for the screen, they both however stress the point that one must not be a slave to the grid.

“A web designer has to be willing to shed previously high held design sensibilities and start from scratch. They have to accept challenge and manipulate the constraints of the web. They must do this while keeping one eye firmly on their own personal design journey; where they are coming from, and where they are going”, urges Boulton (2009, p.7) In order for design solutions to stay relevant and to survive in the fast moving world of today they must change and be able to not only move with the technological advances but to also meet the ever changing needs of the user. A way in which this has occurred in the area of web and user interface design is the concept of responsive design.

24

Chapter 5

Responsive Design Smashing Magazine, a resource website for the design community, founded

by Vitaly Friedman and Sven Lennartz in 2006, describes responsive design as “the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.” Responsive design also means taking into consideration how and if a grid can be used in creating effective and functional layouts and making informed decisions about images. It involves making sure that when the user alternates between devices of different dimensions and screen resolutions, the display of the information adjusts accordingly to suit the medium without disruption in content accessibility.

Fig. 24 An example of responsive design in action on the Dusty cartridge website. Its responsive nature allows it to adjust to different screen dimensions.

(Cited on 1stwebdesigner.com, 2012)

Grid use in responsive design Fluid grids In his A List Apart article, Chris Armstrong explains that, “We are designing for an infinite canvas – and for that we need an infinite grid system” (2012).

Websites used to be designed inside fixed grids with the 960-pixel grid system. The layout became adaptive through the use of different pixel sizes for different screen sizes. The existence of varying electric devices with varying screen sizes has brought about the need for creation of percentagebased designs. These are known as fluid designs. The principle of fluid grids lies in setting a maximum layout size for the design, followed by dividing the grid into a specific number of columns in order to ensure the layout stays clean and easy to manage. Each design element is created with proportional widths and heights as opposed to pixel based dimensions. This allows the elements to adjust their widths and heights accordingly, whenever the screen size is changed. These views are supported by Nimesh (2012).

Nimesh (2012) does, however, indicate that creating a fluid grid is no easy journey and demands time and perseverance. One may want to reach for a helping hand by employing existing CSS frameworks. There are also grid generators or templates such as Gridset, which was created by Mark Boulton, or Fluid grid by Bootstrap.

25 â&#x20AC;&#x153;The most efficient way to design for Responsive is to start with mobile and work up, by using this technique, it has been proven that the design process is not much more time consuming than a normal desktop design but the overall ongoing maintenance costs and of course the user experience can be improved exponentially.â&#x20AC;?

(Igentics, 2014).

Igentics (2014), a Cambridge-based digital design studio who have been a nominee and winner of a Webby award in 2013, believes that creating a gridbased web design with responsive qualities, makes it possible to have one website design that has the ability to change to fit the device it is being viewed on a single column layout for a small mobile, three columns for a tablet, and four or five for a large monitor. The design, content and code, become singular across all platforms.

Fig. 25 MarleyEternit website designed by Igentics. (cited on the igentics website, 2014)

26 Fig. 26 demonstrates the mechanism behind responsive design. The design for a desktop or large screen starts with three columns. As the devices and screens get smaller, columns are reduced and information is moved down into the remaining columns.

Fig. 26 Hillsborough Independent Panel Website Homepage, large, medium and small device layouts. Agency responsible Jones Olson, (cited on eyelearn.org, n.d.)

Comparing the responsive fluid grid and Gerstnerâ&#x20AC;&#x2122;s grid The responsive fluid grid echoes Gerstnerâ&#x20AC;&#x2122;s approach to the grid, which was primarily based on the concept of flexibility to allow for endless variation and possibilities within the printed page.

Fig. 10 Karl Gerstnerâ&#x20AC;&#x2122;s grid for Capital Magazine, 1926. (cited on Thinking Form, 2011)

27 Gerstner’s grid for the Capital magazine (fig. 10) consists of several grids layered on top of each other. They can work separately while still allowing for harmony within incredible variation. Gerstner’s grid is one grid with many versions that create and opportunity for experimentation, spontaneity and a rare amount of freedom in laying out information. The responsive fluid grid as demonstrated in fig. 26, is a single grid with the maximum possible number of columns, which are dictated by the largest screen size. As the screen size gets smaller, the outer columns are removed and information is now rearranged to fit within the remaining columns. Responsive fluid grid is one grid that is adaptive to the size to which it is being applied. It is a grid that is trying to create possibilities within limited parameters. There are however some common principles in both grids and these include the fact that they are both flexible and allow for variation to take place but in different contexts. The difference lies in the fact that Gerstner’s grid is complex in a way that affords the designer ample room to be creative in the explorations of laying out pages. “The complexity liberates the designer from the constraints of a simple grid by offering incredible variations” (Carusone, 2010). The responsive fluid grid is simpler and provides less freedom while requiring more compromise in how information is laid out. The responsive fluid grid is about making the most out of a limited environment and adapting to the constraints.

28

Chapter 6

The problem with the solution An opposing view on responsive grid layouts Preventing innovation Responsive design is a trend that currently has its place in contemporary wedsite design. It has, however led to many websites looking very similar and has left others feeling cheated. While interviewing Burton, for example, she expressed her views on responsive design as being a monotonous trend, much like the use of Helvetica or the wide spreading of flat design.

“Everything just ends in boxes when you apply responsive design principles. It is a work-around. It solved many problems, no doubt, but people can and will find another way as they will eventually become fed up by the homogeneity of all responsive websites.” A senior digital specialist at Chromatix shares similar views in an article called “Responsive design is not the future,” and states that “It definitely has its place on the Web right now. I believe responsive web design is a current trend, but I dare not say it is the future at all. With the rapid growth of the Web and future improvements in screen technology, it would be a folly to label responsive web design as the future.” (Chan, 2013) Threshold dynamics Hill (2014) shares similar views and in addition feels that responsive web design has resulted in accidental consequences that had neither been anticipated nor prepared for. These include the fear of how far responsive design will serve as a solution before technology advances far enough to make it another victim of obsolescence. Hill also speaks of “Threshold Dynamics”, describing a threshold as “the point or level at which something begins or changes.” The point of change or beginning defines all living things because they determine the action that follows, which in turn has an effect on the outcome. When one applies this concept into the context on web design and new media, it is of high importance that one is able to identify the right points of possible change or beginning in order to set oneself on a path paved with better outcomes. Acquiring the skill of conjuring up new and possible thresholds where there are not necessarily any tangible ones will enable an array of pleasant and deliberated outcomes. This will also inevitably provide higher levels of freedom and flexibility that will be a driving force for the pursuit of optimum quality, leading to the creation of better websites with better user experiences. This view is supported by the work of Hill (2014) on the Smashing magazine website.

29

Conclusion From its establishment in the 20th century to its continued use in contemporary design for the screen, the grid has always possessed very strong, justifiable and proven benefits. Its value as an effective guideline for organising information has been demonstrated through the extents to which designers have continued to try and formulate means and ways to still make it a part of the design process regardless of the limitations and problems brought about by new media and technology advancement. From the earliest website designs, designers were still trying to implement grid initially through the use of HTML tables then progressed to the 960 pixel grid. Concepts of Gerstner’s visionary and flexible grid for the Capital Magazine were then revived with a different approach through the rise of fluid grids for responsive website design. Akin to the evolution of website design to present day, has also been the evolution of the grid. As Technology and new media are moving forward, it seems designers are doing their best to keep the grid as relevant and adaptive as possible. During a discussion with Paul Avory, Creative director at Igentics, he expressed that “the grid in website design is very much alive and here to stay.” While he does not allow the grid to restrict him, it plays a large role when he is designing web pages because he believes, “it provides a basis for logic for the positioning of elements on the page. With no grid you are just placing elements with no rational or purpose.”

On the other hand, some feel as though fluid grids are a temporary solution that has turned into a trend that will eventually be monotonous.

Others question the threshold dynamics of the fluid grid and how far it can survive before it cannot suffice. Designers have however anticipated this and are confident that a new adaptation will come about in the future. Evidence provided in this essay shows that the grid is still very much relevant in contemporary design for the web. It is not clear, however, if this relevance will prevail in the future and to what extent. Echoing the sentiments of the likes of Ellen Lupton and Mark Boulton, while the grid may be a useful principle to hold onto and implement, one must not be controlled by it. The goal is to remember it, implement it when necessary but also remember to be flexible.

After all, it is part of the job of a designer to be able to adjust, create and innovate to suit whatever design problems come his or her way.

30

Bibliography Armstrong, C., 2012. The Infinite Grid. A list apart, [Blog] 16 October. Available at: <http:// alistapart.com/article/the-infinite-grid> [Accessed: 25 November 2014].

Armstrong, H., 2009. Graphic design theory: readings from the field. New York: Princeton Architectural Press.

Bigman, A., 2014. History of the design grid. 99 designs, [blog] 12 November. Available at: <http://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1>/ [Accessed: 15 November 2014].

Bigman, A., 2014. History of the design grid II. 99 designs, [blog] 12 November. Available at: <http://99designs.com/designer-blog/2013/03/26/history-of-the-grid-part-2/> [Accessed: 15 November 2014].

Boulton, M., 2009. A practical guide to designing for the web. [pdf] United Kingdom: Mark Boulton Design Ltd. Available at: <http://www.designingfortheweb.co.uk/part1/part1_ chapter1.php> [Accessed 23 October 2014].

Boulton, M., 2014. Responsive web design - defining the damn thing. The personal disquiet of Mark Boulton. [online] Available at: <http://markboulton.co.uk/journal/rwd-dtdt> [Accessed: 24 November 2014].

Carusone, A., 2010. Celebrating Gerstner. A Aisle.One. [blog] July 7. Available at: <http:// www.aisleone.net/2010/design/celebrating-karl-gerstner/> [Accessed: 28 December 2014].

Chan, J., 2013. Responsive web design is not the future. [online] Available at: <http:// sixrevisions.com/mobile/responsive-web-design-not-the-future/> [Accessed: 28 November 2014].

Chapman, C., 2009. Evolution of web design. [online] Available at: <http://sixrevisions.com/ web_design/the-evolution-of-web-design/> [Accessed: 22 November 2014].

Cousins, C., 2013. Whatâ&#x20AC;&#x2122;s the Difference Between a Web Designer and Web Developer? [online] Available at: <http://designmodo.com/designer-vs-developer/> [Accessed: 26 December 2014].

Duncan, R., n.d. HTML Tables, A simple guide to HTML, [blog] Available at: <http://www. simplehtmlguide.com/tables.php> [Accessed: 20 December 2014].

Eyelearn, n.d. Grids in Webdesign. Eyelearn, [blog] Available at: <http://eyelearn.org/ ma-stu-gallery/gridEssay-2013/annalise/> [Accessed: 2 January 2015].

Friedman, V., 2007. Designing With Grid-Based Approach. Smashing Magazine, [online] Available at: <http://www.smashingmagazine.com/2007/04/14/designing-with-grid-basedapproach/> [Accessed: 2 November 2014].

Igentics, 2014. Web design. [online] United Kingdom: Cambridge. Available at: <http://www. igentics.com/web-design> [Accessed: 2 January 2015].

Marcotte, E., 2011. Responsive Web Design. New York: Jeffrey Zeldman.

Nimesh, R., 2012. How Fluid Grids Work in Responsive Web Design. [online] Available at: <http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/> [Accessed: 22 November 2014].

Roberts, L., Thrift, J., 2005. The designer and the grid. Switzerland: Rotovision.

Sadha, A., 2011. Thinking Capital magazine No:1 designed by Karl Gerstner. [online] Available at: <http://thinkingform.com/2011/11/28/thinking-capital-magazine-no1designed-by-karl-gerstner/> [Accessed: 3 December 2014].

Seddon, T., 2014. The International Typographic Style: A Brief History. [online] Available at: <http://www.howdesign.com/featured/international-typographic-style-brief-history/> [Accessed: 28 December 2014].