Navegación y Desarrollo Web en Macbook Pro Retina

Buenas gente!

Ante todo saludos!

Llevo varias semanas valorando la posibilidad de cambiar mi actual MacBook Air de 11" pulgadas por el nuevo Macbook Pro Retina, pero tras probarlo en diferentes tiendas simulando el uso que yo pueda darle en el día a día la pantalla Retina me encanta y me decepciona a la vez, os comento.

Yo tengo una empresa de desarrollo web, programo y diseño a la par, por lo que navego y trabajo con navegadores y webs prácticamente durante todo el día. La pantalla Retina al tener el doble de resolución que una pantalla normal y más puntos por pulgada hace que los textos planos de Safari se vean a la perfección pero las imágenes se ven todas como desenfocadas, pixeladas, con dientes de sierra, etc... es correcto que desde mi punto de vista de desarrollador puedo aplicar los cambios correspondientes a las webs de mis clientes para que estas se ven correctas, tirando de scripts de java y css se puede lograr, pero claro el resto de navegación web en akellas webs que no estan preparadas para Retina me tira muuuucho para atrás.

Ahora bien, alguien que desarrolle desde su MacBook Pro Retina o bien navegue muchas horas al dia no tiene ninguna queja de su pantalla? la experiencia de usuario os parece buen? no notáis las imagenes de las webs borrosas, dentadas, etc...

1 abrazo!
Pues es un tema que tambien me interesa. De hecho te había escrito otra respuesta , pero he investigado un poco.

Y creo que mas que una desventaja , puede ser una ventaja. En estos tiempos de diseño web "responsable" ;).

http://www.htmlcut.com/blog/retina-display-future-of-web-design-internet-overview.html

Some Basics
1). Retina display
http://en.wikipedia.org/wiki/Retina_display
by Wikipedia

2). The Effect of Retina Display on Web Design
http://www.brandbuildercompany.com/blog ... eb-design/
by Brian LePore: “Everybody loves pretty pictures. Retina display can make your pictures pop. But for everything there is a cost. What does retina cost you?”

3). Why Retina Isn’t Enough [Feature]
http://www.cultofmac.com/173702/why-ret ... h-feature/
by John Brownlee: “Apple’s new MacBook Pros have absolutely great displays, but they need every single pixel they have, because the truth of the matter is that Apple’s got a long way to go before it catches its display tech up to the incredible power of human vision. And that’s a good thing, because it means we’ve got a lot to look forward to.”

4). Towards A Retina Web
http://coding.smashingmagazine.com/2012 ... etina-web/
by Reda Lemeden: “…let’s briefly cover some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities.”


Designing for Retina Display
1). Designing on a Retina Screen: My Thoughts on the Retina MacBook Pro
http://designshack.net/community/design ... cbook-pro/
by Joshua Johnson: “Will it help or hinder the industry? Can you really do design work on that thing if you’re designing for non-retina screens? Today I’m going to tell you all about my experience with the machine that threatens to change the way you do your job.”

2). Using CSS Sprites to optimize your website for Retina Displays
http://miekd.com/articles/using-css-spr ... -displays/
by Maykel Loomans: “…the extra layer of complexity that CSS Sprites brings to your assets was not always worth it. But with high-resolution screens, such as Retina Displays, becoming more and more prevalent, there is a new big reason to use them.”

3). Designing for iPhone 4 Retina Display: Techniques and Workflow
http://mobile.smashingmagazine.com/2010 ... -workflow/
by Marc Edwards

4). Designing for Retina display, part two
http://bjango.com/articles/designingforretina2/
by Marc Edwards: “Answers to some of the most common questions I’ve been asked since writing the initial Retina display article and Smashing Magazine article.”

5). Responsive Design for Retina Displays on iPad and iPhone
http://garybacon.com/post/responsive-de ... nd-iphone/
by Gary Bacon

6). Designing for the Retina Display (326ppi)
http://www.lukew.com/ff/entry.asp?1142
by Luke Wroblewski

7). A tip for designing for Retina displays
http://www.commonagency.com/blog/2012/0 ... -displays/
by Ben Childs: “A new trick.”

8). Designing for the Hi-Res iPad Retina Display
http://www.brandaiddesignco.com/blog/de ... splay/320/
by Jeremy Mansfield: “By following some of the below tried and true best practices, you too can can ensure your content is easily readable on any device, no matter the resolution of the display.”

9). How to Design for Apple’s Retina Displays
http://www.studiopress.com/design/retin ... design.htm
by Josh Byers: “Personally, I want my graphics to look as crisp and clean as a new dollar. Aside from my own preference, ask yourself this: What if, in the next year or two, that pixel density doubles again? What if it triples? We’d have a real problem on our hands.”

10). Optimising for High Pixel Density Displays
http://menacingcloud.com/?c=highPixelDensityDisplays
by Edward Cant: “In this article we’ll discuss a maximum quality, minimum effort CSS and JavaScript approach to web sites/apps that cater for high density pixel displays.”

