New website can be seen on: tobiasholm.com/academicbooks2
The solution you will develop can be a website or other communication solutions for screens in
general. This means you can also choose to work with smartphone or tablet applications. Your
solution must be responsive; if you choose to design a website, you must ensure its
functionality over a wide range of devices. Even though app design may appear to be simpler
than website design, keep in mind that there is much to consider in this case as well, such as
viewports, OS, UI design, interaction, animations, functionality flows and so on.
Each group must submit an interactive prototype. The prototype have to be made using the
coding and scripting languages covered in the course, which are HTML5, CSS3 and
To structure and ensure a beneficial direction through the design process, we have sought to follow the principles of Design Thinking. These principles facilitates an iterative process in which the users are at the center of the exploration of possibilities and the evaluations of possible concepts (Kolko, 2015). The Design Thinking principles has been used as our framework for a user-centered process. This process started with an investigation of the users and their needs, and then moved on to the creation of explorative design artifacts that could address these user needs. The ideation related activities were then followed by a phase of testing those artifacts with real users. Thus, we argue that the progression of this project has been structured in compliance with the five phases defined by Design Thinking (Kolko, 2015):
The five phases of Design Thinking in our process
To ensure a exploration of the possible design space, we initiated the ideation with brainstorms that sought to maintain an open environment that would allow creative thinking both within and outside the box. As Buxton (2007) points out: “Even if you do a brilliant job of building what you originally set out to build, if it is the wrong product, it still constitutes a failure.” (p. 78), and thus, to ensure that we obtained the right starting point, we wanted to allow ideas that to others could seem frivolous or crazy, but ideas that might lead to new productive thoughts and interesting concepts. “One of the most positive forms of criticism is a better idea, and frequently, that better idea would never have come about were it not for the idea that it replaces.” (Buxton, 2007, p. 151). After our internal discussion of ideas we could move on to sketching the concepts in order to be able to start including the users and obtaining their opinions of the possible solutions.
This redesign was developed in the class ‘Design for Digital Communication Platforms’ and created along with my fellow students Frederik Skals, Peter Damm, Minna Jensen and Jennifer Gudman at the IT University of Copenhagen in the fall of 2016.
We used the mock-up tool Balsamiq to create the representations of our proposal, as it allows for a quick workflow and the possibility to link the different pages to each other. This allowed a very early inclusion of users who could start interacting with our ideas, before we had to start committing to specific features or layouts. This opportunity meant we could get through more iterations and continually change the design to ensure accordance between the users articulated desires and the design. Furthermore the mock-ups meant that our testing of the solution could begin very early in the process, as Krug (2014) points out the importance of: “Testing one user early in the project is better than testing 50 near the end.”
In order to redesign the website it was important to rethink the current visual elements. In general it was decided to have a more minimalistic aesthetic layout on the website. To meet the desire of a more manageable website we chose to create a new front page. This was done to accommodate the earlier mentioned issues about having too much information on the site. It was further decided to keep a sans-serif font and have the typography Robotto to make it simple and readable to the users. Nevertheless we keeped the original typography of AB’s logo in fact this was the identifying symbol of the organisation. In addition we chose to keep a green color on the website because a couple of interviewees were associating AB with the green color throughout the testing. However, we still used a more turquoise green than on the current website in order to make it appear more fresh. The green color were used in a lesser extent and combined with natural colours in terms of black and white. In addition it was decided to have icons and images on the website to create a visual identity
Responsive web design
The user base of Academic Books are of diverse when it comes to scientific background, and they are likewise when it comes to the devices they visit the site with. The common users of the site is primarily students thus obvious that they have a wide variety of devises to access the site with. All varying in screen size, resolution and input methods. This means that responsive web design is important, and therefore why we devolved the prototype with a mobile-first approach.
The main challenge was to create a design that could be able to handle the wideness of a computer screen and the narrowness of a mobile phone. Therefore, we created an elastic page layout that on a widescreen would arrange horizontally and on a portrait screen arrange vertically. This was done by having a floating CSS grid and using media queries to adapt them in response to resolution.
A further challenge is that the elements made to have the right size on a phone does not work on a computer. This was evident in the header as if they had to share one it would too large on the computer and too small on the phone. We circumvented this by having a media query check the screen resolution and display an appropriate menu for the platform.
On a computer screen there is simply more screen real estate, so on pages like the search page we show more information surrounding each product. However this does not mean that the mobile version lack content, there is just only space enough to show so much at a time, due to the smaller form factor.
Throughout the coding process, we made decisions on how to design and implement our ideas in the code, in relation to web standard, usability and responsiveness. Here we will be describe three considerations that were made regarding HTML, CSS and JQuery.
For the purpose of this prototype, we coded the footer and header into the HTML of every page. In a real development of a site, this would not take place, as it would be done server side, with one document for the masterpage, which through PHP or ASP.NET would populate each page with the content. This would be done so that a single change in the header or footer should not have to be changed manually on each page.
One of the primary attributes of the HTML5 semantics is to get a better ranking on google, which, obviously, does not matter for the sake of the prototype
As previously described, we coded the site prototype with the mobile-first design mind-set to create a responsive site that adapts the layout according to the platform it is viewed on. A prime example of this is on the front page with the three-panel menu for selecting study book, fiction or miscellaneous. It is not just only useful on every resolution, but changes layout to take advantage of the vertical nature of mobile devices and to accommodate the less precision that the finger has compared to a mouse.
It is coded so that a div-wrapper with a width of 100% contains the three category-div, which each has a width of 33.33% and float: left. This means results in the menu having the right size in every resolution, however, when the resolution is 768 pixels or under the width, the three menu-elements is set to 100% and float: none, through a media query. This resolution was chosen as it is just above the popular qHD and HD resolutions found on smartphones and smaller than an iPad in landscape mode, so that the menu would collapse when viewed on phones, as this accommodate their screen aspects better.
For the prototype, we ended up using jQuery for a lot of the functionality on the site. In this section, we will highlight specifically three snippets that make up the basic functionality of the site: filters, search on filter page and search in filter page from front page. In this section, we will briefly go over the important parts of the snippets with the purpose of explaining the choices behind.
To be able to filter the content on the page, we decided to use jQuery. jQuery would let us filter through an array of classes and thereby we could sort through the content on the page. For the filters, we have used select-tags, that hold option-tags with values related to each type of filter.
An example of the filter “format”
Then, when inserting a book to the HTML, all we needed was to include one of the option values for each filter in the book’s class. This means that if we add fx. ‘Paperback’ into the particular book’s class, it will show up on the page.
Obviously, this only works with the added jQuery. The logic behind the jQuery is that when the value of a particular select-tag is changed (someone clicks a different option value), then it looks in the div “#FilterContainer” for classes that match the particular option value. If a class does not match, it will hide, and if it does match it will show. It is the event .change() that makes this happen. See code for this:
Search on filter page
To make the user able to also search in the content on the filter page, we used jQuery as well. In short, what the code does is that if the div with the id “box” registers a .keyup() event, then it will take that value entered and look through the list with the class “.navList” and see if the value matches any HTML text within the list element. If it does, it will show it – if it does not, it will hide it.
Search in filter page from front page
On start page: When the user either clicks on the button “#btnQueryString”, or presses Enter, the value entered in the search box “.searchsquare” is found and made into a part of the URL. This snippet is shown underneath.