An Interview With Marko Dugonjić


Marko Dugonjić is a web professional from Velika Gorica, Croatia. He's recognized as an expert on web standards and standards-based web sites. By focusing on simplicity, he creates accessible and easy to use web interfaces which are both visually appealing and highly usable. He's also the creator of the famous Typetester.

1. Welcome to Nettuts+! Please introduce yourself! Could you tell us where you're from and how you got started in this field?

Hi, thanks for having me!

I'm Marko Dugonjić, web designer and developer from Croatia. My educational background is in kinesiology and I've been quite intimate with the problems that disabled people encounter every day. So, I became interested in accessibility.

At that time, there were just a few individuals in Croatia who ever heard of designing web sites with accessibility in mind. Naturally, I felt a need to fill in that gap. I soon found and purchased his book, "Design with Web Standards", and started educating Croatian Internet folks about the values of web standards through popular forums. The rest is history :)

2. What was the major motivation that got you interested in web design and development?

Curiosity. I'm always into something new and expanding my horizons. While I was studying Physics and Chemistry in Zagreb, I often studied in the National and University Library. They had a free Internet connection, so when I would take a break, I'd go downstairs and discover the wonders of the Internet.

The first web site I made was for my dogs. That was a very affordable way of connecting with breeders and dog handlers from around the world. Then, one occasion, a friend asked me to do a web site for a local church. People liked what I did, so they kept coming back to me for more web sites.

3. Many of us are familiar with you and your work, thanks to . For those who've never heard of Typetester, could you tell us how you came up with the idea and what was your main motivation behind the project?

When I was working at Web.burza as a front-end developer, the designers often delivered PSD's that — typographically speaking — couldn't be transformed identically to a browser environment. Letter-spacing was often different, leading too. And the major discrepancy was font anti-aliasing.

One day Marko Kršul, the Art Director, said something like: "This looks awkward. Could you please do a few CSS versions, so I can choose from a few options?" So I did. We finally settled-down with a slightly lighter shade of gray and a larger font-size than in Photoshop.

I didn't want to waste my time doing this kind of CSS tweaking on each and every project, so I created rudimentary tool for testing type side-by-side in a browser. When a couple of others saw this, they demanded more features. I added those and then locked the wish-list. I designed the interface, did one more round of testing and, since everyone who tested it started using it in their process, I decided to release it to the public.

What started as an exercise in web application design and development, ended up as a useful tool for many people.

4. You are obviously a typography lover. Have you ever designed your own font? If not, have you any plans to design one?

Haha, I really am a fan of typography... In music there are composers (people who create music) and performers (folks who sing or play). They are both artists. Likewise in typography, there are type designers and those who set type — typesetters. I'm the latter kind. Only for the web.

But: never say never.

5. Most people I know refer to you as a "CSS guru"; you're respected worldwide for that. Where does your love and passion for CSS come from and why?

I see CSS as a tool to achieve standards compliant layouts. Don't do CSS because you like CSS or for the community status. Do it with a purpose and for a reason. For me the reason is web standards compliant built web sites.

That's not a love or passion thing. If you are doing front-end for a living, you simply have to master HTML, CSS and JavaScript.

Be passionate about the result, not the method. A cook masters her kitchen equipment, but she is passionate about the flavor of a dish.

I’m passionate about the text scaling in IE 6.

6. Can you tell us what what your definition of web standards is, and how you manage to come along with it in all of your projects?

Web standards are a set of recommendations and guidelines about how web sites should be built and how should they technically function. They are by no means definitive and are constantly changing — evolving. That is the beauty of it.

When you perceive web standards as a normal thing, a default — the way web sites just should be working — then it becomes natural to you. You don't think about it anymore. You just build web sites the correct way.

I still see developers worry about the validator more than writing semantically correct HTML structures. It's not about the validation, it's about the idea — access by anyone and everyone.

7. You've worked on some interesting projects. One of them was the new Krop website. Tell us about your responsibilities and your experiences on this project?

I've worked with QBN for about two years now. On their projects, I work strictly as a front-end developer. The secret of great relationship is a mutual understanding of each person's issues. My issues are apparent: cross-browser issues.

QBN projects are always ahead of time. I like being a part of that. It sharpens my front-end skills :)

8. Can you generally walk us through your design process?

I don't have a process set in stone, but rather a few various approaches.

I rarely start with the visuals, because I'm a strong believer in content-supportive and not decorative web design. I love to first discover all about the matter at hand, users needs, business goals etc. This is sometimes done heuristically, and sometimes with real data.

