SlideShare uma empresa Scribd logo
1 de 58
Temas
Responsáveis
Jackson F.
de A. Mafra
Jackson F. de A. Mafra
http://about.me/jacksonfdam
https://bitbucket.org/jacksonfdam
https://github.com/jacksonfdam
http://linkedin.com/in/jacksonfdam
@jacksonfdam
Arquitetura
Responsiva
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
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.
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/
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.
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 (%).
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.
Case: skinnyties
http://skinnyties.com/
Redimensionar
não é tudo.
Prototipar
Prototipar
Prototipar
Como vender o valor do
mobile para seus clientes
smashingmagazine
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.
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.
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.
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
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.
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.
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.
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?
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.
“Não importa o
dispositivo e sim
o usuário final”
Horácio Soares
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
Adotandar um Tema WordPress
Responsivo é mais do que Install-and-go
Pensar além do tema
Tendo um tema responsivo não garante uma boa experiência do usuário
móvel.
A funcionalidade mobile
mais importante
A mais importante funcionalidade do seu
site para um usuário mobile é
performance.
Por onde começar?
Escolher uma framework ou não?
Boilerplate?
Tema em branco, partir do zero, comprar?
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/
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?
Mojo Themes
http://www.mojo-
themes.com/categories/wordpress/r
esponsive-wordpress/
Theme Trust
http://themetrust.com/themes
Temas, onde encontrar?
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/
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
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
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
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");
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;
}
}
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 );
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' );
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/
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
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/
Obrigado

Mais conteúdo relacionado

Mais procurados

UX: Creating Killer Experiences - FIAP
UX: Creating Killer Experiences - FIAPUX: Creating Killer Experiences - FIAP
UX: Creating Killer Experiences - FIAPAlexandre Tarifa
 
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceEvento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceImpacta Eventos
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframeFabricio Teixeira
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEOEdu Agni
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designerJonathan Prateat
 
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp..."Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...EDIT. - Disruptive Digital Education
 
Capitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenCapitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenLuiz Agner
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialAna Paula Batista
 
Empreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintEmpreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintAna Paula Batista
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Luisa Ambros
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...Nelson Vasconcelos
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Juliana Gaiba
 
Responsive Design - Responsive UX Strategy
Responsive Design - Responsive UX StrategyResponsive Design - Responsive UX Strategy
Responsive Design - Responsive UX StrategycomOn Group
 
Onboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson VasconcelosOnboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson VasconcelosNelson Vasconcelos
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014Horácio Soares
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosPriscilla Albuquerque
 

Mais procurados (20)

UX: Creating Killer Experiences - FIAP
UX: Creating Killer Experiences - FIAPUX: Creating Killer Experiences - FIAP
UX: Creating Killer Experiences - FIAP
 
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceEvento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designer
 
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp..."Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
 
Capitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenCapitulo 11 Livro Nielsen
Capitulo 11 Livro Nielsen
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo material
 
Empreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintEmpreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design Sprint
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
 
Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012 Como não ferrar com a user experience - Campus Party 2012
Como não ferrar com a user experience - Campus Party 2012
 
Responsive Design - Responsive UX Strategy
Responsive Design - Responsive UX StrategyResponsive Design - Responsive UX Strategy
Responsive Design - Responsive UX Strategy
 
Onboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson VasconcelosOnboarding: Uma questão de sobrevivência - Nelson Vasconcelos
Onboarding: Uma questão de sobrevivência - Nelson Vasconcelos
 
UX para Startups
UX para StartupsUX para Startups
UX para Startups
 
LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014LEAN UX - Campus Party 2014
LEAN UX - Campus Party 2014
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
 

Semelhante a Responsive wordpress

Semelhante a Responsive wordpress (20)

O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projeto
 
Ap iii
Ap iiiAp iii
Ap iii
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Dream 02
Dream 02Dream 02
Dream 02
 
Dream 02
Dream 02Dream 02
Dream 02
 
RPC.com.br - Produto
RPC.com.br - ProdutoRPC.com.br - Produto
RPC.com.br - Produto
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Sites responsivos
Sites responsivosSites responsivos
Sites responsivos
 
Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02
 
