Looking Back

Today was the deadline for our websites.

With all done, and up in the air for everybody to see, it is a good time to look back, and evaluate both the process and the website.

To start with the website, I must say I’m quite satisfied with how it turned out.

Of course, there is things that could be improved. There could be more information about the events without making it seem too crowded, the online gallery could work with more sophisticated programming allowing the text to actually be text rather than a picture, the text could be more snazzy, the booking for could be done without making use of a google form, and so on and so on.

However, instead of looking at what could be, I’d rather look at what is. What I do have is a website which I feel contains all the relevant and important information for the type of website that is it. To me it seems easy to navigate, and it has has a consistent and -hopefully- attractive layout. Furthermore, it has an online gallery which I feel works well in giving people some more information in an engaging way.

That is how I feel about the website in any case, though I would love to hear what you think of it, so I’d say have a look! Even now it’s finished, tips and comments are still welcome as I could take them with to any other potential project.

Now, though I have already been posting about the process over the past couple weeks, I feel a little end summary is suitable.

Overall, I think it went pretty well. In the start, I didn’t know anything about website making. In fact, I didn’t even really know about HTML, and had definitely never heard of CSS. But by steadily doing exercises, looking at tutorials, reading other blogs, trying to build and getting useful help from my course mates, I gained competence bit by bit. And after the end of 10 weeks, I now know how to make a working website using dreamweaver.

Maybe I haven’t yet learned anything beyond HTML and Flash myself, but I do feel I am in a position to grow further in my Webdesign skills, and might actually quite like to do so.

Also, what I have learned to appreciate more is just how much work goes into making a website. Admittedly, I probably put in more hours than a ‘real’ webdesigner would, as I was learning as I went along, but all the same, a lot of time goes into research of the content, adapting it for the web, and then into actually making it into a working website.

Lastly, through this course I have hugely improved my photoshop skills, which I have enjoyed a lot.

So all in all, I’d say that through this module I’ve learned a lot of new skills and improved others, which together, hopefully make me a more competent, 21st century communicator.

Part of the Cloud!

After a lot of hard work, the website is up in the air. Watch it live on:

https://www.imperial.ac.uk/humanities/webdesign/2013/emmabornebroek/

Compatibility – Different Browsers and Devices

One potential pitfall in webdesign is that your website looks fine in one browser, but is a complete mess in another. Clearly, this could pose quite a bit problem, seeing that different people do use different browsers.

Besides different browsers, people might also look at your website from different types of devices such as a laptop, tablet or smartphone. Again, I feel it is quite important to aim to ensure good compatibility with all different devices. Possibly, this is even more important with a website like my exhibition website, which is likely to be looked at ‘on the go’.

Luckily, my website seemed to fare pretty well in all different ways of looking at it.

As I said, being compatible for use on a handheld was very important for my website. Luckily, the website worked very well on a number of devices, including an Iphone and an HTC model. Only one slightly older model had issues with the scrolling. Given more time, I would have solved this, but seeing that overall compatibility was good, I felt it was not necessary within the limitations of the course.

On the computer, I’ve tested Chrome, Firefox, Internet Explorer, Safari and Opera, which according to W3 schools, are the most commonly used browsers. In all of these, my website worked to satisfaction.

There were a couple of small changes in the use of the online gallery. Chrome and Opera work best, with not even any small issues.

The other three browsers have what I think are very minor issues. Firefox, for example, doesn’t seem to preload the rollovers as fluently as Chrome, meaning there is a less smooth image swap transition. Internet Explorer chooses the display the alternative text that does with the rollovers. This is slightly bothersome, but not a massive issue, and the writing does disappear after a couple of seconds. Safari briefly shows a narrow blue outline around the hotspot area after you’ve clicked it, but really I don’t think that is an issue at all.

So all in all, I’m very happy with the compatibility of my website with different browsers, and I feel that the near absence of problems might be the result from my relatively straightforward buildup of the website.

Spacing

One of the design tips given on the website I blogged about earlier, was to use spacing cleverly.

Doing this really helped me improve my ‘what’s on’  and ‘visiting’  pages. Both of these were quite text heavy, and frankly a bit overwhelming.

Initially, I wasn’t quite sure how to improve this, but when I asked from suggestions from friends, many people suggested I included a bit more spacing in between the lines and the different sections.

In response to their suggestion, I increased line height for the lists at the top, and put margins around the lines in between the different sections, together with a couple other spacing alterations.

