
Lessons learnt making our web app responsive - webstartupper
https://www.domcop.com/blog/lessons-learnt-expired-domains-responsive/
======
sergiotapia
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.

------
didgeoridoo
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...

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

~~~
didgeoridoo
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.

~~~
webstartupper
Thank you. Switched to the default twenty wordpress fourteen theme.

Murhpy's law strikes again!

~~~
didgeoridoo
Much better.

Unfortunately, checking out the domcop.com site, I'm afraid you guys have a
long way to go in making it "responsive". You've solved a lot of the
"technical" HTML and CSS challenges — but the design and UX totally melts down
at smaller screen sizes, and on devices that are touch-only (try figuring out
what those nine menu icons mean without hover events).

Ultimately, there's a lot more to being "responsive" than basic UI acceptance
testing on a range of devices. You have to do proper cross-device user testing
to see if people can figure out how to move through your interface fluidly. If
they can't, you need to redesign certain aspects of your UI.

There's also a strong argument in many cases for not going responsive at all.
If your "phone" and "desktop" use cases don't line up well, you may be looking
at a situation where an m. site (what is this, 2003?) is actually more
appropriate. That way, you can serve a UI specifically optimized to the tasks
your users are likely to be performing on a smaller screen.

tl;dr: "Responsiveness" is a UX problem as much as it is a technical problem.
Don't ignore the user-facing side of the equation.

Addendum: regarding point 6, "Learn about how responsive design works before
you start" — you're confusing learning responsive design with learning how to
use Bootstrap. To actually learn responsive design from scratch, a good place
to start is Ethan Marcotte's classic Responsive Web Design:
[http://www.abookapart.com/products/responsive-web-
design](http://www.abookapart.com/products/responsive-web-design)

~~~
webstartupper
Hmm. What you say makes a lot of sense.

Thanks for the link to the book. It looks pretty interesting.

------
skizm
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.

------
moron4hire
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.

~~~
mrfusion
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?

~~~
moron4hire
View-source on the page. HN's markup is _absurdly_ bad.

~~~
mrfusion
So you mean HN should switch to div's and p's?

I can't even tell what it's doing right now ...

------
webmonkeyuk
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"

------
camillomiller
This is what I see on my iPad.
[http://imgur.com/3y4zpXT](http://imgur.com/3y4zpXT)

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

------
owenversteeg
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.)

------
tahmida_t
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 .

------
untilHellbanned
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.

------
Donzo
Yup, still some more lessons to learn here.

Go irony!

------
lgmspb
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.