O Arquiteto da Informacao
O Arquiteto da Informacao O Arquiteto da Informacao
O Arquiteto da Informacao
 
Modelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_websiteModelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_website
 
Modelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo WebsiteModelo Planejamento Digital Interativo Website
Modelo Planejamento Digital Interativo Website
 

Mais de Jackson F. de A. Mafra

PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...
PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...
PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...Jackson F. de A. Mafra
 
Phprs meetup - deploys automatizados com gitlab
Phprs   meetup - deploys automatizados com gitlabPhprs   meetup - deploys automatizados com gitlab
Phprs meetup - deploys automatizados com gitlabJackson F. de A. Mafra
 
O que você precisa saber sobre chatbots
O que você precisa saber sobre chatbotsO que você precisa saber sobre chatbots
O que você precisa saber sobre chatbotsJackson F. de A. Mafra
 
WCPOA2019 - WordPress como um backend de seus aplicativos
WCPOA2019  - WordPress como um backend de seus aplicativosWCPOA2019  - WordPress como um backend de seus aplicativos
WCPOA2019 - WordPress como um backend de seus aplicativosJackson F. de A. Mafra
 
WordPress como um backend de seus aplicativos
WordPress como um backend de seus aplicativosWordPress como um backend de seus aplicativos
WordPress como um backend de seus aplicativosJackson F. de A. Mafra
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressJackson F. de A. Mafra
 
Precisamos de um barco maior introdução ao dimensionamento de aplicações
Precisamos de um barco maior introdução ao dimensionamento de aplicaçõesPrecisamos de um barco maior introdução ao dimensionamento de aplicações
Precisamos de um barco maior introdução ao dimensionamento de aplicaçõesJackson F. de A. Mafra
 
Hangout Tempo Real Eventos - ChatOps (ChatBots e DevOps) - Como bots podem ...
Hangout  Tempo Real Eventos - ChatOps (ChatBots e DevOps)  - Como bots podem ...Hangout  Tempo Real Eventos - ChatOps (ChatBots e DevOps)  - Como bots podem ...
Hangout Tempo Real Eventos - ChatOps (ChatBots e DevOps) - Como bots podem ...Jackson F. de A. Mafra
 
Hangout Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...
Hangout  Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...Hangout  Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...
Hangout Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...Jackson F. de A. Mafra
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros PassosJackson F. de A. Mafra
 
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
Hangout  Tempo Real Eventos - Nodejs - Os Primeiros PassosHangout  Tempo Real Eventos - Nodejs - Os Primeiros Passos
Hangout Tempo Real Eventos - Nodejs - Os Primeiros PassosJackson F. de A. Mafra
 
Conexao kinghost - Vendas inteligentes com intelibots
Conexao kinghost - Vendas inteligentes com intelibotsConexao kinghost - Vendas inteligentes com intelibots
Conexao kinghost - Vendas inteligentes com intelibotsJackson F. de A. Mafra
 
Phalcon 2 High Performance APIs - DevWeekPOA 2015
Phalcon 2 High Performance APIs - DevWeekPOA 2015Phalcon 2 High Performance APIs - DevWeekPOA 2015
Phalcon 2 High Performance APIs - DevWeekPOA 2015Jackson F. de A. Mafra
 
TDC 2015 - POA - Trilha PHP - Shit Happens
TDC 2015 - POA - Trilha PHP - Shit HappensTDC 2015 - POA - Trilha PHP - Shit Happens
TDC 2015 - POA - Trilha PHP - Shit HappensJackson F. de A. Mafra
 

Mais de Jackson F. de A. Mafra (20)

PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...
PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...
PHP Conference 2020 - A eterna luta: compatibilidade retroativa vs. dívida té...
 
PHP SSO no Zentyal
PHP SSO no ZentyalPHP SSO no Zentyal
PHP SSO no Zentyal
 
Phprs meetup - deploys automatizados com gitlab
Phprs   meetup - deploys automatizados com gitlabPhprs   meetup - deploys automatizados com gitlab
Phprs meetup - deploys automatizados com gitlab
 