After doing this, I feel my website is a lot more calm and clear, showing just how big a difference spacing can make.

This slideshow requires JavaScript.

Accessibility

Being accessible to all people, including those with handicaps, is part of the criteria of a good website. One aspect of this is ensuring that people who may have difficulty reading, either because of poor sight or other issues, can still use the website easily.

Accomplishing this is quite easy for those parts that are written, as people can increase the font size, or even have the words read out to them. However, for images and even more so words that are not actually types letters but rather parts of images, this takes a little bit more effort.

More specifically, it means including and ‘alternative’  description for all your images. All the images on my website do have such an alternative description. I feel this was especially important in the online gallery bit, where there is much content that seems to be writing, but is in fact images. In the alternative description of these, I put the exact same text as was in the image.

Hopefully this way, my website should have good accessibility.

Footer Shift Issue Solved

Mostly, I haven’t really had big issues with inexplicable things happening to my website. However, for quite a while I did have an issue with the footer. In the ‘visiting’  page, the Wellcome Collection logo and the copyright sign would shift ever so slightly in position, and I really didn’t know why.

But because it kept bugging me, I decided to go and do some inspection of my code. I started my investigation by looking at the sizes set for the divs the content above the footer was put in. This is because initially, any of the content that had a scrollbar shifter the footer, and I solved this by reducing the size of the content above the footer. So maybe, I thought, the size is still off. However, when I compared the ‘events’ with the ‘visiting page’  the sizes were exactly the same.

Next, I decided to look at the divs more closely, and especially at the opening and cl0sing. It was then that I noticed that I had actually forgotting to close one of the divs with </div>. And as soon as I added that, the problem was solved.

So in the end, it was actually a quick fix, which to me showed that even though Dreamweaver is useful, it can also be of help to know a bit of code, to help you sort out issues like this. (Or maybe, I’m just not sufficiently competent with Dreamweaver, and I’m overlooking a function which would have done that for me – Either way, I’m happy it’s solved)

User Friendliness of Online Gallery

Today, I put the finishing touches to my online gallery. Besides proofreading etcetera, a very important part was testing and improving the user friendliness.

My initial online gallery design had minimal written instructions and icons. Instead, it was real ‘exploration’ of the gallery. To me, this was sufficiently intuitive, but as I was putting it online, I did wonder already just how easy to use it would be for people who had not made the website.

Therefore, I decided to show it to some people so see how they used the interface, and to ask feedback from more friends still. From this it became clear that not all people knew straight away were to click and how to navigate. Furthermore, it was difficult for visitors to find the parts of the gallery that had hotspots with more information about specific objects. In response to this, I decided to make two changes.

First of all, when hovering over the different galleries, I decided to include a written instruction that tells people that clicking on the gallery will allow them to discover more information.

Secondly, I decided to include little ‘info’ icons to indicate those places that are hotspots. In order for them to not clash with the aesthetics of the rest of the image, I found some hand draw ones on a great website that has many free to use icons.

Information Logos to indicate rollover hotspots

Having made these changes, and tested them, I feel my online gallery is now much more use friendly to my website’s visitors.

Specifics of Design Decision Making – Online Gallery

Throughout my blog, I have covered the generals of my design decisions. However, after these general design decisions are made, there are still many more choices to make regarding details. So many choices in fact, that covering them all would make my blog a very long read indeed. Therefore, haven’t written about it in great detail so far. However, just to illustrate, I thought it might be nice to cover more thoroughly just one apsect of my design: the interactive gallery map. 

The basis of the interactive gallery map is a 3d model I made in google sketchup. If you want, you can have a look at a runthrough of the gallery in this video. It was initially made to decide and show the gallery layout for the exhibition proposal, but throughout I had in mind to also use it in the website.

The model’s design was a mixture of approaching reality and optimised functionality. For example, the colour scheme used is that of the exhibition, but in order to simplify it all cases were of glass, and all non-cased objects were red.

Having the model in 3d and the website in 2d, I needed to make a choice on the angle at which to show the model. In this, I had to balance optimising the view (which is best when looking at it from the top centre), and a 3d feel of the image (which is better from a more side corner angle). In the end, I decided to go ith something halfway, which gives both a decent view and a good 3d feel.

The second major choice was deciding what representation style to have the model render in. Sketchup offers a multitude of different renderings, such as lifelike, blueprint, and many different types of sketchy feels. I decided to go with a relatively sketchy one. This matched with the style of the website yes was sufficiently clear.

