[review]Google+ website/widget
http://widgetsplus.com/
Paar kleine dingetjes waar je misschien nog wat aan hebt:
- Als ik eenmaal op "Get code" heb gedrukt kan ik niet meer terug. Als ik aan het experimenteren ben hoe de widget staat op m'n blog, is het wel handig om te kunnen kopiëren, kijken hoe het staat, en weer terug te gaan om betere waarden te kiezen.
- Pas als ik een kleur heb aangepast krijgt het veld ook daadwerkelijk die kleur. Het zou overzichtelijker zijn als dat direct bij de standaardwaarden ook al gebeurt.
- Er zit geen ruimte onder de tabel, en nu past hij precies op m'n scherm. Maar zodra ik een van de onderste velden focus geef, komt die color wheel (half) in beeld en moet ik scrollen. Zodra ik dan weer naar een ander veld spring wordt de pagina weer korter en springt de site omlaag. Dat zou makkelijk opgelost kunnen worden door altijd een ruimte van de hoogte van de color wheel onder de tabel vrij te houden.
- De widget zelf is niet helemaal in evenwicht (althans, niet in mijn Google Chrome) Er zit nog teveel ruimte aan de onderkant, tussen de bottom border en de tekst met het aantal cirkels.
- In het stylesheet is in ieder geval de breedte van het h1 element vastgelegd, bij lagere of hogere waarden voor de breedte van je widget gaat het er gek uit zien.
En twijfelachtig, maar dit is hoe ik het zou doen:
- "Add me [del]at[/del] [ins]on[/ins] Google+"
- "Button [del]font[/del] [ins]text[/ins] color"
Hoop dat er snel meer bijkomen.
Offtopic:
Kun je mij geen invite sturen (A) pm me maar als je nog invites over hebt
Gewijzigd op 13/07/2011 11:05:58 door Maikel B
- Je gebruikt voor de colorpicker jQuery. Dit werkt natuurlijk allemaal goed, maar Opera support ook zelf type=color. Dan krijg je een zeer uitgebreide colorpicker. Ook komt dit binnenkort in Chrome. Ik raad dus aan om die te gebruiken en dan vervolgens een fallback naar jQuery. Voorbeeldje:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
var el = document.createElement('input');
el.type = 'color';
if( el.type != 'color' ) {
// color type wordt niet ondersteund
var picker = document.createElement('script');
picker.type = 'text/javascript';
picker.src = 'js/jquery.wheelcolorpicker.min.js';
document.getElementsByTagName('head')[0].appendChild(picker);
$(function() {
$('.colorpicker').wheelColorPicker({dir: './images'});
});
}
}
</script>
var el = document.createElement('input');
el.type = 'color';
if( el.type != 'color' ) {
// color type wordt niet ondersteund
var picker = document.createElement('script');
picker.type = 'text/javascript';
picker.src = 'js/jquery.wheelcolorpicker.min.js';
document.getElementsByTagName('head')[0].appendChild(picker);
$(function() {
$('.colorpicker').wheelColorPicker({dir: './images'});
});
}
}
</script>
Hiermee verhoog je de pagina snelheid wat en maak je het uitgebreider voor je bezoekers die Opera gebruiken. Zodra het color type niet wordt ondersteund wordt het gewoon een type=text en laad je de jQuery weelcolorpicker in en gebruik je die.
- Je hebt je google analytics code bovenin de head staan, ik raad aan deze vlak voor de </body> om verkeerde resultaten te vermijden.
- I.p.v. dit oude google analytics scriptje kun je beter een snellere gebruiken. Scroll daarvoor naar onderen naar de code bij Final result: http://mathiasbynens.be/notes/async-analytics-snippet
- Probeer in je CSS gebruik te maken van shorthand properties. Dit is sneller.
- Zodra je in CSS 0 typed hoeft daar geen eenheid achter, dit maakt je CSS ook sneller.
- Gebruik voor -webkit-gradient ook de nieuwe gradient methode(precies zoals die van Firefox maar dan -webkit- i.p.v. -moz-), maar laat de oude wel staan.
En dan nog even over je design. Het ziet er lekker simpel uit, zoals hoort bij dit soort dingen. Ik heb alleen wel wat puntjes:
- Maak de menu knoppen wat groter, het is echt heel erg zoeken naar het menu.
- Die oranje button met get code vind ik niet echt bij het grijs/blauwe thema passen.
- Wat je nu als hover op de buttons hebt moet je als :active bij de buttons doen. Dit voelt dan veel natuurlijker aan. Bij hover kun je dan bijv. een kleine box-shadow gebruiken.
- In de widget heb je de hover van de button mooi gemaakt, alleen heb je weer geen klik. Bij de klik zou ik het gradient omdraaien.
Gewijzigd op 13/07/2011 11:16:46 door Wouter J
- Je gebruikt features van HTML5 (zoals data- attributen) maar je doctype is nog XHTML. Sowieso staan er nog een aantal fouten in je HTML (zie http://validator.w3.org/check?uri=http%3A%2F%2Fwidgetsplus.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 ).
- Dit is een van de eerste websites die ik hier review waarvan ik het design echt mooi vind. Het ziet er echt goed uit. Wel zou ik de +1, de facebook en twitter iconen links en rechts laten uitlijnen met de erboven staande widget. Dan oogt het ontwerp nog wat rustiger.