11). Flowchart: how to retinafy your website
http://mir.aculo.us/2012/06/26/flowchar ... r-website/
by Thomas Fuchs: “With Retina screens all around us, it’s time to take the plunge and retinafy your website or webapp. Here’s the process I use (for both mobile and desktop) in the form of a flowchart for some more sanity in all of this.”

12). Designing for Retina Display
http://www.inserthtml.com/2012/09/desig ... a-devices/
by Johnny Simpson: “Designing for such a high resolution however, can become a little more tricky than you would expect.”

13). Designing for Retina
http://realmacsoftware.com/blog/designing-for-retina
by Chris: “I quickly managed to work out a way that felt comfortable designing Retina apps for the Mac, and one that could also crossover to iPhone and iPad app design.”

14). Retina Display Media Query
http://css-tricks.com/snippets/css/reti ... dia-query/
by Chris Coyier: “Let’s say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it’s best on any screen (retina or not) and not waste any bandwidth.”

15). A Collection Of Free Retina-Ready Navigation Bar, Tool Bar and Tab Bar Icons For App. Developers
http://designbeep.com/2012/09/13/a-coll ... evelopers/


Images for Retina Display
1). Improving Image Quality on the Retina Display
http://webdesign.tutsplus.com/articles/ ... a-display/
by Connor Turnbull

2). Tips and tricks for Retina images in responsive web design
http://www.netmagazine.com/features/tip ... web-design
by Christopher Schmitt: “Christopher Schmitt explains how to keep users of both Retina and traditional screens happy, by delivering adaptive and flexible images to suit all resolutions.”

3). Responsive & Retina Content Images Redux using Media Queries & a base64 spacer GIF
http://mattstow.com/responsive-and-reti ... redux.html
by Matt Stow: “…it even works with serving “retina images” to the new iPad. All it requires is a blank 1×1 GIF (converted to base64), and then setting that image’s background to whatever image needs to be served along with background-size: contain.”

4). Exporting Retina designs from Photoshop with Layer Cake
http://veerle.duoh.com/design/article/e ... layer_cake
by Veerle Pieters: “Wouldn’t it be great if we could export, 50 or more icons, or other images, all at once in a matter of seconds?”

5). retina.js – Retina graphics for your website
http://retinaJS.com
“retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.”

6). How to serve high-resolution website images for retina displays (new iPad/iPhone4)
http://benfrain.com/how-to-serve-high-r ... adiphone4/
by Ben Frain: “This article covers how to serve high resolution images on your website for users of high resolution ‘retina’ device screens.”

7). How should we deal with retina displays?
http://boagworld.com/tumblog/how-should ... -displays/
by Paul Boag: “Do you recommend increasing image resolutions or creating image sets to compensate for the Apple iPad Retina Display? This is a really tricky one and I would love to hear your take on it in the comments.”

8). Retina revolution
http://blog.netvlies.nl/design-interact ... evolution/
by Daan Jobsis: “A smaller filesize AND a better quality on both screen types.”

8a). Retina revolutie follow up
http://blog.netvlies.nl/design-interact ... follow-up/
by Daan Jobsis

9). Optimising for Retina: 10 essential tools
http://www.netmagazine.com/features/opt ... tial-tools
by Craig Grannell: “Short of ignoring hi-res displays entirely, your only option is to embrace new techniques and workflows that enable you to efficiently output suitable content. What follows is a list of 10 useful tools, including scripts, techniques and software, which should make this task easier for you.”


Opinions
1). Will the Retina Display Influence Web Design?
http://www.technologyreview.com/view/42 ... eb-design/
by David Zax: “…one of the unintended consequences of the MacBook Pro’s new high-res retina display: an epidemic of headaches for web designers.”

2). Do web designers ‘need’ a Retina display?
http://www.netmagazine.com/news/do-web- ... lay-122067
by Craig Grannell: “Developer Marco Arment argues high-res displays soon to be commonplace.”

3). Do web designers need retina displays?
http://www.creode.co.uk/blog/do-web-des ... -displays/
by Andy: “If you’re a web designer, you really, really need to get a Retina MacBook Pro…”

4). Developers foresee ‘Retina War’
http://www.netmagazine.com/news/develop ... war-122086
by Craig Grannell: “1x design could be ‘taxed’ or dismissed as an annoyance.”

5). The Retina War is upon us
http://blog.wells.ee/retina
by admin: “The problem gets worse – I can’t design for 1x on my Retina Macbook Pro. It’s impossible.”

6). Responding to Retina: Mobile Design for High-Res Displays
http://www.bluetrainmobile.com/blog/res ... to-retina/
by Ryan Boye: “…just because they can make higher resolution screens doesn’t mean that the mobile web is ready to handle them.”


MacBook Pro Retina Display
1). What You Need to Know About the MacBook Pro Retina Display for Photoshop, Lightroom And Photographers
http://layersmagazine.com/what-you-need ... phers.html
by Matt Kloskowski: “One of the questions I’ve been getting asked a TON lately is about the new MacBook Pros with Retina display and how they work for Photoshop, Lightroom and for photographers in general. Well, I’ve been kicking the tires on one for about a week now, so I thought I’d give you my initial thoughts.”

