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.

Mobile

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.

modern-44px

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.

modern-vector

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.

modern-safari

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.

modern-slicy

HTML5 / CSS3 / LESS or SASS

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 {
    .opacity(1);
    .transition(0.5s);
}

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
    opacity(1)
    transition(0.5s)

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.

modern-meteor

Frameworks

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

modern-foundation

0 tweets

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

Leave a Reply