1. Temas
Responsáveis
Jackson F.
de A. Mafra

2. Jackson F. de A. Mafra
http://about.me/jacksonfdam
https://bitbucket.org/jacksonfdam
https://github.com/jacksonfdam
http://linkedin.com/in/jacksonfdam
@jacksonfdam

3. Arquitetura
Responsiva

4. Arquitetura Responsiva
O termo Arquitetura responsiva foi dado pelo pesquisador Nicholas
Negroponte que inicialmente concebeu nos anos 1960 durante o design
de espaços onde foram explorados os conceito de cibernética para a
arquitetura.
http://en.wikipedia.org/wiki/File:NNegoponte_USNA_20090415_.jpg

5. Arquitetura responsiva é aquela que as condições do espaço e
ambientes podem mudar e se adaptar a condições pre-definidas ou
desejáveis , por meio de sensores, alterando as características de
forma, cores, espaços e todos os elementos que compõem o espaço
arquitetônico de modo responsivo. Para tal são utilizados sensores e
atuadores robóticos.

6. Webdesign Responsivo
O termo utilizado para definir um web desing responsivo foi criado por
Ethan Marcotte, em seu artigo no site A list apart.
Marcotte consolidou três principais técnicas para este modelo: Layout
fluído, Imagens flexíveis, e Consultas a mídias (Media queries) em uma
abordagem unificada, que o nomeou de web design ágil.
http://www.flickr.com/photos/zeldman/6495074887/

7. Layout fluído
A técnica de layout fluído se baseia em usar valores percentuais ao
invés de absolutos para as tags que delimitam as áreas do site
(div), ou seja, ao invés de declarar a largura do site com valores
absolutos em pixels (px), usamos valores proporcionais em
percentual (%). Desta forma o site e suas subpartes ocuparão uma
área relativa ao tamanho da janela do navegador do usuário.

8. Imagens flexíveis
Tão importante quanto um layout que responda aos diversos
tamanhos de tela. As imagens também devem adaptar-se ao
tamanho de tela do device em que está sendo acessado,
utilizando valores proporcionais em percentual (%).

9. Media queries
São seletores em CSS3 que consulta as mídias do navegador
quando o seu site for acessado. Com as Medias Queries
configuradas, o navegador exibe o layout de acordo com o
dispositivo que está acessando o site, ou seja, o navegador
interpreta o tamanho de tela que foi configurado na media
querie e exibe o layout que foi definido no CSS.

10. Case: skinnyties
http://skinnyties.com/

11. Redimensionar
não é tudo.

12. Prototipar

13. Prototipar

14. Prototipar

15. Como vender o valor do
mobile para seus clientes
smashingmagazine

16. RESPONSABILIDADE
Nossa responsabilidade como profissionais da Web é educar e informar
nossos clientes, para transmitir a eles o valor e a necessidade de dar
suporte aos dispositivos móveis e, para não perdermos aqueles clientes
que valem a pena e aqueles projetos que não queremos dispensar,
criando uma solução que possa atingir seus objetivos dentro de um
orçamento realista.

17. Compreensão
Qualquer recomendação que fizermos para nossos clientes, seja para
ele ter um site responsivo, um site separado para mobile e outro para
desktop, ou não se preocupar com mobile em tudo, deve ser baseada
em uma compreensão das necessidades dos nossos clientes.

18. Ouça
Ouça as necessidades e limitações do seu cliente, e realmente procure
compreender a natureza do seu negócio e da sua situação. Isso deve
ajudar a moldar a sua recomendação. Se você ouvir atentamente, você
também será capaz de determinar a melhor forma de fazer o processo
para incorporar o suporte aos dispositivos móveis em seu projeto de
website.

19. Os principais problemas do design
responsivo ... e como evitá-los!
• Explicando RWD para os clientes
• A falta de uma fase de
concepção estática
• Navegação
• Breakpoints
• Tamanho
• Conteúdo
• Imagens
• Tabelas
• Convertendo antigos locais de
largura fixa
• O que para servir os usuários de
versões antigas do IE
• Tempo de teste e de custo

20. Oferecer o suporte
Como fazer para vender o suporte aos dispositivos móveis para clientes
que se enquadram em uma das quatro categorias possíveis:
• O cliente orientado por dados
• O cliente orientado por concorrentes
• O cliente orientado pelo custo do projeto
• O cliente socialmente consciente.

21. O cliente Orientado por dados
Ao tentar convencer alguém de alguma coisa, dados e estatísticas são
suas ferramentas mais claras e objetivas. Felizmente, a Web é um meio
extremamente mensurável, e existe uma tonelada de dados sobre
comportamento de uso e taxas de aprovação dos usuários.

