responsive wordpress

Temas Responsávei

s Jackson F. de A. Mafra

Jackson F. de A. Mafrahttp://about.me/jacksonfdam

https://bitbucket.org/jacksonfdamhttps://github.com/jacksonfdam

http://linkedin.com/in/jacksonfdam@jacksonfdam

Arquitetura Responsiva

Arquitetura ResponsivaO 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 ResponsivoO 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ídoA 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íveisTã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 queriesSã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

Como vender o valor

do mobile para seus

clientessmashingmagazine

RESPONSABILIDADENossa 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ãoQualquer 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çaOuç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 suporteComo 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

concorrentesO 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 custoComo 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 custoTempo 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 comprometaRWD 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 DesempenhoRWD 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 temaTendo um tema responsivo não garante uma boa experiência do

usuário móvel.

A funcionalidade

mobile mais

importanteA 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?

ThemeForesthttp://themeforest.net/search?utf8=%E2%9C%93&term=Responsive+WordPress+themes

Elegant Themeshttp://www.elegantthemes.com/gallery/category/responsive/

WooThemeshttp://www.woothemes.com/product-category/themes/?prod_cat[]=1051&s=&post_type=product

StudioPresshttp://www.studiopress.com/responsive-wordpress-themes


Mojo Themeshttp://www.mojo-themes.com/categories/wordpress/responsive-wordpress/

Theme Trusthttp://themetrust.com/themes


Plugins, onde encontrar?

WordPress Mobile Packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack/other_notes/

WPtouch Prohttp://www.bravenewcode.com/product/wptouch-pro/

Performance1 – 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 Pai2. Criar um tema filho

3. Cuidar com as Sidebars e Widgets4. Cuidar com menus de navegação

5. Cuidar com a Paginação

Style – Child Theme/*Theme Name: Duogramma - Child ThemeTheme URI: http://duogramma.com/Description: Tema Filho do Tema PrincipalAuthor: Jackson F. de A. MafraAuthor URI: http://duogramma.comTemplate: duogrammaVersion: 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 scriptswp_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 headerwp_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 themewp_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/adopting-responsive-wordpress-theme/

Obrigado

responsive wordpress

Documents