Feb 11 2013

Designing For The Modern Web

Mobile is shaping the Web in a dramatic way. It is now more exciting than ever to design for the Web thanks to CSS3 / HTML5 and a plethora of accessible new tools like Sketch, Espresso, Slicy, xScope and frameworks like LESS, SASS, Bootstrap, Meteor etc. Today, it is a whole lot easier to get a Website out, make it cross-browsers, adaptable and mobile-friendly by typing a few beautiful lines of codes.


Ever since I first heard about the golden rule of 44 px (2x) for touch-friendly buttons popularized by Apple, I started applying that standard everywhere, even for Web. Because if you want your site to be usable on mobile, you have to make sure that buttons are big enough for your fingers to reach with ease.


Likewise for typography at 30 px (2x), a good modern Website has to have readable fonts so that users of all age groups can easily consume the content without frustration.

Native apps may have won the battle in the consumers’ heart, but that doesn’t mean that the modern Web can’t evolve. Relying on HTML5 alone won’t be enough. Websites will have to be completely responsive, adaptive and make precise use of device-specific grids. Beautiful transitions will come in play to delight users. Eventually, sounds as well as other mobile technologies (Notifications, Camera, Location, etc) will complete the equation.

Design Tools

Sketch is my favorite design tool today. But speaking outside of my preference, what truly is important to me is to have tools that make designing effortless and focus on the user interactions. Whether you use Photoshop, Fireworks or Sketch, you should make sure that you use vector shapes. That will make your designs flexible and resolution independent.


You should also use grids (960-1000 as a base) and think about fallbacks for Mobile users (phones, tablets), which essentially mean go for an Adaptive experience. Believe me, it’s not a lot more work if your process is right. Also, create mockups for popular resolutions such as the iPhone and preview your designs on your phone using xScope. If you’re coding, use Safari’s Web Inspector which allows you to inspect the mobile browser.


Tools like Slicy and Sketch will allow you export assets in 1x and 2x. But ideally, use fonts or SVGs for icons and rely everything else on CSS.



CSS today is extremely powerful and simple. Visual interactions such as mouse-over to show a hidden element can now be done through CSS.

#container:hover button {

This used to rely on obtrusive javascript. And this works cross-browsers thanks to LESS. Imagine a future where coding a few lines can have maximum effects. Every day, there are new tools like Roole whose objective is to make these codes even simpler:

#container:hover button

Dynamic Web

I’m no expert in Node.js, but I’ve been experimenting with Meteor and based on the demos so far, it’s very impressive. I’ve been developing on PHP/MySQL for more than 7 years and I believe that those technologies need to be simplified. More importantly, front-end needs to be completely separated from backend and we should only need javascript for it. Connecting to APIs using JSON with jQuery is incredibly simple. On the other hand, front-end on PHP is a mess.



If you’re building a complex site, you might want to consider frameworks like Bootstrap or Foundation since they already have all of the above figured out. But don’t be lazy and customize. ;)


0 tweets

26 responses to “Designing For The Modern Web”

  1. @pixeliris says:

    Designing For The Modern Web by @MengTo: http://t.co/pQHnDMSz

  2. Designing For The Modern Web, http://t.co/mXK3hYcB

  3. @mdecerle says:

    Designing For The Modern Web http://t.co/ggolfe80

  4. @Noxdzine says:

    Designing For The Modern Web by @MengTo: http://t.co/gqeNCZ9t

  5. @art4websk says:

    Designing For The Modern Web by @MengTo: http://t.co/eNXABubJ

  6. @brandbucket says:

    Designing For The Modern Web http://t.co/lj7jQqM8

  7. @dougjaeger says:

    Designing For The Modern Web. http://t.co/xuOIAFD7

  8. Designing For The Modern Web: http://t.co/dQgKcFXC

  9. @TechRaising says:

    Designing For The Modern Web: http://t.co/1KnUd0u8

  10. […] Designing For The Modern Web. […]

  11. […] Designing For The Modern Web – Mobile is shaping the Web in a dramatic way. It is now more exciting than ever to design for the Web thanks to CSS3 / HTML5 and a plethora of accessible new tools. […]

  12. @_Abizit_ says:

    Designing For The Modern Web by @MengTo: http://t.co/TyZb6cwNET

  13. I just like the useful information an individual supply on your articles. I am going to book mark ones blog page and view just as before the following regularly. I’m relatively particular We are explained to plenty of brand new material correct the following! Best of luck for the following!

  14. Designing For The Modern Web | Meng To|UI/UX Designer http://t.co/iT9J2i3KSD

  15. It can be really a good in addition to helpful bit of info. I’m grateful that you just discussed this handy information along with us. You should stop us up-to-date this way. Many thanks for giving.

  16. Let me instantly use the really simply syndication as I can’t to get the e-mail ongoing weblink or even e-newsletter company. Accomplish you could have almost any? I implore you to let myself realize to make sure that I’ll signed up. Cheers.

  17. domain says:

    Hi, for all time i used to check webpage posts here
    early in the dawn, as i love to learn more and more.

  18. Howdy. I came across your site using ask.. halak horoszkop It is a effectively authored write-up. We’ll ensure that you save them and also resume go through added of your practical details. Information write-up. I’m going to unquestionably return.

  19. LoreanKHebel says:

    Hey there I am so grateful I found your site, I really found you by accident, while
    I was looking on Bing for something else, Anyways I am here now and would just like to say kudos for a incredible post and a all round thrilling blog (I also love the theme/design), I don’t have
    time to browse it all at the moment but I have book-marked it and also added in your RSS feeds,
    so when I have time I will be back to read a lot more, Please do keep
    up the fantastic b.

  20. maria p says:

    First of all every website should be mobile friendly, I mean nowadays people tend to use more of their mobile phones than their computer or laptop so you have to have a website that is easy navigated when a consumer is using a phone.

  21. rojadirecta says:

    It’s hard to find knowledgeable people on this subject, but you sound like you know what you’re talking about!


Leave a Reply