O que você precisa saber sobre chatbots
O que você precisa saber sobre chatbotsO que você precisa saber sobre chatbots
O que você precisa saber sobre chatbots
 
WCPOA2019 - WordPress como um backend de seus aplicativos
WCPOA2019  - WordPress como um backend de seus aplicativosWCPOA2019  - WordPress como um backend de seus aplicativos
WCPOA2019 - WordPress como um backend de seus aplicativos
 
WordPress como um backend de seus aplicativos
WordPress como um backend de seus aplicativosWordPress como um backend de seus aplicativos
WordPress como um backend de seus aplicativos
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
Precisamos de um barco maior introdução ao dimensionamento de aplicações
Precisamos de um barco maior introdução ao dimensionamento de aplicaçõesPrecisamos de um barco maior introdução ao dimensionamento de aplicações
Precisamos de um barco maior introdução ao dimensionamento de aplicações
 
Hangout Tempo Real Eventos - ChatOps (ChatBots e DevOps) - Como bots podem ...
Hangout  Tempo Real Eventos - ChatOps (ChatBots e DevOps)  - Como bots podem ...Hangout  Tempo Real Eventos - ChatOps (ChatBots e DevOps)  - Como bots podem ...
Hangout Tempo Real Eventos - ChatOps (ChatBots e DevOps) - Como bots podem ...
 
Hangout Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...
Hangout  Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...Hangout  Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...
Hangout Tempo Real Eventos - Android - Os primeiros passos do desenvolviment...
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
 
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
Hangout  Tempo Real Eventos - Nodejs - Os Primeiros PassosHangout  Tempo Real Eventos - Nodejs - Os Primeiros Passos
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
 
Desmistificando o DialogFlow
Desmistificando o DialogFlowDesmistificando o DialogFlow
Desmistificando o DialogFlow
 
ChatOps (ChatBots + DevOps)
ChatOps (ChatBots + DevOps) ChatOps (ChatBots + DevOps)
ChatOps (ChatBots + DevOps)
 
Conexao kinghost - Vendas inteligentes com intelibots
Conexao kinghost - Vendas inteligentes com intelibotsConexao kinghost - Vendas inteligentes com intelibots
Conexao kinghost - Vendas inteligentes com intelibots
 
WoMakersCode 2016 - Shit Happens
WoMakersCode 2016 -  Shit HappensWoMakersCode 2016 -  Shit Happens
WoMakersCode 2016 - Shit Happens
 
Phalcon 2 High Performance APIs - DevWeekPOA 2015
Phalcon 2 High Performance APIs - DevWeekPOA 2015Phalcon 2 High Performance APIs - DevWeekPOA 2015
Phalcon 2 High Performance APIs - DevWeekPOA 2015
 
Dev Heroes
Dev HeroesDev Heroes
Dev Heroes
 
Trilha Android - Android Evolved
Trilha Android - Android EvolvedTrilha Android - Android Evolved
Trilha Android - Android Evolved
 
TDC 2015 - POA - Trilha PHP - Shit Happens
TDC 2015 - POA - Trilha PHP - Shit HappensTDC 2015 - POA - Trilha PHP - Shit Happens
TDC 2015 - POA - Trilha PHP - Shit Happens
 

Responsive wordpress

  • 2. Jackson F. de A. Mafra http://about.me/jacksonfdam https://bitbucket.org/jacksonfdam https://github.com/jacksonfdam http://linkedin.com/in/jacksonfdam @jacksonfdam
  • 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.
  • 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?
  • 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/