2). Retina Laptop Tips for a Non-Retina World
http://www.apartmenttherapy.com/working ... rld-174049
by Joelle Alcaidinho

3). Where To Find Great Wallpapers For Your New MacBook Pro’s Retina Display [Gallery]
http://www.cultofmac.com/177633/where-t ... y-gallery/
by Alex Heath
Me apunto por aquí para más información sobre desarrollo web XD

Yo digo que si merece la pena, pero como tú comentas, las imágenes de las web que no están adaptadas es un "conyazo". Si tienes la pasta, hazte con él. Aunque bueno, también puedes mirar el de 15" mate, le pones un SSD y 8GiB de RAM. Con eso tienes equipo para un par de añetes :)
Buenas gente!!

pinchadiscos, gracias por la info!

el problema precisamente es ese alexricoj, que yo puedo encargarme de adaptar mis trabajos y las webs de mi empresa, pero el resto de internet?! es un auntentico coñazo!! no creo que ni un 5% esté por esa labor. que se establecerá como standard porque realmente la pantalla tiene una calidad abrumadora? puede ser, pero hasta llegar a eso pueden pasar muchos años!! el SSD es una cosa que casi desde que los discos de 128gb son asequibles, es decir por debajo de los 200-150 € k no puedo trabajar con un equipo que no lo use ;) mi Mac Pro lleva un buen SSD, una maravilla ;)

Saludos!
Digo yo, desde una pantalla non-retina puedes adaptar la web? Supongo que sí, si el ahorro es considerable lo invertiria como dije antes en una pantalla mate (si, pierdes algo de 'viveza' en los colores, pero no tienes reflejos de luz ni cosas así).

Si crees que de aquí a ~5años se hará estándar la calidad Retina (lo dudo...), hazte con él sabiendo que dentro de esos ~5años no tendrás que renovar equipo por uno mejor. Pensándolo así, desde mi punto de vista, me haría con el MBP15" mate full-equip y cuando llegue el día que Retina sea necesario para navegar, me haré con ella, hasta entonces nada.

Por cierto, tiene que ser de 13" o 15"? Yo el de 15" sería únicamente con la pantalla mate, para comprar el 'glossy' me iría a un 13" full-equip y un buen monitor IPS externo (~24" 16:10) en el que "apoyarme" a la hora de picar código y comparar resultados.
Buenas alexricoj.

Claro que conectando una externa se puede adaptar la web, pero tío, gastarte 2300 euros en un portatil para ver todas las imágenes de internet pixeladas tiene tela, no? es que de verdad animo a la gente que cuando esté delante de este portátil navegue un rato a ver que cara se le keda, pk la cosa es de traca.

Al menos desde mi humilde punto de vista personal no le encuentro sentido. Yo creo que es un poco ver como reacciona el mercado, pk en imacs y demás no le meterán este tipo de pantalla.

Ya os digo, os animo a probarlo, y después de eso decidir si seríais capaces de pasar 8 o 10 horas al día navegando por internet con todas las imágenes de las webs borrosas ;)

1 saludo!
pk en imacs y demás no le meterán este tipo de pantalla.

Creo que te equivocas amigo...Apple va a pasar por renovación toda la gama con pantalla Retina. Es su siguiente evolución clara , renovar los Air y los Imacs...a un buen precio seguro por cierto.

Seguramente permanezcan gamas sin ella...pero todo va a tender a esa evolución para el 2013.

Yo lo tengo claro...mi portatil aguanta. Pero un futuro lo tengo clarinete.
Hummm me quedaré por aqui que caen buenos links y opiniones, ya que estoy creando un framework HTML5 y las pantallas retina me las esta dando con patatas [+risas]
Yo por el momento, como recomendación, tiraría a cogerme uno normal. El Retina es una pasada, pero cogerse la primera versión de un producto tan "experimental", teniendo en cuenta su precio, es un riesgo que yo no asumiría.
Espera a ver que ocurre de aquí a un par de años, y para la siguiente vez que te toque renovar el ordenador ya tendrás las ideas mucho más claras.
Ahora mismo el que se vuelva más estándar o no dependerá de la competencia y de que quieran hacer. Si los competidores de Apple comienzan a sacar pantallas con una resolución tan alta la gente se molestará en adaptar sus web, pero mientras siga dependiendo de un solo modelo el 95% de las web se seguirán viendo igual.
Piensa que en el caso del iPhone y el iPad con las aplicaciones fue bien distinto por el nivel de ventas, ya que en el mercado de los smartphones y las tabletas Apple tiene la mejor cuota del mercado, y a los desarrolladores les merecía la pena adaptar todo a esas pantallas. Pero en el mercado de ordenadores es completamente opuesto, y más cuando no se trata de los Mac en general, si no de un modelo en concreto (bueno, ahora dos XD ).
8 respuestas