Tips en trucs

Gepubliceerd: 28 februari 2014

Verbeter de gebruikerservaring van uw applicatie met de volgende tips.

Flikkert wanneer de applicatie wordt geladen

Ooit een zwart-witflits opgemerkt wanneer een applicatie wordt geladen met een WebView? Dit kan worden veroorzaakt door het laden van de vensterachtergrondkleur van de app, die meestal in het thema is ingesteld, gevolgd door de witte flits van de WebView-achtergrond. Dit gebeurt voordat WebView inhoud laadt, inclusief de CSS.

Om de witte flits te verwijderen, stelt u de achtergrondkleur van de WebView in. De enige vertraging bij het weergeven van deze kleur is het tekenen van de WebView in de mobiele app.

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

Op Android is het een goede gewoonte om kleurwaarden te definiëren in een bestand res/values/colors.xml , zoals beschreven in de Android App Resource guide . Als u een kleur kiest die is gedefinieerd in de bronnen van de toepassing, kan de code er als volgt uitzien:

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

Raak feedback aan

Een verschil tussen mobiele en webapplicaties is het gebrek aan aanraakfeedback in veel webapps.

Om dit probleem op te lossen, gebruikt u de :active pseudo-klasse.

Als u bijvoorbeeld een knop heeft met de volgende stijl:

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

De ingedrukte toestand kan er als volgt uitzien:

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

Hierdoor worden de achtergrondkleur en randkleur iets donkerder, en wordt de rand kleiner, zodat het lijkt alsof de knop in de pagina wegzakt. De top eigenschap past de positie aan om de kleinere rand in evenwicht te brengen.

Als u Sass gebruikt, kunt u de mixins donkerder en lichter gebruiken om de kleuren van elementen te wijzigen zonder dat u de exacte hexadecimale waarde hoeft te weten. Of u kunt gebruik maken van online tools zoals hexcolortool.com .

Systeem hoogtepunten

Veel user agents voegen een vorm van aanraakfeedback toe aan elementen, waardoor het niet meer nodig is om specifieke stijlen te definiëren. In de WebView ziet u mogelijk een oranje kleur op elementen of een oranje ring rond links en elementen.

Als u aangepaste aanraak- en focusfeedback toevoegt, kunt u de standaardinstellingen overschrijven met de volgende CSS-eigenschappen:

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

En stel je eigen kleuren in:

button {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}

button:focus {
  background-color: #E68F05;
  border-color: #DA8300;
}

button:active {
  background-color: #FFA91F;
  border-color: #E68F05;
}

Hierdoor wordt de kleur van de knop gewijzigd op basis van de status, inclusief een standaard-, focus- en actieve (of "ingedrukte") status.

Overweeg om naast knoppen ook deze eigenschappen in te stellen voor invoervelden en ankertags.