Responsive wordpress

  • 1,580 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,580
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
62
Comments
0
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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."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."
  • A List ApartUso das CSS Media Queries em 2010RWD – Responsive Web Designhttp://www.alistapart.com/articles/responsive-web-design/
  • Uso de GridsLarguras em "%". Textos em "em".
  • 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 <head> of your site.Add your CSS Media Query values into $resolutions in the PHP file.OUhttp://wil.to/picturefill/Uso da tag <picture> com polyfill baseado nos elementos source usando os atributos media e srcset.
  • 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
  • http://mediaqueri.es/http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquidohttp://www.abookapart.com/products/mobile-first/
  • 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.
  • http://www.searchenginejournal.com/wordpress-responsive-design-layout-that-fits-all-screens/64949/http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation
  • 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/
  • http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
  • 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's Michael Mesker - http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  • 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
  • Pseudoseletores:http://selectivizr.com/--https://github.com/scottjehl/RespondOUhttps://code.google.com/p/css3-mediaqueries-js/<!-- css3-mediaqueries.js for IE less than 9 --> <!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->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)
  • http://codex.wordpress.org/pt-br:Temas_Filhos

Transcript

  • 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