Designing a responsive, Retina-friendly site

http://paulstamatiou.com/responsive-retina-blog-design

by PStamatiou • 14 years ago

73 15 14 years ago

orta• 14 years ago

This style of blog is exactly what I've had in mind now for a few months for my own website, I think its a great way to tell a story. Congratulations Paul. Wish I could fork it on github and apply my own styles to your foundations.

hayksaakian• 14 years ago

The text/font is very nice on galaxy nexus.

pan69• 14 years ago

Not meant to be a shameless plug but I recently redid my business website to optimize for mobile as well. We didn't intentionally target retina but it turns out we're using a font for our logo and I'm very pleased with how crisp it looks on my Galaxy Nexus. I'm currently building a website for a client and the logo is a bitmap and there is distinct difference in quality. This is my own site, built with Bootstrap: http://www.electrichq.com.au

duck2• 14 years ago

Paul, as always, an awesome write-up. Looking forward to the dev one as well. The design of the article posts are spot-on. The header seems a bit off to me though, maybe it is the alignment of the photo/subtitle and the menu below it? Also, I think it would be nice if on the /photos posts if you could browse through them easier with something like a left/right arrow setup. Maybe you don't want that though? Either way, great work!

PStamatiou3• 14 years ago

Thanks! Yeah I'm still pondering tweaking the header for that exact reason. It looks like it should line up with the header menu. Looks much better on mobile in the responsive header version. :)

> Also, I think it would be nice if on the /photos posts if you could browse through them easier with something like a left/right arrow setup

Curious, did the left/right arrows not load? http://dl.dropbox.com/u/186198/Screenshots/y7g5.png On individual photo pages i also bind the left/right arrow keys too. Thinking about doing the same L/R stuff for posts too.

duck2• 14 years ago

Ha! They loaded and are there, but I can hardly see them on my sony laptop (1600x900) b/c they fall to the outside of the photo. When I resized my browser I could easily see them.

StuieK• 14 years ago

Does anyone have any good data on the impact on the number of times an article is shared with/without share buttons?

mediumdeviation• 14 years ago

Just looking through the source of the site, it seems that whatever CMS you're using is inserting <p> tags everywhere, including around the opening and closing <section> tags: http://i.imgur.com/RkoFP.png.

It's also causing the page to fail validation (ignoring the errors about unknown meta tags): http://validator.w3.org/check?uri=http%3A%2F%2Fpaulstamatiou...

PStamatiou3• 14 years ago

yeah jekyll is going ham on my new lines. I have been meaning to look into that. It's markdown but I only use html. Need to find a way to have it not use markdown (blasphemy, I know).

snatch_backside• 14 years ago

DarkStarX1, you are a dead user. Time to make a new account.

Hawkee• 14 years ago

I began thinking single column. The content should be the star of the show. No sidebars or extraneous post metadata that gets in the way of reading.

I'm happy to hear you confirm this for me. I've been removing the sidebar from most pages of my site for the exact same reason. Not to mention that a sidebar generally only occupies the first screen you see. Once you start scrolling you're left with empty space below and content that's thinner than it should be.

zinssmeister2• 14 years ago

Paul you sure seem to like the word 'yet'.

PStamatiou3• 14 years ago

Thanks -- this is actually helpful. I want to be more cognizant of my writing style, I have a lot of room to get better. I often start sentences with "But" and use the same modifiers (However, Unfortunately, etc) quite a bit.

When I write I usually start with a big, unfiltered brain dump, then some formatting and then a proofread. But the proofread is in chunks of reading, fixing, reading etc so I never get the entire flow of it to catch these i-just-used-the-same-word-in-the-last-3-paragraphs issues.

zinssmeister2• 14 years ago

overall I think your writing style actually is very personal. We have never met, but after reading, I feel like I've just had a conversation with you.

robryan• 14 years ago

Good stuff, looks great on retina. It is still very niche but great to see more sites experimenting with providing higher quality retina friendly images.

Designing a responsive, Retina-friendly site

Related Stories