22. O cliente orientado por concorrentes
O seu cliente chegou até você com um monte de sites de concorrentes
na mão? Você está com sorte. O seu cliente está estabelecendo um
padrão entre outros sites como uma medida de sucesso.
Seu trabalho é definir um padrão que o seu cliente deve aspirar. Faça sua
pesquisa em sites concorrentes mobile-friendly e tente compilar dados e
exemplos que você pode usar para destacar os benefícios de uma
experiência de usuário mais intuitiva e envolvente.

23. O cliente dirigido por custos
Em muitas empresas de pequeno porte, qualquer gasto em marketing
vem direto do bolso do proprietário. Esses reais/dólares são difíceis de
separar. Equipes de marketing em grandes empresas podem estar vendo
os seus orçamentos cortados com base em outras mudanças na sua
indústria ou empresa, ou eles podem estar impossibilitados de pedir mais
fundos, até que entre no orçamento do próximo ano.
Se o custo é realmente um fator importante, que tipo de restrições que
você pode impor sobre o processo de design para manter as coisas sob
controle? Que tipo de ferramentas você pode aproveitar para minimizar
o esforço, e ao mesmo tempo lidar com as necessidades e
posicionamento único do seu cliente?

24. O cliente socialmente consciente
Se o seu cliente valoriza seus esforços em construir sites que são
acessíveis a pessoas com deficiências físicas, considere que o acesso à
Internet está rapidamente se tornando um direito básico e necessidade
na sociedade moderna. Um smartphone Android oferecido por uma
operadora de celular pode ser o mais próximo que chegamos de acesso à
Internet de banda larga universal.

25. “Não importa o
dispositivo e sim
o usuário final”
Horácio Soares

26. A falta de uma fase de
concepção estática
Um dos grandes problemas relatados por designers foi a de que é
necessário uma mudança no processo de design "velho" para tirar o
máximo do design responsivo. Ao invés de criar imagens estáticas, os
designers contam mais do que nunca em esboços rápidos, wireframing e
tornando rápido e protótipos HTML CSS por "projetar" no navegador.

27. Navegação
No passado, a navegação dos sites tendiam a ser horizontal ao longo da
parte superior da página, ou, por vezes, para baixo à esquerda da
página. Ele agora precisa de uma abordagem mais ponderada. É preciso
refletir mais sobre a navegação e não mais usar uma solução enlatada
simples.

28. Imagens
O conjunto de opções disponíveis para manipulação de imagens em
projetos responsivo é extremamente fragmentado. Até agora, o grupo da
comunidade W3C não apoiou uma especificação , por isso ficamos com o
que equivale a uma escolha pessoal de uma vasta gama de scripts para
preencher para essa funcionalidade em falta, e entregar os assets
apropriados para os dispositivos.

29. Imagens
Para complicar ainda mais as coisas, os designers também deve
considerar a próxima geração de dispositivos com alta densidade de
pixels mostra como o novo iPad e Macbook Pro, juntamente com uma
variedade de hardware não-Apple. Como código, imagens e ícones
devem ser tão flexíveis quanto possível para garantir que os gráficos em
dispositivos de alta densidade de pixels não olhar embaçado porque
foram ampliados mal.

30. Breakpoints
Muitos designers desperdiçam tempo em um layout responsivo que é
baseado principalmente em "breakpoints da largura do dispositivo", nas
dimensões de dispositivos pequenos. Tenha em mente, se sua
mentalidade é afixada com dimensão dispositivo, então você não está
falando de um verdadeiro layout responsivo. Layouts responsivos são
aqueles que podem ajustar a qualquer tamanho de tela em que residem.

31. Conteúdo
Muitas vezes, os projetistas ocultar ou descartar o conteúdo do site, a
fim de torná-lo apto para um dispositivo ou menor tamanho de tela. Esta
não é a melhor prática. Os usuários móveis esperam e merecem a
experiência te mesmos usuários de desktop de conteúdo. Se você ocultar
o conteúdo apenas por uma questão de ajustar o tamanho de uma tela
menor, você vai privá-los dessa experiência. Para adquirir paridade
conteúdo, você vai precisar alterar o conteúdo de um site dinamico,
para que ele possa ser visto por todos.

32. Tamanho
Paridade conteúdo não significa inchar seu site com conteúdo
desnecessário ou excessivo a ponto de torná-lo mais lento. Se você olhar
em volta, você vai encontrar muitos sites que possuem arquivos de tal
tamanho que eles se tornam lento. É importante lembrar que mais de
74% dos usuários de celular vai deixar um site que leva mais de 5
segundos para carregar. Portanto, não hesite em cortar conteúdo
supérfluo, enquanto ainda proporcionando uma ótima experiência de
usuário.

