About this site

Om dette nettstedet

Denne nye versjonen av perberntsen.com (januar 2015) er laget på nytt fra bunnen av. Den viktigste forandringen er at designen er responsiv - dvs. at den tilpasser seg størrelsen på skjermen, og fungerer godt på mobil og nettbrett, hvor det er også er støtte for touch - dvs. swipe, pinch, etc. Dessuten har over 300 bilder blitt scannet på nytt, og kvaliteten på bildene er nå gjennomgående høy.

Jeg har selv stått for design og utvikling, men siden jeg ikke kan javascript, har jeg vært avhengig av å bruke tilgjengelige script på nettet, og jeg har også leid inn profesjonell hjelp for å lage interne script for meg. (se Krediteringer nederst)

Jeg har ikke hatt mulighet til å teste på alle mulige plattformer og enheter, men er ganske sikker på at sidene vil fungere godt på Windows, Mac, Android og iOs.

Tips og triks

Nettlesere

Windows: De fleste nettlesere støtter i dag fargeprofiler i bilder, Internet Explorer hevder også å gjøre dette, men det stemmer ikke. Hvis du har en såkalt wide gamut skjerm, vil IE vise fargebilder med altfor høy fargemetning, og bildene blir glorete og stygge. Nå er det jo for det meste svart-hvitt bilder her (de er egentlig desaturerte fargebilder), men det er også en god del dokumentasjonsbilder i farger, og ikke minst arkitekturbilder. IE gjør også en relativt dårlig jobb med å skalere bilder.
Så mitt råd er: ikke bruk Internet Explorer.

Mac / iPhone / iPad: Safari fungerer greit, og jeg regner med at også Chrome og Opera gjør det samme. Unngå Opera Mini, som komprimerer bildene kraftig, dette går ut over kvaliteten.

Android: Den innebygde nettleseren fungerer dårlig til bildevisning, og anbefales ikke. Swipe virker ikke, trykk på bildet hopper over annethvert bilde, skjermen låser seg, etc.
Chrome og Opera fungerer utmerket, Firefox ikke fullt så bra, men mye bedre enn Androids nettleser.

Visning av store bilder på desktop/laptop

Det enkleste er å bruke piltastene for å navigere. Eller trykk Enter for neste bilde, og Backspace for forrige. Trykk Esc for å gå tilbake til thumbnails. Eller klikk som anvist i bildet under.

Hvis nettleservinduet ikke er høyt nok, kan det tenkes at bildeteksten blir helt eller delvis skjult. Prøv da hvis mulig å gjøre vinduet høyere, eller trykk F11(Windows) for fullskjermvisning. (Cmd + Shift + F på Mac)
En annen mulighet er å gjøre vinduet smalere - bildet blir da mindre, og det blir plass til bildeteksten.

Visning av store bilder på mobil/nettbrett

Naviger ved å swipe til høyre eller venstre. Alternativt, bruk trykk/tap som vist i bildet over. Bruk to fingre for å zoome inn eller ut.

I landskapsformat vil bildet fylle høyden på skjermen. For å se bildeteksten, snu 90 grader til portrettformat.

For å unngå at adressefeltet vises øverst på skjermen med store bilder, scroll litt ned slik at det forsvinner før du klikker på thumbnails. (dette fungerer på Android - er usikker på om det fungerer på iPhone)

Javascript

Dette nettstedet bruker en rekke javascript (jQuery) for å forbedre brukeropplevelsen. Hvis du har slått av javascript i nettleseren (anbefales ikke), vil innholdet fortsatt være tilgjengelig, men med redusert funksjonalitet. Det eneste som ikke vil være tilgjengelig er engelsk tekst på tospråklige sider, men teksten finnes selvfølgelig i html-koden.

Krediteringer

Nancy O'Shea fra alt-web.com har skrevet all intern javascript, kodet kontaktskjema, og ellers bidratt med gode råd og tips.

Maksim Krylosov har laget scriptet aBigImage. Jeg anbefaler dette scriptet til alle som ønsker seg en ren og enkel bildepresentasjon, som også virker på mobil og nettbrett. Maksim har også vært behjelpelig med å tilpasse scriptet til min bruk.

Design Chemical har laget Vertical Accordion Menu - scriptet til hovedmenyen på venstre side.

Josh Cope har laget SlickNav, et script som erstatter hovedmenyen på små skjermer, og generer en ny meny øverst på siden.

Jui-Shan Liang har laget eqHeight.coffee. Dette scriptet sørger for alle kolonner har samme høyde.

About this site

This new version of perberntsen.com (January 2015) is rebuilt from scratch. The most important change is that the design is responsive - i.e. it adjusts to screen size, and works well on smartphones and tablets. Furthermore, over 300 images have been re-scanned, and image quality is now high throughout the site.

I have designed and developed the site myself, but since I don't do javascript, I've had to use available scripts from the internet, and I have also hired a professional to write all the internal javascript. (see Credits at the bottom of the page)

It has not been possible for me to test on every device and platform, but I'm pretty sure that the pages will work well on Windows, Mac, Android, and iOs.

Tips & Tricks

Web browsers

Windows: Most recent web browsers will support color profiles in image files. Internet Explorer also claims to do so, but it doesn't. If you have a wide gamut monitor, IE will display color images over saturated and ugly. This site contains mostly black & white images (they're actually desaturated color images), but there are color images from exhibitions, and not least architectural work. IE also does a relatively bad job scaling images.
So my advice is: Don't use Internet Explorer.

Mac / iPhone / iPad: Safari works OK, and my guess is that Chrome and Opera will do the same. Avoid Opera Mini, which compresses images, image quality will suffer.

Android: The Android browser does not work well with images, and is not recommended. Swiping doesn't work, tapping the image skips every other image, screen locks up, etc.
Chrome and Opera work well, Firefox isn't quite so good, but much better than the Android browser.

Viewing large images on desktop / laptop

With the keyboard, use the arrow keys to navigate. Or press Enter for next, and Backspace for previous. Press Esc to go back to thumbnails. Or click as indicated in the image below.

If the browser window isn't tall enough, the caption may be completely or partially hidden. If possible, make the window taller, or press F11 (Windows) for fullscreen. On a Mac, press Cmd + Shift + F.
Another option is to make the window narrower. The image will shrink, and make room for the caption.

Viewing large images on smartphone / tablet

Navigate by swiping left or right. Alteratively, tap as shown in image above. Use two fingers to pinch or zoom.

In landscape orientation, the image will fill the height of the screen. To see the caption, turn 90 degrees to portrait orientation.

To prevent the adress field showing at the top of the screen with large images, scroll down a little to get it out of the way before clicking a thumbnail. (this works on Android, not sure about iPhone)

Javascript

This site uses a number of scripts (jQuery) to enhance the user experience. If you have turned off javascript in your browser (not recommended), the content will still be available, but with reduced functionality. The only thing that will not be available is English text on bi-lingual pages, but it can of course be found in the html code.

Credits

Nancy O'Shea of alt-web.com has written all the internal javascript, coded the contact form, and also contributed with general advice and tips.

Maksim Krylosov has written the script aBigImage. I recommend this script to anyone who wants a clean and simple image presentation, which also works on smartphones and tablets. Maksim has also been very helpful with adapting the script to my use.

Design Chemical have made Vertical Accordion Menu - the script for the main menu on the left.

Josh Cope has written SlickNav, a script that replaces the main menu on small screens, and generates a new menu at the top of the page.

Jui-Shan Liang has written eqHeight.coffee. This script makes sure that all columns on a page have the same height.