If a web site has to deliver a message through visuals, then I'd start listing terms and draw simplified shapes of metaphors in my sketchbook, but if I already have some decent amount of content, I start sketching and wire-framing the parts of a site map.

Quite often, I set-up a basic WordPress theme, and create major pages and page types, so I have a simple prototype to work with. At that stage, I even might upload it to a temporary server for clients to review and browse through the site. If needed, the content and the relations between sections are adjusted. This stage is quite useful to shift the client's mindset from "how the web site will look like" to "how the web site will be used", which is very important for the final result.

When I have all the content set in place, I then open Photoshop and start pushing pixels based on my paper drawings.

9. What are the biggest challenges that you face in web design currently?

My personal challenge is a lack of time to learn everything I would like to. For instance, I'd love to master motion tools, but still don't have time. Maybe next year...

In general, the biggest challenge is educating clients about the user experience, explaining why they need usability testings and reviews, and about the true powers of their web site or application.

Many investors come to me with an idea of forums and/or similar community features, but they rarely realize that they don't have resources to handle this. They often overhear the idea (or read a blog post entitled "Increase revenue with social network"), but can neither really understand nor explain why they need it.

10. What makes the difference between a web designer and a great web designer? In your opinion, what qualities should one have?

Great web designer should be well versed in both visual tools like Photoshop or Flash and in HTML/CSS editor. Because web layouts are not printed and then sent out, a great web designer will know her fallback options and is aware that once the web site is released, how it's used is out of her control.

11. Are you currently working for any design companies or are you freelancing full time now?

At this stage of my life, I decided to work freelance full-time. I enjoy the flexibility of the freelance schedule, and I'm now spending more time with my little boys.

Since it's all new to me, I don't have any valuable advice, but so far I like it. I work much faster and am generally more pleased with the results.

12. We had a chance listening you at Web.start 2008 where talked about the user experience. Can you give us the answer to the magical question: "What is it that the user wants?"

The short answer is: try to figure it out for each project.

The long answer is: learn as much as you can to deliver heuristic conclusions; and Steve Krug's book, "Don't Make Me Think" are a good start. Then conduct user tests, depending on the scale of the project. Nowadays, there's plenty of methods to test users - and applications like Silverback enable you to set-up a mini-usability testing facility for any project.

In my experience, users want it quick, simple and understandable - yet interesting, engaging and appealing. Because it must be appealing, “usable” Verdana 16px #000 on #fff doesn’t work everywhere.

13. How do you see the web ten years from now?

In the near future, browser will likely replace OS for the average Jane user, and with a dramatic increase in connection speed, all the content and applications will be online. Browser will become the interface.

Mobile is the new Desktop.

14. What activities and hobbies do you enjoy when you're not on the computer designing?

My main offline activity is spending time with my family — that includes building LEGO cities, playing with clay, drawing with crayons etc. We also have a dog, so I spend some time each day outdoors.

I teach Aikido for Children. If only I could become a snowboard Pro.

15. Do you have any websites or projects you would like to shamelessly plug to 40,000 subscribers and 1 million readers every month?

I insist! :)

16. Thanks again for providing Nettuts+ with this opportunity to interview you. Any final thoughts for our readers?

I always say to my kids: never stop learning and don't forget to practice what you've learned.

Related Posts
  • Design & Illustration
    Interview With Mobile Interface Designer, Alan PowerPreview
    A chat about designing mobile interfaces with Alan Power.Read More…
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Web Design
    Case Studies
    How They Did It: Alice in VideolandAlice retina
    This summer I started building a modern retelling of "Alice in Wonderland", an interactive storybook web app by the name of Alice in Videoland. It ended up being featured in a sister article in Adobe Inspire as well as turning into an encore-winning presentation I gave at CSS Dev Conf 2013. The project was meant to be educational, a testing ground for new CSS animation techniques and desktop-to-tablet JavaScript. I keep Alice's source up on GitHub where anyone can examine my code, but sometimes it's nice to have someone go over the reasoning with you.Read More…
  • Code
    Interview With Bruce Lawson of OperaBlawsonretina
    There's a perception that being in developer relations for a browser maker is all glamor and glitz involving lots of jet setting and rockstar-like experiences. So far I haven't personally found that to be the case but in looking at the life of Opera evangelist Bruce Lawson, I think he may be fitting that description.Read More…