33. Tabelas
Tabelas responsivas são problemáticas, particularmente quando elas
contém informação complexa ou simplesmente um grande número de
linhas e colunas. Esmagar todas essas informações em uma tela pequena
de uma forma utilizável continua a ser um desafio que eu não tenho
certeza se foi adequadamente resolvido.

34. Conversão de sites antigos de
largura fixa
Como atualizar o código de um site de largura fixa para torná-lo
responsivo, processo de design responsivo muitas vezes é bastante
diferente do processo antigo projeto de layout fixo, e o código é
projetado de forma menos flexível.
A questão sobre o que fazer quando confrontados com a atualização de
um site antigo é se fazer engenharia reversa de modelos e folhas de
estilo existentes, ou optar por um reconstrução do zero(greenfield
rebuild).

35. Usuários de versões antigas do IE
Trabalhar com versões mais antigas do navegador (IE8 e anteriores), a
questão principal que você vai encontrar é a falta de suporte para
consultas de mídia CSS. Isso significa que se você estiver trabalhando
com uma técnica de mobile-first, como 320andUp , as consultas de mídia
(Media Querys) não vão iniciar e seu layout não será exibido
corretamente em navegadores de desktop, assim você vai efetivamente
acabar com um pequeno layout de tela em uma tela grande.

36. Tempo de testes e custo
Como testar, quais dispositivos para teste, e potencialmente enorme
custo de construção de um conjunto de testes de dispositivos .
Para muitos designers, especialmente freelancers e empresas muito
pequenas, é difícil construir um conjunto de testes muito além dos
dispositivos que você possui pessoalmente. Este deparei com alto e claro
na pesquisa. Muitas pessoas estão fazendo não com a inspeção navegador
e arrastar a janela, juntamente com os testes em um aparelho pessoal e
talvez um tablet. Obviamente, isto não é o ideal. Construindo mesmo
uma modesta coleção de dispositivos é agora uma despesa de negócio
necessário.

37. Tempo de testes e custo
Tempo de teste também é um problema. Embora o tempo necessário
para testar um site tem certamente aumentado,um pouco é compensado
por uma melhor prototipagem, design no navegador e menor
dependência de recursos visuais, de tamanho fixo estáticas.

38. Nunca comprometa
RWD nunca deve ser usado para oferecer uma versão diluída do seu site.
Em alguns casos, você deve considerar instalações adicionais em
dispositivos móveis, como geo-localização e suporte off-line. Mantenha-o
simples e fácil de usar:
• não usar o navegador sniffing
• não desativar o zoom
• não ocultar o conteúdo.

39. Só importa Desempenho
RWD pode ser barato de implementar, mas que deve ser planejada desde
o início. Aplicando RWD para um local que serve 1Mb páginas + nunca irá
resultar em uma experiência melhor em dispositivos que operam em uma
rede móvel.
Responsive Web Design é uma das tecnologias mais importantes a
aparecer nos últimos anos. Mas o uso de RWD mal pode ser pior do que
não oferecê-lo em tudo.

40. Adotandar um Tema WordPress
Responsivo é mais do que Install-and-go

41. Pensar além do tema
Tendo um tema responsivo não garante uma boa experiência do usuário
móvel.

42. A funcionalidade mobile
mais importante
A mais importante funcionalidade do seu
site para um usuário mobile é
performance.

43. Por onde começar?
Escolher uma framework ou não?
Boilerplate?
Tema em branco, partir do zero, comprar?

44. Temas, onde encontrar?
ThemeForest
http://themeforest.net/search?utf8=
%E2%9C%93&term=Responsive+WordPr
ess+themes
Elegant Themes
http://www.elegantthemes.com/gall
ery/category/responsive/

45. WooThemes
http://www.woothemes.com/product-
category/themes/?prod_cat[]=1051&s=&
post_type=product
StudioPress
http://www.studiopress.com/responsiv
e-wordpress-themes
Temas, onde encontrar?

46. Mojo Themes
http://www.mojo-
themes.com/categories/wordpress/r
esponsive-wordpress/
Theme Trust
http://themetrust.com/themes
Temas, onde encontrar?

47. Plugins, onde encontrar?
WordPress Mobile Pack
http://wordpress.org/extend/plugins
/wordpress-mobile-
pack/other_notes/
WPtouch Pro
http://www.bravenewcode.com/prod
uct/wptouch-pro/