Notas do Editor

  1. Design Responsivo x AdaptativoUma versãoqueflui de acordo com o deviceUma versãoespecificaparacada device (desktop, tablet, smartphone)http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.phpCOMO O DESIGN RESPONSIVO É VISTO PELOS BUSCADORESO design responsivo já é defendida por muitos já faz algum tempo, mas só recentemente começou a ganhar destaque depois que o Google confirmou indiretamente que para a área de SEO (otimização para buscadores) o design responsivo é o mais indicado. É mais fácil para o Google perceber que o www.exemplodesite.com.br tem um layout que se adapta a qualquer tela do que entender que o www.outroexemplo.com.br, o m.outroexemplo.com.br e o tablet.outroexemplo.com.br são todos o mesmo sites e não estão apenas copiando conteúdo um do outro.&quot;Google recomenda que os webmasters sigam a melhor prática da indústria usando design responsivos, oferecendo o mesmo código HTML para todos os dispositivos e usando apenas media queries de CSS para decidir como a informação deve ser renderizada.&quot;
  2. A List ApartUso das CSS Media Queries em 2010RWD – Responsive Web Designhttp://www.alistapart.com/articles/responsive-web-design/
  3. Uso de GridsLarguras em &quot;%&quot;. Textos em &quot;em&quot;.
  4. Nãoadiantaredimensionar a imagem, se ela continua com mais de 5mb e o usuárioestana 3G/2G.Video – Responsivo.Uso do http://adaptive-images.com/Add .htaccess and adaptive-images.php to your document-root folder.Add one line of JavaScript into the &lt;head&gt; of your site.Add your CSS Media Query values into $resolutions in the PHP file.OUhttp://wil.to/picturefill/Uso da tag &lt;picture&gt; com polyfill baseado nos elementos source usando os atributos media e srcset.
  5. Uso de Media Queries érecomendacaodesde 19 de junho de 2012 - http://www.w3.org/TR/css3-mediaqueries/http://responsive.is/typecast.comÉ preciso escolher os melhores breakpoints“Breakpoints” são as larguras de tela (em pixels) onde o site começa a se transformar e adicionar conteúdo extra dependendo do dispositivo onde você está navegando. Por exemplo: a partir dos 410px de largura, entendemos que o usuário não está mais navegando em um smartphone no modo “retrato”, e sim no modo “paisagem”. E então servimos a ele um conteúdo e uma interface específica para aquele tipo de navegação.MobileMobile LandscapeTabletTablet LandscapeDesktop
  6. http://mediaqueri.es/http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquidohttp://www.abookapart.com/products/mobile-first/
  7. Sóusar media-queries e trocar tudopraporcentagem no cssnãovaifazer a aplicaçãoserresponsivaouter a melhorexperienciapara o usuário.Existemvarios outros desafios. O queimportaé o conteúdo. Fazer um car sort, com usuarios e designers e ver o queéimportante, o quedeveaparecerounão.Analisar a persona, qual o goal de cada um.
  8. http://www.searchenginejournal.com/wordpress-responsive-design-layout-that-fits-all-screens/64949/http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation
  9. https://codeinbrasil.wordpress.com/2013/05/08/como-vender-o-valor-do-mobile-para-seus-clientes/http://www.smashingmagazine.com/2013/04/05/how-to-sell-the-value-of-mobile-to-clients/
  10. http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
  11. Responsive navigation patterns, by Brad Frost - http://bradfrostweb.com/blog/web/responsive-nav-patterns/We need a standard show navigation icon for navigation, by Andy Clarke - http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design Don’t let your menu take over, by Stu Robson - http://alwaystwisted.com/post.php?s=2011-02-20-dont-let-your-menu-take-overScalable navigation patterns in responsive web design, by Palantir&apos;s Michael Mesker - http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  12. Responsive Tables, from Zurb - http://www.zurb.com/playground/responsive-tablesResponsive Tables, from David Bushell - http://dbushell.com/2012/01/05/responsive-tables-2/Break a table out of its container - http://jsbin.com/apane6/14
  13. Pseudoseletores:http://selectivizr.com/--https://github.com/scottjehl/RespondOUhttps://code.google.com/p/css3-mediaqueries-js/&lt;!-- css3-mediaqueries.js for IE less than 9 --&gt; &lt;!--[if lt IE 9]&gt;&lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;It doesn’t work on @import’edstylesheetsWrite media query with following way@media screen and (min-width: 980px){ /* CSS Document */}Use keyword ‘and’ in query (‘or’ is not supported)
  14. http://codex.wordpress.org/pt-br:Temas_Filhos