From here, I imported the image into photoshop, to edit it further for use on the website. The first choice here was whether to present my image in greyscale, as the rest of my website had been so far, or in colour. The choise fell to colour, as this kept the image much clearer all together.

However, even in colour, there was still a slight issue with the gallery walls blending in with the background of the website, as they were both dark grey. In order to solve this, I decided to include an outline around the image. But as with anything in photoshop, there is a multitude of types of outlines available in any imaginable colour. To match the style of the image, and the colour scheme, I choice a grainy outer glow in the colour #CCC, which is the main shade of very light grey on my website.

Next up was trying to decide where exactly to place the image. The standard on my website was to have everything centered, but because of the angle of the image of the gallery, centered didn’t actually look centered. Therefore, I decided to actually have a bit more free space to the right of the image and at the bottom. This way, it looked well balanced.

Linking in with the spacing, is deciding where to place the writing. With the image being angled the way it was, really the only place was at the bottom left of the image. But actually I felt that as long as I made the text the right size, and had it fit into a box that lined up nicely with the image, this actually looked nice and calm.

Having done all this, I could then start thinking about the actual exploring of the map. To allow for a clearly segmented exploration of the room, I had decided to have only one room active at any time. To show this activity, I decided to shade the non-active rooms by making them darker using photoshop. Personally, I felt this adjustment was very effective, as it made it seem as if ‘the lights were turned off’ in the other rooms. However, as anything with photoshop, this wasn’t an issue of darkening or not, but rather of deciding exly how much to darken it. Largely, I decide things like this on feeling. – sixth decision: showing what room is activated: darkining out, clearest. Then, how much darkening out

Next up was deciding how to display the popux text and image relating to the individual objects. This included where to place the boxes, how big for them to be, how large the text font and the images are. Also, I needed to decide on colour, which was relatively easy as I just chose my standard colour #CCC. However, rather than it being fully grey I felt that having it slightly see-through would make for a better ‘overlay’ feel. Yet, it did have to be sufficiently opaqua that the background didn’t distract too much, yet it seemed see-through.

Hopefully this blogpost shows that every little aspect of the website does have to be thought through in order to optimise the look, feel and usability of the website. And even though this post might seem relatively long, it still hasn’t described in the thoughtprocess behind the decisions in full detail. In fact, I might even say that that is impossible and in any case undesirable, so after this blog, I’ll go back to my more concise descriptions.

Interactive map – Apologies for the light text, on the website this is displayed over a dark background.

Explore Page – Rollover Solution

In my original page, I’d intended for my explore page to be clickable with little internal windows popping up with information, which you can then close again to return to the main explore page.

However, my research into this told me this would require javascript. (As, for example, is explained here). And with the course being so short, and the deadline so close, I’m not keen to learn javascript.

So what I decided to do instead, was to use rollover images that make it seem as if a little window pops up. More specifically, I the big gallery space map will have hotspots, and when a visitor hovers over these, the initial image is replaced by one that includes a little box with a picture and some text.

I realise there is disadvantages to this. Mostly, the text inside the box won’t actually be text, but rather an image. This means that people won’t be ably to easily copy the information of the website. Furthermore  it limits the accessibility to for example visually impaired people. Luckily, this issue can partially be solved by putting this text in the ‘alternative description’ of the hotspots that correspond with the images.

And all in all, it is by far the simplest solutions and therefore is the one I will stick with for now.

Including a Form – The Easy Way

One of four main sections on my exhibition website deals with the events that would happen alongside the exhibition.

As with most events, people would need to book a space in order to attend these events. And what better way to book a space than to use the website. Therefore, I felt my website would not be complete without the option of booking a place for an event.

But at one point, that seemed easier said than done. After doing some researched, it appeared that in order to include a form, that would then gather my responses, I’d need to learn a whole lot of new coding, and new coding languages, including PHP. To me, the prospect of this was too overwhelming, especially seeing that our webdesign course is only 8 weeks long.

So rather than trying to learn this new coding, I decided to look for an easy way out. And actually, that was relatively easy. Google, creator of many great things on the internet, came to the rescue.

More specifically, google drive with its form function came to the rescue. I’d used google forms before, and decided it was worth a try to see if I could embed this into my website. A quick (google) search later, I found that indeed you can, and about 5 minutes after that, I had a form embedded in my website, enabling people to register for events. Their responses will then be put in a spreadsheet, ready for the hypothetical Wellcome Trust worked to note that they will be attending.

Thank you google.