Lessons learnt making our web app responsive(domcop.com)
domcop.com
Lessons learnt making our web app responsive
https://www.domcop.com/blog/lessons-learnt-expired-domains-responsive/
11 comments
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...
Took the words out of my mouth. Credibility of the article has been diminished by that error.
haha. That's embarrassing. That is the default 2014 wordpress theme. Did not think of testing that.
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.
.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.
Thank you. Switched to the default twenty wordpress fourteen theme.
Murhpy's law strikes again!
Murhpy's law strikes again!
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
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
Hmm. What you say makes a lot of sense.
Thanks for the link to the book. It looks pretty interesting.
Thanks for the link to the book. It looks pretty interesting.
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.
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.
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.
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?
View-source on the page. HN's markup is absurdly bad.
So you mean HN should switch to div's and p's?
I can't even tell what it's doing right now ...
I can't even tell what it's doing right now ...
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"
As an amusing aside "dom kop" (same phonetic as their domain name) in Dutch or Afrikaans translates to "stupid head"
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.
I guess there's a seventh lesson they still haven't learnt yet.
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.)
Also, in Dutch your site sounds like "stupid head" (domcop, pronounced out loud, sounds like dom kop.)
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 .
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.
Yup, still some more lessons to learn here.
Go irony!
Go irony!
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.
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.