Lessons learnt making our web app responsive

https://www.domcop.com/blog/lessons-learnt-expired-domains-responsive/

by webstartupper • 12 years ago

26 20 12 years ago

didgeoridoo3• 12 years ago

Maybe you could apply those lessons to this blog entry so I can read it on my phone without a giant blue bar taking over the entire left side of the screen...

webstartupper3• 12 years ago

haha. That's embarrassing. That is the default 2014 wordpress theme. Did not think of testing that.

didgeoridoo3• 12 years ago

Your culprit is:

.site:before { background-color: #438EB9; content: ""; display: block; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; width: 182px; z-index: 2; }

I certainly HOPE that isn't part of the default Wordpress theme. I think someone just got a little lazy with their full-height column hacks.

parham• 12 years ago

Took the words out of my mouth. Credibility of the article has been diminished by that error.

camillomiller• 12 years ago

This is what I see on my iPad. http://imgur.com/3y4zpXT

I guess there's a seventh lesson they still haven't learnt yet.

lgmspb• 12 years ago

True, but responsiveness is totally worth it. For example British "Metro" magazine, just by making it's website responsive increased the traffic from the social networks by 100%. Also there is no hustle with m.domain optimisation.

Donzo• 12 years ago

Yup, still some more lessons to learn here.

Go irony!

tahmida_t• 12 years ago

Learning about responsive design means more than learning to use the bootstrap grid . Sure,the grid system is great and works in many cases . However, there comes a time when your websites will hurt if you don't truly understand the fundamentals of responsive design .

skizm• 12 years ago

I always wonder if it is better to just leave sites as unresponsive if you've already skipped designing for mobile. Honestly vanilla non-responsive sites, without too many bells and whistles (hover/flash stuff) are easier to navigate than a poor mobile site (or even a mediocre one). I know what to expect when I click something, and even if I have to zoom in on my own, I still would rather have the actions be consistent with the desktop version than be poking around looking for the menu.

untilHellbanned• 12 years ago

Buying a Bootstrap theme isn't very impressive. Try formatting images, videos, rescaling fonts across devices. It will take a lot more than two weeks.

moron4hire2• 12 years ago

The more and more I get to develop sites for people in the wild, rather than corporate intranets, the more I learn: truly semantic HTML is responsive by default.

You have to go out of your way to make it unresponsive. You have to insist that you know the one, true, best way to use your site for every type of user--big-screens and small, strong- and weak- and no-sighted, color-seeing and non-color-seeing, rich-enough-to-own-the-latest-macbook or not. The pixel-perfect positioning of your logo is more important than people who do not meet your conception of your perfect user.

Sure, certain concessions need to be made. Obviously, if you're making a shape-matching game, the blind need not apply. Deaf users probably won't get anything out of SoundCloud. But most sites have a broken interface for anyone other than a median human.

Just imagine if HN had a properly semantic HTML layout. It'd scale properly to every cellphone with a browser, ever. Unstyled, semantic HTML may not be pretty, but it works. Resist the temptation to corrupt it with CSS and its nutty notion that it could ever maintain cross-compatibility with print.

mrfusion2• 12 years ago

Sounds like a good idea but I'm not really getting it. Do you have an example? Or perhaps what specific HTML changes to HN would make it responsive?

moron4hire2• 12 years ago

View-source on the page. HN's markup is absurdly bad.

webmonkeyuk• 12 years ago

Next in the series: "Lessons in server capacity learnt when we got more traffic than usual". The page doesn't load for me.

As an amusing aside "dom kop" (same phonetic as their domain name) in Dutch or Afrikaans translates to "stupid head"

sergiotapia• 12 years ago

Really really vapid 'article'. It's kind of empty of any real content which indicates to me some kind of voting ring or manipulation seeing this so high on the front page.

Akin to a "lessons learnt writing great software".

"Test on different operating systems." "Run profiling to detect memory leaks" "Don't commit buggy code."

Just some obvious guidelines anybody would know.

owenversteeg• 12 years ago

Taking a look at the web app I think the time would've been much better spent by improving the interface for desktop users. It's extremely unintuitive, several columns just show up blank for me (which I initially thought was a bug) and the top menu bar is duplicated (on the left and on the top.)

Also, in Dutch your site sounds like "stupid head" (domcop, pronounced out loud, sounds like dom kop.)

Lessons learnt making our web app responsive

Related Stories