Poetfreak.com är mobilanpassat

I helgen jobbade jag en del timmar på att mobilanpassa min poesisajt Poetfreak.com. Det gick förvånande snabbt med hjälp av css media queries. Delvis beror det på att jag tidigare i projektet har tagit höjd för detta och på så sätt grundat lite bättre i koden.

Jag har tidigare skrivit lite om tankarna om mobile first (vilket jag alltså inte själv arbetat efter i detta projekt) och nu insåg jag verkligen nyttan av att arbeta så, Väldigt snabbt skalade jag bort onödiga element från mobilsajten vilket direkt ledde till än bättre desktopsajt. Det som var svårt att se på desktop blev helt givet i mobilen.. Resultatet? ja surfa in på www.poetfreak.com så ser du.

Ett mail från strokedrabbade poeten Jon, och ny version av Poetfreak.com

I veckan lanserade jag en uppdaterad version av poetfreak.com. Förutom arbetet i ramverket så har strukturen och designen förändrats. En förändring som denna gör man sällan (eller aldrig) helt perfekt och heller inte utan kritik, så inte heller nu. Men denna gång var det på ett ovanligt sätt.

Efter ett tag kom nämligen ett långt och varmt mail från ett barnbarn till den på Poetfreak mycket uppskattade poeten Jon. Jon hade tidigare i år varit med om en bilolycka och därefter drabbats av stroke. Hans minne var inte lika fungerande som tidigare och Jon hade fått svårt att memorera skriven text. Däremot fungerade han bättre om det fanns bilder intill text, för då kunde hans hjärna associera bilderna till texten.

På den tidigare versionen av Poetfreak fanns alltid bilder vid namnen på poeterna. Dessa bilder tog jag bort i ett försök att förenkla formen (utan vetskap om Jons problem). Jag ville ha renare rader och jag ville dessutom att man inte skulle kunna skapa uppmärksamhet genom bilden. Min hypotes var att det skulle bli ett tydligare fokus på texterna om bilderna försvann.

Tyvärr gjorde detta att hela sajten blev oanvändbar för Jon, han kunde inte längre orientera sig och koppla samman personer med texter. Jons hjärna behövde bilderna för att klara det och jag förbisåg helt och hållet behovet av den visuella kopplingen mellan en text och en bild, för att man via den snabbt kan associera till en poet, vilket är viktigt då textminnet sviker.

Givetvis är bilderna tillbaka på sajten nu och jag är en insikt rikare. Det är viktigt att designa för alla, men det är minst sagt svårt.

Så använder du Pointers i WordPress 3.3

Ganska snart kommer WordPress i en ny version, 3.3. En spännande sak som verkar gå med är konceptet Pointers. Tanken är att man på ett enkelt sätt ska kunna flagga för nya funktionalitet i wp-admin. Tanken är inte helt ny och båda Facebook och Gmail använder något liknande för att presentera nyheter för sina användare.

Eftersom 3.3 inte är släppt än kan saker komma att ändras men vill du testa redan nu så ladda hem senaste versionen av wp, och kopiera sedan in koden här nedan i functions.php i ditt tema.

Principen är ganska enkel, först lägger du till script och style som behövs (med enqueue), därefter lägger du innehållet i din pointer i en variabel, och sist kör du lite jquery och hakar på en pointer till ett #id någonstans i wp-admin.

Vill man går det att ändra på ”position” och ”arrow” för att designa om sin pointer så den passar placeringen på skärmen optimalt, pilen åt höger eller vänster osv. I mitt fall har jag lagt in funktionen i min Related Images för att påminna användarna att konfigurera pluginen, smidigt.


add_action( 'admin_enqueue_scripts', 'mitt_script' );

function mitt_script() {
 $visa_min_pointer = get_user_setting( 'min_pointer', 0 );
 if ( ! $visa_min_pointer ) {
 wp_enqueue_style( 'wp-pointer' );
 wp_enqueue_script( 'wp-pointer' );
 wp_enqueue_script( 'utils' );
 add_action( 'admin_print_footer_scripts', 'mitt_admin_pointer_script' );
 }
 }

function mitt_admin_pointer_script() {
 $p_content = '<h3>Rubriken i min Pointer</h3>';
 $p_content .= '<p>Brödtext i min pointer</p>';
 ?>
 <script type="text/javascript">
 //<![CDATA[
 jQuery(document).ready( function($) {
 $('#menu-settings').pointer({
 content: '<?php echo $p_content; ?>',
 position: {
 my: 'right top',
 at: 'left top',
 offset: '0 -2'
 },
 arrow: {
 edge: 'left',
 align: 'top',
 offset: 10
 },
 close: function() {
 setUserSetting( 'min_pointer', '1' );
 }
 }).pointer('open');
 });
 //]]>
 </script>
 <?php
 }

Redesign på en timme – Aftonbladet.se

Aftonbladet ska redesignas nu i höst och jag vill ju inte vara sämre än att jag gör detsamma (om än i miniformat) och resultatet ser ni nedan. Tydligare fokus på nyheter, inloggning på en mer  naturlig plats, Sportbladet får tydligare egen plast och navigationen är rensad ner till några få huvudalternativ. (det saknas flera element och detta ska ses som en skiss/mock, och ingen annat!)