Si cargaste WPBeginner hoy, es posible que hayas notado que tenemos un nuevo diseño de sitio web. Considerando que nuestro último diseño era de 2012, muchos de ustedes dirían que ya era hora de que le diéramos un cambio a WPBeginner. Quería compartir con ustedes algunas ideas de nuestro proceso de rediseño, lo que aprendimos, por qué tomó tanto tiempo y, lo más importante, qué hay de nuevo en el nuevo diseño.
Un poco de contexto
Inicié WPBeginner en 2009. En los primeros 3 años, WPBeginner pasó por 4 rediseños. Eso consume muchos recursos que podrían haberse gastado mejor en nuestra misión principal:
Ayudar a las pequeñas empresas a crecer y competir con los grandes a través de nuestras herramientas, equipo y capacitación.
Después de WPBv4, me propuse enfocarme en nuestra misión principal y los resultados son asombrosos.
En los últimos cuatro años:
- Creamos más de mil tutoriales gratuitos de WordPress en el blog de WPBeginner.
- Agregamos más de 500 nuevos tutoriales en video en nuestro Canal de YouTube.
- Agregamos más de 100 términos en nuestro Glosario de WordPress.
- Lanzamos OptinMonster, una herramienta que convierte a los visitantes del sitio web que abandonan en suscriptores. Nuestros formularios de opción son vistos varios miles de millones de veces al mes.
- Lanzamos Envira Gallery, la solución de galería de WordPress más potente, para ayudar a nuestros usuarios a crear fácilmente galerías de fotos y videos sin ralentizar sus sitios web.
- Lanzamos Soliloquy, un plugin de slider para WordPress fácil de usar y adaptable que hace de la performance y la experiencia del usuario su prioridad número 1.
- Lanzamos WPForms, el plugin de formularios para WordPress más amigable para principiantes basado en sus comentarios y sugerencias.
- A principios de este año, adquirimos Yoast Analytics y lo renombramos a MonsterInsights. Estamos en el proceso de reescribir todo el plugin para hacer que Google Analytics sea fácil para principiantes.
Colectivamente, nuestros plugins han sido descargados más de 13 millones de veces y se utilizan activamente en más de 2 millones de sitios web.
Si bien todos esos son grandes logros, tenemos un nuevo conjunto de desafíos que deben abordarse si queremos continuar mejorando y sirviendo a nuestra misión.
Esto me lleva a WPBeginner v5.
Diseño con Datos
En los últimos años, el uso de dispositivos móviles ha aumentado significativamente para la mayoría de los sitios web. Es por eso que siempre recomendamos a todos que elijan un tema de WordPress adaptable y compatible con dispositivos móviles al iniciar un blog.
Esto fue un poco irónico porque nuestro propio sitio web no era adaptable. Recibimos muchas críticas en las redes sociales de otros diseñadores y desarrolladores de WordPress de la comunidad.
Ocasionalmente recibíamos comentarios de lectores preguntando por qué WPBeginner no era adaptable.
Si bien entiendo la importancia del diseño adaptable, es aún más importante que tome decisiones basadas en datos al priorizar tareas en su negocio.
En 2012, cuando lanzamos el diseño de WPBv4, menos del 2% de nuestra audiencia estaba en dispositivos móviles.
Hoy, en 2016, ese número ha aumentado a aproximadamente el 7%.
Esto sigue siendo muy bajo en comparación con mis otros sitios web como List25, donde más del 50% de los usuarios están en dispositivos móviles.
Pero tiene sentido porque la mayoría de la gente no instala plugins en sus sitios web de WordPress a través de un dispositivo móvil. La mayoría de la gente no hace cambios de código en el móvil. La mayoría de la gente no intenta solucionar errores comunes de WordPress en el móvil.
Es por eso que hacer que WPBeginner fuera responsivo no era nuestra principal prioridad. Sin embargo, una vez que el uso móvil superó el 5%, comenzamos a planificar el rediseño que también abordó otros desafíos.
Otro desafío que enfrentamos fue la usabilidad en el sitio. A medida que agregamos más contenido, se volvió más difícil para los usuarios encontrar lo que buscaban. Por ejemplo, teníamos 8 artículos que hablaban sobre cómo acelerar WordPress, pero ninguna solución completa paso a paso.
Observamos las consultas de búsqueda más escritas en el formulario de búsqueda de WPBeginner para crear tutoriales completos paso a paso que ahora se destacan de inmediato en el diseño.
También hicimos más fácil la búsqueda en WPBeginner con una superposición de búsqueda a pantalla completa en el encabezado y una barra de búsqueda adicional en la barra lateral.
En el futuro, facilitaremos que los usuarios encuentren lo que buscan creando portales de contenido que aprovechen creativamente las etiquetas de WordPress.
Novedades en WPBv5
La funcionalidad principal del sitio se ha mantenido igual. Aquí hay algunos cambios notables en el sitio web:
Nueva página de inicio
Si eres nuevo en WPBeginner, apreciarás la nueva página Empieza aquí
Diseño de sitio web adaptable
El sitio web de WPBeginner ahora es 100% adaptable, por lo que se ve genial en todos los dispositivos.
Hemos optado por mantener el popular framework Genesis para construir nuestro tema hijo personalizado.
Guías completas
Si miras en la barra lateral de cada página, verás una nueva sección "Necesito ayuda con..." que destaca guías completas como cómo acelerar WordPress, cómo mejorar la seguridad de WordPress, cómo optimizar el SEO de WordPress, y más.
Mejor visibilidad para nuestros productos
En el censo de WPBeginner, una de las preguntas que hice fue nombrar un producto que poseemos. Fue bastante sorprendente cuántas personas no conocían nuestros productos. En el nuevo diseño, haremos un mejor trabajo al destacar los productos que poseemos.
Esto comienza con una nueva página de plugins premium de WordPress.
También rotaremos los productos en nuestra barra lateral y en los anuncios de nuestro boletín.
FontAwesome y Nueva Fuente
Quizás notes el uso de fuentes de iconos en el nuevo diseñador. Se llama FontAwesome, y soy un gran fan del trabajo de Dave Gandy.
Usamos su trabajo en todos nuestros productos y somos orgullosos patrocinadores de FontAwesome.
Dato curioso, puedes agregar el logo de WPBeginner como una fuente si usas FontAwesome, así como en nuestras otras propiedades.
En el nuevo diseño, ahora estamos usando la fuente Proxima Nova a través de Typekit.
Nuevo Plugin para Compartir
En el pasado, usábamos una variación del plugin Floating Social Bar.
Después de los cambios de Twitter, Facebook y otros, sentí que era hora de crear un nuevo plugin para compartir para WPBeginner.
Extrae con precisión el conteo de Twitter, pero lo que es más importante, ahora tiene un conteo total de compartidos.
Elegí detener el comportamiento flotante y, en cambio, los botones para compartir ahora se agregan al principio y al final de cada publicación. Esto ayudará a una mejor experiencia de usuario en tamaños de pantalla más pequeños.
Nuevo eBook y Formularios de Suscripción
Al final de cada publicación, verás un nuevo formulario de suscripción para descargar mi kit de herramientas de WordPress. Este eBook comparte las herramientas exactas que usamos en nuestros sitios web.
Es diferente del blueprint de WPBeginner porque ese solo te muestra lo que usamos en WPBeginner.
El eBook del kit de herramientas es más completo.
También reemplacé el formulario de suscripción de la barra lateral con MonsterLinks, un proceso de suscripción en 2 pasos. El formulario de suscripción de la barra lateral no convertía a una tasa lo suficientemente alta como para justificar el espacio. Así que ahora, si quieres suscribirte por correo electrónico, puedes hacerlo haciendo clic en el ícono de correo electrónico en la barra lateral.
¿Qué sigue?
Además de los cambios en el front-end, hicimos muchos cambios en el back-end que facilitarán al equipo de WPBeginner la creación de guías más completas en los próximos meses.
El sitio de membresía de videos de WPBeginner recibirá una renovación. Actualmente todavía usa el tema antiguo.
Lo convertiremos en un sistema LMS que reunirá el curso de videos para principiantes y nuestros más de 500 videos de YouTube en un lugar centralizado.
El objetivo de ese sitio sería ofrecer cursos más organizados para que a los usuarios les resulte fácil aprender WordPress rápidamente.
Quiero agradecerles a todos por su apoyo y comentarios.
Atentamente,
Syed Balkhi
Fundador de WPBeginner
Vipin
Hola,
El diseño se ve increíble.
De hecho, yo también quería el mismo aspecto para mi sitio web, que también está relacionado con el negocio de ofertas y cupones. También he configurado el framework genesis y el tema hijo genesis-simple, pero no sé cómo lograste la opción de alternancia de encabezado y la publicación de ofertas, ¿puedes guiarme?
Gracias
Vipin Singh
Shola
Bueno, no conocía el diseño antiguo, pero de todos modos me encanta el nuevo diseño. Cada vez que vengo a este sitio, siento que mi diseño de sitio podría ser así. Gracias tema wpbeginner. Ustedes están haciendo un gran trabajo. Que tengas un buen día.
Soporte de WPBeginner
Hola Shola,
Thanks for the kind words.
Administrador
Atul
Este diseño plano se ve bastante bien en todos los dispositivos. Se ve mucho mejor ahora.
Aaditya Sharma
Soy un lector habitual de su sitio web, el nuevo diseño del sitio es una buena mejora respecto al anterior, pero no me siento como ¡wow!
Quizás el ancho del sitio pueda aumentar.
Ekesmall
Wow, me alegra mucho ver el diseño adaptable porque antes era bastante difícil ver el sitio web en un teléfono móvil, pero ahora está bien.
Srivalli
Felicidades Syed, el nuevo diseño se ve muy limpio y agradable. Por cierto, ¿tu nuevo plugin para compartir está disponible para otros usuarios? Se ve muy limpio y significativo.
Personal editorial
Hola Srivalli,
No the new share plugin is not public yet
Administrador
Srivalli
Gracias, espero que lo hagas público pronto... :)
Businge Brian
Esto es realmente asombroso. Me gusta el nuevo diseño. Estuve aquí el día de ayer, me desperté, revisé mi sitio web favorito de tutoriales de WordPress y me sorprendió lo que vi. Realmente genial, chicos.
Personal editorial
Glad you liked it Businge
Gracias por las amables palabras.
Administrador
LH Louis
Me encanta esta barra flotante para compartir. ¡Mashable tiene una genial también!
P.D. Me encantaría tener enlaces entrantes aquí...
Personal editorial
Gracias.
Si te refieres a enlaces entrantes en los comentarios, los eliminamos porque atraían demasiado spam.
Administrador
Muhammad Imran
Gran diseño, felicidades equipo WB
M Imran
Personal editorial
Gracias Imran
Administrador
Diane
Me encanta el rediseño. Solo por curiosidad, ¿qué opinas del anuncio de Google sobre las ventanas emergentes y las clasificaciones? Por una vez estoy de acuerdo con Google en esto. No había estado en tu sitio más de un par de segundos antes de que apareciera una ventana emergente pidiéndome que me suscribiera (ya lo estoy haciendo). Ni siquiera he tenido tiempo de revisar el contenido y ver si me gusta y ya me están pidiendo que me suscriba. Se ha convertido en una molestia constante en línea. ¿Hay alguna forma de que puedas agregar seguimiento a "opt in monster", para que si hago clic desde uno de tus boletines, no aparezca la ventana emergente de suscripción? Ahora, eso sería un punto de venta.
De todos modos, me desvío (no pude evitarlo, ¡¡la ventana emergente era REALMENTE molesta!!) – tu sitio se ve genial y tu contenido es realmente fabuloso. Pregunta a los visitantes si quieren suscribirse después de que hayan tenido tiempo de leer tu contenido y es posible que descubras que obtienes una tasa de suscripción más alta...
Personal editorial
Hola Diane,
Gracias por tus comentarios.
Escribí sobre las nuevas reglas de Google para sitios aptos para móviles sobre ventanas emergentes aquí:
http://optinmonster.com/the-new-google-mobile-friendly-rules-for-popups/
Administrador
Herwig
¡Me encanta el nuevo diseño! Solo una pregunta: ¿Tu nuevo plugin para compartir está disponible en alguna parte? ¡Se ve muy bien!
Personal editorial
Hola Herwig,
Gracias por tus amables palabras. El plugin para compartir no está disponible en este momento porque se codificó a medida para WPBeginner. Es posible que lo lancemos en el futuro, pero aún no está listo para su lanzamiento público.
Administrador
Betty Johnston
…¡OK! ¡Excelente!.. Te sigo desde hace mucho tiempo… esta actualización es rápida… súper UX-UI… clara… (excepto tu logo… un poco borroso)… Me encantan los colores contrastantes… y las instrucciones fáciles… Estoy de acuerdo contigo; No uso mi Note5 para arreglar nada… personalmente leo todo cuando no estoy en mi oficina y luego aplico lo que necesito desde mi escritorio/portátil… Estoy ansioso por revisar muchas cosas en las que necesito ayuda… ¡Gracias y Felicidades…!!
Personal editorial
Thanks for the feedback Betty. We appreciate it
Administrador
Salman
El sitio se ve genial. Mejor que la versión anterior.
¿Puedes hacer una lista de todas las herramientas y tecnologías que has utilizado para crear este sitio web y publicarlas? Sería maravilloso. Gracias.
Personal editorial
Hola Salman,
Tenemos una lista de todo lo que usamos en WPBeginner aquí: https://www.wpbeginner.com/blueprint/
Administrador
TeQuan Douglas
¡Hola, Syed!
Vaya… WPBeginner es en realidad mucho más rápido de lo que siempre ha sido, debo decir que me encanta este nuevo diseño. Uso WPBeginner al menos 5 veces al día, sigan con el buen trabajo..
Personal editorial
Thank you TeQuan
Administrador
Brin Wilson
Well done: looks fab – simple, clean and well thought out. Impressive.
Personal editorial
Gracias Brin
Administrador
Lisa
Muy bien – ¡felicidades a Syed y al equipo y a StudioPress!
Personal editorial
Thanks Lisa
Administrador
Neil Forrester
Hola Syed,
Gran trabajo con el nuevo diseño y gracias por todos los tutoriales de WordPress. Consulto su sitio regularmente y creo que es un recurso invaluable.
Saludos,
Neil Forrester | pixelfire.com.au
Personal editorial
Gracias Neil, apreciamos tu apoyo.
Administrador
Henri Lotin
¡Hola, en WPBeginner!
Felicitaciones a todo el equipo.
Me quejé hace meses de que el sitio no era responsivo. Ahora estoy servido, y bien servido.
¡Todo pulgares arriba, desde Camerún!
Personal editorial
Gracias por tu paciencia y apoyo continuo, Henri. Lo apreciamos mucho.
Administrador
Izham
Me gusta el nuevo diseño. Al principio, yo también sentí raro por qué WPB no tenía diseño responsivo.
Después de leer esto, ahora entiendo por qué.
¡Gran trabajo, WPB!
Me encontré con tu blog y ha mejorado mucho mi experiencia con WP.
Me gusta la forma en que explican. Las ideas que muestran son verdaderas, demostrando que su equipo realmente lo prueba antes de escribir sobre ello. No como otros blogs que solo copian y pegan y editan solo para posicionarse en Google.
Los seguiré, chicos.
Personal editorial
Gracias, Izham.
Administrador
Mike
Me gusta el nuevo diseño. Si bien es cierto que cuando trabajo en mis sitios, no estoy en el móvil. Recibo sus correos en mi móvil y muy a menudo los guardo para leerlos en mi cafetería local. Esto hará las cosas mucho mejor. Buena suerte con el nuevo diseño.
Personal editorial
Thanks Mike – yup that was the most common use-case. People read emails via phone and then come to our site. Hopefully it will be a much better UX now
Administrador
Adrienne
¡¡Ya era hora!! Jaja, leo sus cosas en el tren y era una locura tener que ajustar el tamaño de la página.
Adrienne
¡No, en serio, los quiero, chicos! ¡Sigan así!
Ben
Hola Syed,
Un gran nuevo aspecto para un gran recurso sobre todo lo relacionado con WordPress.
Realmente me gusta lo que han hecho y con mensajes claros en todo momento.
Gracias por informarnos a todos sobre el proceso y cómo hicieron las cosas.
¡Podría inspirar a algunos a hacer una renovación!
Todo lo mejor
Ben
OBINNA DURU
Hola, WP Beginner, recientemente comencé a trabajar con WordPress CMS y me resultó muy fácil porque uso la mayoría (si no todos) de los materiales de su sitio. Creo sitios web para clientes y tengo una empresa de hosting gratuita que uso. Navego por su sitio, al menos, no menos de 8 veces al día, buscando soluciones para resolver los problemas de mis clientes. Estaba navegando por su sitio cuando de repente cambió del diseño antiguo a este nuevo. Me gustaba más el anterior que este porque el diseño anterior mostraba un menú de navegación de ancho completo en mi teléfono pequeño, lo que facilitaba mucho la navegación, ¡pero este nuevo diseño reduce todos los elementos de navegación a un "MENÚ" en el que tengo que hacer clic antes de que se muestren los demás! Me gustaría aprovechar esta oportunidad para preguntar: "¿cómo puedo eliminar la capacidad de respuesta de un tema de WordPress y hacer que muestre un menú de navegación de ancho completo incluso en teléfonos inteligentes? Uno de mis clientes lo ha estado pidiendo y no puedo resolver ese problema. Gracias y que Dios los bendiga.
OBINNA DURU
Uso un tema del directorio de temas de WordPress y el nombre del tema es WP knowledge base. ¿Cómo puedo eliminar la capacidad de respuesta de ese tema en particular, y de todos los temas en general, haciendo que se muestre un MENÚ DE NAVEGACIÓN DE ANCHO COMPLETO incluso en pantallas pequeñas de teléfono, exactamente como era su diseño anterior. Dios los bendiga.
Soporte de WPBeginner
Hola Obinna,
Gracias por tus comentarios. La mayoría de los usuarios encuentran que el menú de navegación colapsado es más fácil de usar en pantallas pequeñas. Es más fácil de tocar y se pueden mostrar más elementos en el menú.
Si deseas usar un menú de ancho completo, puedes empezar con un tema de WordPress que no sea completamente adaptable. También puedes establecer el ancho usando CSS.
Administrador
Mitch
Me da mucho gusto ver la actualización y todo lo que trae.
Debo decir que ¡NO tenía idea de que ustedes eran los dueños de esos plugins!
Francamente, pensé que alguien con escrúpulos menos que deseables se había apoderado de Yoast Analytics, ¡así que es genial saber ahora que alguien tan respetable como WPBeginner es el dueño!
Scott Buehler
Se ve genial y rápido.
Personal editorial
Thank you
Administrador
Josalone Wordsworth
He estado siguiendo este sitio en silencio durante los últimos 4 años, me alegra que sus nuevos cambios sean prácticos para lo que le enseña a novatos como yo al construir sitios de WordPress (mobile first).
Por favor, sigan con su gran trabajo, usted y su equipo.
Personal editorial
Thanks for the kind words Josalone. We appreciate your support
Administrador
Ahmad Awais
¡Felicitaciones al equipo de WPB! El nuevo diseño se ve bastante bien. ¡Ya era hora!
Personal editorial
Gracias Ahmad por tus amables palabras.
Administrador
Sidah
Se ve genial.
¿Quizás quieras hacer el wpbeginner en una resolución más alta? Se ve mal en mi iPhone 6.
Saludos
Personal editorial
El sitio actual no es retina porque queremos asegurarnos de que sea rápido en todo el mundo (incluso en conexiones más lentas).
Administrador
Dick Motta
Espero con ansias las actualizaciones. Quiero hacer cambios en el sitio web, pero de alguna manera me distraigo. Espero poder dedicar más tiempo a aprender los procedimientos de WordPress.
Personal editorial
Gracias
Administrador
Parvez Afshar
Es agradable y creativo – intenten hacerlo lo más hermoso y fácil de usar posible. Totalmente increíble ahora, felicidades.
Carlito Thomas
¡Me encanta el nuevo diseño! Sin embargo, su logo principal está un poco borroso.
Arief Mardianto
Siempre hago lo que hace WPB. ¡Vida WPBv5!
Stephen
El nuevo diseño es simple pero potente.
Felicitaciones a usted y a su equipo, Syed.
Personal editorial
Thanks Stephen
Administrador
Ajay
¡Actualización ejecutada asombrosamente! Gracias por lo que están haciendo por la comunidad de WP.
Personal editorial
Gracias Ajay
Administrador
Dawn Groves
Buen trabajo, Syed. Especialmente la descripción de cómo lo hiciste. Definitivamente otra oferta de valor agregado.
Dawn
Personal editorial
Thanks Dawn
Administrador
Gayle Hardy
¡Gran trabajo! Felicidades, el sitio se ve genial y todas tus mejoras tienen perfecto sentido. Aprecio todos los consejos, trucos e instrucciones fáciles de seguir que has compartido a lo largo de los años y espero seguir aprendiendo más sobre WP en los años venideros.
Personal editorial
Gracias Gayle por tu continuo apoyo.
Administrador
Herb Trevathan
Buen trabajo. Me encanta Genesis : ) Uso tus fragmentos a menudo.
Personal editorial
Thanks Herb – appreciate your support
Administrador
Suman Gaudel
Me alegra ver el WPB en un diseño responsivo.
Personal editorial
Cheers
Administrador
Sowmay
¿Dónde puedo conseguir tu nuevo plugin de compartir en redes sociales?
Soporte de WPBeginner
Hola Sowmay,
Es un plugin personalizado que hemos desarrollado para nuestro propio uso.
Administrador
Pat Fleck
I agree with Adeel. It looks like you have put a lot of thought into the re-design. Also good to see that the site is now responsive
Personal editorial
Thanks Pat
Administrador
Dallas
Me encanta el nuevo aspecto del sitio. ¡Buen trabajo! Parece que tu ancho total es de alrededor de 940px. ¿Hubo alguna razón específica para elegir un ancho estrecho?
Personal editorial
Porque la mayoría de nuestras imágenes de contenido tienen 520px de ancho. Queremos asegurarnos de que nuestro sitio sea rápido porque muchos de nuestros usuarios no tienen internet rápido. Elegir un ancho de contenido más grande y subir imágenes de mayor tamaño ralentiza aún más el sitio.
Esto no se nota en la parte occidental del mundo, pero muchos otros países tienen internet muy lento.
Administrador
Wesley Banks
Si no te hubieras preocupado tanto por los tamaños de imagen existentes o las velocidades lentas de internet, ¿habrías cambiado el ancho? Siempre me cuesta decidir cuál es el mejor ancho de contenido al crear sitios nuevos. Por lo tanto, me encantaría escuchar tus ideas. ¡Gracias!
Personal editorial
Lo habría diseñado a 1140 en ese momento porque las imágenes más grandes definitivamente se ven mejor.
Doug
Buen trabajo Syed.
Personal editorial
Gracias Doug
Administrador
Andre
¡Increíble, simplemente increíble!
Personal editorial
Gracias Andre
Administrador
Teresa Maslonka
Felicitaciones por el nuevo rediseño y gracias por sus considerados cambios. ¡Realmente emocionado de explorar el sitio!
Personal editorial
Gracias Teresa por tus amables palabras.
Administrador
Sowmay
Syed, encontré este diseño más adorable que el anterior.
Personal editorial
Gracias
Administrador
Banna
El diseño se ve bien.
Pero mientras me desplazo hacia abajo por el artículo, echo de menos la barra lateral. Parece que tenemos mucho espacio.
Personal editorial
Gracias por tus comentarios, Banna. En los próximos días, agregaremos cuadros de desplazamiento para incluir contenido relevante para algunos artículos.
Administrador
Adeel Sami
¡Hola, Syed!
¡Este diseño es simplemente asombroso: limpio, simple y elegante!
Congrats!
Neal Umphred
Muy bien, de hecho...
kharid
muchas gracias por este artículo