Jag tycker det är bra. Lite festligt med de som klagar mycket då utseendet i stora drag är oförändrat. Det som gjorts är att ordna till alla delar som skar sig rejält vilket givetvis är bra. Precis som det också skrivs så är detta en bra grund att sedan bygga vidare på. Tråkigt att en del är så oförstående, men detta är ganska givet och det kommer alltid att vara så oavsett vad ni gör (eller inte gör).
...men.
Om jag fick göra ett par ändringar:
1. 'Breadcrumb':en har i trådar större fokus än namnet på tråden då detta element är det mest kontrasterande. Prioriteten bör snarare vara Rubrik > Breadcrumb.
2. Det vita som omger hela Flashback i trådar är den ljusaste punkten. Detta är ett problem då våra ögon automatiskt fokuserar på den del av en vy som är ljusast. Ur det perspektivet blir det konstigt att inlägg i trådar inte är det som är fokus och det bör snarare vara det andra som har en lägre kontrast.
Lösning: Ha inte sidorna som den ljusaste punkten då inläggen i en tråd bör vara prioritet Mörka det runtomkring, ljusa upp det som är fokuspunkt för läsaren.
Notera dock att FB är en av de mest besökta sajterna i Sverige varpå det kan vara bra att ta hänsyn till folk med synsvårigheter och annat. En för hög kontrast är t ex dåligt för folk med dyslexi.
3. Det är fint med en svart toppnavigering men denna har 100% kontrast (till skillnad mot allt annat) och stjäl därav opropertionerligt mycket fokus. Det viktigaste när man läser trådarna är inläggen, inte toppnavigeringen. Jag kan tänka mig att detta är något som folk stör sig på även om de flesta har svårt att formulera eller förstå vad de egentligen är som är så att säga "fult" med den nya designen.
Lösning:
a) Slappna av med kontrasten
b) Använd en hover som vid behov gör att toppnavigeringen får högre kontrast (dvs -- ändra bakgrundsfärg vid hover). Sätt/använd en breakpoint så att hover endast gäller större skärmar (desktop).
4. Toppnavigeringen är fin, men tar inte hänsyn till att många som inte bara konsumerar (dvs läser) utan istället skriver också kan sitta på skärmar som i regel är i landskapsläge. I landskapsläge tar toppnavigeringen på tok för mycket plats.
Lösning: Låt användaren välja om denna ska ligga i toppen eller på en av sidorna.
5. Sluta använda Bootstrap pga bloat.
Vid en enkel sidladdning laddas:
320 KB JS
223 KB CSS
Detta utgör hela 543/712 KB (i detta fall när jag klickade 'förhandsgranska', givetvis olika beroende på var på forumet man är osv). Det är dock inte antal KB som är intressant (givetvis) utan allt detta leder till långsammare rendering av samtliga sidor då alla dessa oanvända stilar, oanvänd JS etc etc vid varje sidladdning måste parse:as av webbläsaren. Jag tänker inte gå in på hur webbläsare fungerar tekniskt, ta mitt ord för det eller googla på det.
Lösning:
1. Använd inte Bootstrap
2. Sätt upp en lista med vad som faktiskt behövs
3. Hitta ett alternativ som är lättare (dessa finns det gott om) och se om detta FW stämmer väl överrens med er kravlista
5. Implentera Push State + AJAX (PJAX), applicera där det passar. Detta så att användare i högre utsträckning slipper revalidera saker som JS, CSS etc. Snabbar upp sidladdning utan att bryta kompatiblitet.
Exempel, (JQ):
Kod:
/**
* Flashback PJAX
* Use Pushstate in thread overview and within threads
*/
$.ajaxSetup({
cache: true,
async: true
});
var not_allowed = [
'new',
'#top',
'#goto',
'do=',
'#'
];
var push = {
get: function(uri, popState, refresh){
popState = popState || false;
refresh = refresh || false;
var target = document.getElementById('site-left');
$('#site').addClass('loading');
$.ajax({
url: uri
})
.done(function(data){
// VARs
var $data = $(data),
content = $data.find('#site-left').html(),
pageTitle = $data.filter('title').text();
// SET
document.title = pageTitle;
target.innerHTML = content;
$('#site').removeClass('loading');
if( document.getElementById('posts') ) {
flashback.init();
}
// PUSH STATE
if( !popState ) {
history.pushState(null, null, uri);
// check if link to last
if( uri.slice(-1) == 's' ){
window.scrollTo(0,document.body.scrollHeight);
}
else {
// force scroll to top
var d = document;
d.body.scrollTop = d.documentElement.scrollTop = 0;
}
}
});
},
init: function(){
// check + kill if non-support
if( !history.pushState ) return false;
// binds
var site_left = $('#site-left');
site_left.on('click', 'a', function(e){
var t = this,
href = t.href;
// pass clicks if these conditions met
if( href.length < 3 ) return true;
if( href.indexOf('https://www.flashback') > -1 ){} else { return true; }
for(let i=0;i<not_allowed.length;i++){
if( href.indexOf(not_allowed[i]) > -1 ){
return true;
}
}
e.preventDefault();
push.get( href );
})
// back-foward buttons
window.onpopstate = function(e){
push.get( window.location.href, true ); // true = dont trigger another pushState
};
},
};
// init
push.init();
Hör av er/dig om ni behöver hjälp med detta. Trivialt från någon som är erfaren, desto mindre för någon som inte är det som med allt annat.
7. Fixa specialtaggarna CODE, HTML, PHP
Sätt width 100%, se mitt inlägg för exempel på varför... Sätt också en 'class' som gör att utseendet förbättras en gnutta. Iom att ni använder ett FW (FrameWork) räcker det förmodligen att endast sätta en CSS-klass.
---
Edit:
För den som vill kan man testa PJAX och lite annat i en test-extension som finns här:
https://www.sendspace.com/file/yumft0
Packad som .7z för att göra det lite svårare för noviser. Filen tas bort automatiskt om runt 24h.
Om någon är osäker på att installera random extension från random person på Flashback så återfinns all kod i filter.js.
För att installera, droppa mappen i t ex chrome://extensions efter det att utvecklarläge har satts på. Vet man inte hur man gör något av detta bör man heller inte installera denna beta-extension.
