Duda: ¿Unificar version mobile y desktop en una sóla?

Hola ximebcn

Te recomiendo implementar Bootstrap, es un framework desarrollado por Twitter para crear interfaces y diseños web responsive.

Saludos

Hacer clic para expandir...

jonay dijo:

Yo no estoy de acuerdo.

Es mucho mejor una versión movil que una plantilla responsive... en una plantilla responsive no puedes quitar elementos que no te sirven en movil/tablet solo ocultarlo, por lo tanto seguirán ahí haciendo cargar más la página en esos dispositivos a lo tonto, en cambio en una versión móvil puedes hacer la plantilla con lo justo y necesario.

OJO por lo que te he leído tienes que meter contenido en ambas webs, lo que tendrías que hacer es una versión móvil que utilice la misma base de datos de contenido que la versión PC, solo cambiaría la plantilla y el subdominio, asi no tendrías que actualizar dos webs, es lo que yo hago.

Creé un plugin que detecta móvil/tablet y les cambia el theme de wordpress (que en mi caso es el CMS que utilizo) por otro que creé mucho mas simple pero manteniendo la misma base de datos (contenido), no hago el doble de trabajo y tiene buenos resultados.

Sobre eso que dices que a google no le gustan las versiones móviles, yo no estoy tan seguro de que google no le guste las versiones moviles, eso si... las versiones moviles bien hechas, con el mismo contenido indicando con un rel canonical cual es la url original y demás... bajo mi experiencia me ha ido mejor así que con una versión responsive que bajo mi punto de vista tardará mas en cargar por muy responsive que sea. :encouragement:

Hacer clic para expandir...

ximebcn dijo:

En ello estoy. Es impresionante lo que puede hacerse con eso, especialmente para programadores "tocho" como yo que tenemos pocas aptitudes de cara al diseño. Gracias por el consejo.

- - - Actualizado - - -



Podría decirse que tu y yo estamos en una situación similar, salvo que yo uso un dominio diferente para cada versión y me parece entender que tu cambias el template, entiendo que con las mismas urls.

He leído esto https://developers.google.com/webmasters/smartphone-sites/details?hl=es, donde dice que se prefieren las versiones responsivas (receptivas)

Cito:
Google admite sitios optimizados para smartphones en tres configuraciones:

Sitios que usan un diseño web receptivo, es decir, sitios que publican el mismo conjunto de URL en todos los dispositivos y donde cada URL muestra el mismo HTML a todos los dispositivos usando solo CSS para cambiar la forma en que la página aparece en el dispositivo. Esta es la configuración recomendada por Google.
Sitios que publican de forma dinámica en todos los dispositivos con el mismo conjunto de URL, pero en los que cada URL muestra distintos HTML (y CSS) en función de si el user-agent es un equipo de escritorio o un dispositivo móvil.
Sitios que tienen URL para móviles y otras distintas para equipos de escritorio.


En mi opinión, tarde o temprano acabaremos todos con diseños responsivos, y ese es el motivo por el estoy dudando si dar el paso. La duda es si a corto plazo puedo perder algo.

Hacer clic para expandir...

pulga91 dijo:

Yo voy mas por la version responsive, ya que solo tienes que editar un solo archivo css para realizar cambios en ese aspecto, por otra parte si tienes algun codigo que no quieres que se cargue en la version de escritorio o vicecersa, Wordpress integra una funcion
Digamos que si en la version de escritorio quiero que aparezca adsense y en la movil no, utilizo lo siguiente:

Insertar CODE, HTML o PHP:

<?php
if ( wp_is_mobile() ) {
echo '';
} else {
echo '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="xxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
';
}
?>

Por otra parte si utilizas por ejemplo la galeria de jetpack, existe un plugin que la desactiva en dispositivos moviles.
Lo que podria recomendar en que en lugar de hacer uso de scripts para cosas sencillas como los botones de redes sociales se utilice codigo html y css si lo prefieres
En cuanto a los botones de compartir de igual manera, existen generadores de estos botones: Simple Sharing Buttons Generator by @fourtonfish

El resultado seria algo similar a esto:

Insertar CODE, HTML o PHP:

<ul class="share-buttons">
	<li><a rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" ><img src="http://forobeta.com/images/color/Facebook.png"></a></li>
	<li><a rel="nofollow" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="http://forobeta.com/images/color/Twitter.png"></a></li>
	<li><a rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="http://forobeta.com/images/color/Google+.png"></a></li>
<li><a rel="nofollow" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank" rel="nofollow" title="Compartir en Pinterest"onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="http://forobeta.com/images/color/Pinterest.png"></a></li>
	<li><a rel="nofollow" href="http://www.tumblr.com/share?v=3&u=<?php echo urlencode(get_permalink()) ?>&t=<?php the_title(); ?>" target="_blank" rel="nofollow" title="Compartir en Tumblr" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="http://forobeta.com/images/color/Tumblr.png"></a></li>
</ul>

Utilizar un codigo php y css para generar los post relacionados, evitando el uso de javascript

ejemplo:

Insertar CODE, HTML o PHP:

<div class="relatedposts clearfix">  
<?php  
    $orig_post = $post;  
    global $post;  
    $tags = wp_get_post_tags($post->ID);  
  
    if ($tags) {  
    $tag_ids = array();  
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;  
    $args=array(  
    'tag__in' => $tag_ids,  
    'post__not_in' => array($post->ID),  
    'posts_per_page'=>3, // Number of related posts to display.  
    'caller_get_posts'=>1  
    );  
  
    $my_query = new wp_query( $args );  
  
    while( $my_query->have_posts() ) {  
    $my_query->the_post();  
    ?>  
  
    <div class="relatedthumb">  
        <a rel="nofollow" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,150), array("class" => "alignleft post_thumbnail photo", 'title' => get_the_title())); ?><br />  
        <?php the_title(); ?>  
        </a>  
    </div>  
  
    <? }  
    }  
    $post = $orig_post;  
    wp_reset_query();  
    ?>  
</div>

Actualmente yo estoy utilizando esto en mis sitios con SSL, utilizando scripts en la menor manera posible, optimizando desde el lado del servidor con mod_pagespeed + memcached, en wordpress cacheando con hypercache, haciendo uso de autoptimize y tengo un pagespeed casi perfecto (97) en movil y escritorio, si no fuese por los codigos de adsense tendria un 100 en velocidad 🙂

Añado que durante un tiempo si utilice un subdominio para la version movil, sin embargo la retire ya que google apesar de usar canonical url me indexaba la movil sobre la de escritorio :/

Saludos

Hacer clic para expandir...

pulga91 dijo:

Lo de la función para cargar contenido si es móvil o desktop yo la utilizaba para los bloques de enlace de texto sin problemas, lo de los plugins no consideró que sea malo, ya que el mismo google recomienda no hacer uso de algunos, simplemente desactivo la galería jquery de jetpack en móvil, por lo demás es idéntico el contenido

Hacer clic para expandir...

jonay dijo:

si, pero digo que si como dices utilizas un if y la function wp_is_mobile para quitar cosas y empiezas a quitar muchas cosas ocultandolas en el movil de esa manera podría llegar a ser peligroso por tanto cambio si lo usas para quitar un bloque de publicidad o algo muy minusculo igual no pasa nada... yo no lo haría así pero bueno son diferentes opiniones. :encouragement:

Hacer clic para expandir...