O documento discute princípios de design mobile e web, incluindo a abordagem "mobile first" onde a versão móvel é desenvolvida primeiro com funcionalidades essenciais e depois expandida para desktop. Também apresenta exemplos de sites que adotaram essa abordagem e discute sistemas de gerenciamento de conteúdo.

1. Fundamentos de webdesign,
tecnologia e ubiquidade
22 de abril de 2015

2. Mobilidade
Renato Cruz – Senac2
 Os princípios básicos da usabilidade nos smartphones são os
mesmos.
 As pessoas tendem a fazer as coisas mais rapidamente e a ler ainda
menos em telas pequenas.
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.

3. Mobile First
Renato Cruz – Senac3
 No lugar de criar primeiro uma versão completa do website, para
depois reduzi-la, você cria a versão móvel com o que considera
essencial para o seu usuário.
 Depois, acrescenta conteúdos e funcionalidades para a versão
desktop.
 É errado achar que toda vez que o usuário acessa a versão móvel,
ele está realmente em movimento.
 Ele pode acessar a versão móvel com tranquilidade, sentado no sofá
da sala à noite.
Fonte: KRUG, Steve. Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. San Francisco: New Riders, 2013.

4. Novo site da Wired
Renato Cruz – Senac4
“Com a fundação do site agora sólida, nossas equipes
editorial, de design, de engenharia e de produto
começaram a redesenhá-lo para a tela mais importante
da sua vida – seu smartphone. (…) Escolhemos um
tema baseado em cartões, tanto pela flexibilidade
quanto pela configurabilidade.
Uma vez definindo o design, encontramos maneiras de
expandi-lo para outras telas – desktop, laptop, tablet e
qualquer outro lugar em que você acessa a Wired”
– Scott Dadich, editor da Wired

5. Wired.com
Renato Cruz – Senac5

6. CMS
Renato Cruz – Senac6
 Os sistemas de gerenciamento de conteúdo (CMS,
na sigla em inglês) permitem publicar, editar e
modificar conteúdo a partir de uma interface
central.
 Eles servem para gerenciar o fluxo de trabalho
num ambiente colaborativo.
 São a base de blogs e sites de notícias e compras,
entre outros.

7. Algumas opções
Renato Cruz – Senac7
Drupal Joomla WordPress
• Ferramenta para
desenvolver sites mais
sofisticados, com
sistema avançado de
tags;
• Exige mais
conhecimento técnico do
usuário.
• Tem um nível
intermediário de
complexidade;
• Foi criado como
plataforma de
comunidades.
• É mais simples de usar
que os outros dois
sistemas;
• Nasceu como uma
ferramenta para blogs,
mas evoluiu para outros
tipos de sites.
 The Weather Channel
 The Beatles
 University of Oxford
 Leonardo Di Caprio
 GE Transportation
 Peugeot
 TechCrunch
 Open.Nasa
 The Rolling Stones