48. Performance
1 – Habilite GZIP
2 – Minifique JavaScript
3 – Minifique CSS
4 – Comprima o HTML
5 – Não redimensione imagens no HTML
6 – Otimize as imagens
7 – Pense no formato das imagens
8 – Diminua cookies e headers
9 – Junte arquivos JavaScript
10 – Juntar arquivos CSS
11 – Use Sprites
12 – Use Data URIs
13 – Configure os headers
14 – Tire firulas do design
15 – Especifique o tamanho das imagens
16 – Coloque o JavaScript no fim
17 – Coloque o CSS no topo
18/ 19 – Adie o carregamento do que puder e
Abuse do carregamento assíncrono
20 – Otimize o First-View e o Above the Fold
Time
21 – Design performático
22 – Automatize
23 – Use ferramentas de diagnóstico
24 – Pré-carregue componentes
25 – Escreva código eficiente
26 – Dispare logo o onload

49. Plugins - Javascript
• jQuery Slider
• Easy Navigation
• Contact Form
• Responsive Layout
• Filterable Portfolio
• Google Maps com Zoom
• ScrollTo
• modernizr
• jQuery Masonry
• HTML5 Shiv
• jquery.rs.carousel.js
• mousewheel
• prettyPhoto
• jquery easing
• jquery event drag
• jScrollPane

50. Criando
1. Criar um tema Pai
2. Criar um tema filho
3. Cuidar com as Sidebars e Widgets
4. Cuidar com menus de navegação
5. Cuidar com a Paginação

51. Style – Child Theme
/*
Theme Name: Duogramma - Child Theme
Theme URI: http://duogramma.com/
Description: Tema Filho do Tema Principal
Author: Jackson F. de A. Mafra
Author URI: http://duogramma.com
Template: duogramma
Version: 0.1.0
*/
@import url("../duogramma/style.css");

52. Style – Child Theme
@media screen and (max-width:480px) {
/* Making the headings red for smartphone users */
h1 {
color: red;
}
}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Making the headings Black targeting PC Users */
h1 {
color:green;
}
}
@media screen and (min-width:1281px) {
/* Making the headings red for smartphone users */
h1 {
color: black;
}
}

53. Script
<?php
function responsive_scripts_basic() {
//first we must register the responsive framework's scripts
wp_register_script('foundation-modernizr', get_template_directory_uri() .
'/js/modernizr.foundation.js', array( 'jquery' ), true );
wp_register_script('foundation-main', get_template_directory_uri() . '/js/foundation.js', true
);
wp_register_script('foundation-app', get_template_directory_uri() . '/js/app.js', true );
//next, we enqueue the script so it gets placed into the theme's header
wp_enqueue_script( 'foundation-modernizr' );
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'foundation-app' );
}
add_action( 'wp_enqueue_scripts', 'foundation_javascript_inclusion', 5 );

54. Style
<?php
function responsive_styles() {
//register styles for our theme
wp_register_style( 'foundation-stylesheet', get_template_directory_uri() .
'/css/foundation.css', array(), 'all' );
wp_register_style( 'foundation-app-stylesheet', get_template_directory_uri() . '/css/app.css',
array(), 'all');
wp_enqueue_style( 'foundation-stylesheet' );
wp_enqueue_style( 'foundation-app-stylesheet' );
}
add_action( 'wp_enqueue_scripts', 'foundation_stylesheet_inclusion' );

55. Ferramentas
• http://mediaqueri.es/
• http://zurb.com/playground/responsive-sketchsheets
• http://cferdinandi.github.io/kraken/
• http://responsivehero.com/
• https://jetstrap.com/
• http://underscores.me/
• http://froont.com/
• http://pxtoem.com/
• http://www.layoutit.com/
• https://quirktools.com/screenfly/

56. Fontes
 Sergio Lopes - http://sergiolopes.org/palestra-mobile-
web/#slide-capa
 Ethan Marcotte -
http://www.abookapart.com/products/responsive-web-
design
 Luke Wroblewski -
http://www.abookapart.com/products/mobile-first
 Smashing Magazine -
http://www.smashingmagazine.com/
 Brad Frost - http://bradfrostweb.com/
 Steve Souders - http://www.stevesouders.com/blog/
 Brendan Eich – http://brendaneich.com

57. Fontes
 Paul Kinlan – http://paul.kinlan.me/
 Arquitetura de Informacao -
http://arquiteturadeinformacao.com/2012/07/22/5-
coisas-que-aprendi-em-um-projeto-mobile-first-
responsive-design-para-o-google/
 Mobile book - Smash Magazine -
https://shop.smashingmagazine.com/the-mobile-book-
deluxe-bundle.html
 http://wp.smashingmagazine.com/2012/07/26/adoptin
g-responsive-wordpress-theme/

58. Obrigado