Mes liens
796 shaares
9 results
tagged
NetMagazine
In this tutorial we’ll look at bringing some of the web’s mobile techniques to HTML email. User take-up of mobile email is massive: some email campaigns get more mobile opens than desktop, yet many marketing emails render poorly on mobile devices. Mobile support on the web has never been better – so if you’re sending emails that drive customers to the web, it makes sense to design mobile friendly emails too.
The design challenges for mobile email are similar to those on the web: we have a small screen, a touch interface and (sometimes) users are out and about – so the design approach is similar. We have one extra challenge, in that many older mobile email clients lack proper support for media queries.
With this in mind, our best approach is to design a campaign that works well on both desktops and mobiles, and then use media queries where they’re supported to add an extra layer of optimisation for smartphones.
The design challenges for mobile email are similar to those on the web: we have a small screen, a touch interface and (sometimes) users are out and about – so the design approach is similar. We have one extra challenge, in that many older mobile email clients lack proper support for media queries.
With this in mind, our best approach is to design a campaign that works well on both desktops and mobiles, and then use media queries where they’re supported to add an extra layer of optimisation for smartphones.
A technique, at its core, is a way to carry out a task and, being frontend developers and designers, we have a lot of tasks. That said, we often forget how much this landscape has changed. From 2002 to 2010 our community was rotten with code and resource bloat, hindering performance and maintainability. To overcome this, we created a slew of tips, tricks and hacks we dubbed ‘technique’. We were still accomplishing tasks, just not in the most efficient manner.
Doing a 360, the last few years have seen better standards and standards implementations spring to life, enabling us as a community to develop newer and more advanced ‘techniques’. This new landscape is what’s considered the ‘modern web’.
As ‘Web 2.0’ became stagnant and confusing, so too will the ‘modern web’. Give it time. That said, for now, we can use and abuse the term so long as there is a common understanding of what it represents.
In 2010 the HTML5 specification landed, providing a brand new, semi-standardised web environment. Browsers such as Opera, Firefox, Chrome and Safari embraced this new wave and pushed their dev teams to new limits of standards implementations and API exploration. To give you an idea of how ‘onboard’ these browsers are, check www.html5readiness.com’s visualisations of changing HTML5 support.
Doing a 360, the last few years have seen better standards and standards implementations spring to life, enabling us as a community to develop newer and more advanced ‘techniques’. This new landscape is what’s considered the ‘modern web’.
As ‘Web 2.0’ became stagnant and confusing, so too will the ‘modern web’. Give it time. That said, for now, we can use and abuse the term so long as there is a common understanding of what it represents.
In 2010 the HTML5 specification landed, providing a brand new, semi-standardised web environment. Browsers such as Opera, Firefox, Chrome and Safari embraced this new wave and pushed their dev teams to new limits of standards implementations and API exploration. To give you an idea of how ‘onboard’ these browsers are, check www.html5readiness.com’s visualisations of changing HTML5 support.
Steve Fisher and Alaine Mackenzie set out their vision for responsive web design as it approaches maturity
Let’s be clear: design is the solution only if it focuses on the deeper issues at hand, the why behind everything. A solid process should always guide our work, but we need to embrace something more flexible. Our medium has finally proven itself to be fluid, so shouldn’t our process? Think about system design: you need to see both the whole picture and the tiny details. Impossible? Far from it!
Frank Chimero puts it beautifully in his book The Shape of Design: “There is a part where the artist steps back from the easel to gain a new perspective on the work. Painting is equal parts near and far: when near, the artist works hard to make his mark; when far, he assesses the work in order to analyse its qualities. He steps back to let the work speak to him.”
We need to let our work, our medium, speak to us. With the rise of responsive design, we are finally embracing our medium as it was meant to be: fluid. It is a brilliant time to step back and assess the work, analyse, and embrace a new way of doing things, a new process. Gone are the days of static mock-ups and web designers who don’t understand code. It is time for a responsive process.
Let’s be clear: design is the solution only if it focuses on the deeper issues at hand, the why behind everything. A solid process should always guide our work, but we need to embrace something more flexible. Our medium has finally proven itself to be fluid, so shouldn’t our process? Think about system design: you need to see both the whole picture and the tiny details. Impossible? Far from it!
Frank Chimero puts it beautifully in his book The Shape of Design: “There is a part where the artist steps back from the easel to gain a new perspective on the work. Painting is equal parts near and far: when near, the artist works hard to make his mark; when far, he assesses the work in order to analyse its qualities. He steps back to let the work speak to him.”
We need to let our work, our medium, speak to us. With the rise of responsive design, we are finally embracing our medium as it was meant to be: fluid. It is a brilliant time to step back and assess the work, analyse, and embrace a new way of doing things, a new process. Gone are the days of static mock-ups and web designers who don’t understand code. It is time for a responsive process.
SEO tools can help speed up your process and save you time, allowing you to concentrate on the important tasks. But with so many out there promising the earth how can you decide what you need and which tools to choose?
To help you out, we’re going to list the best tools for specific SEO jobs. Some of them are free and some require a paid subscription, but most offer a free trial so you can check them out and decide if they’re right for you.
However, don’t go signing up to every tool you see here. First you need to make a SEO plan for your website and decide where you could benefit from some help.
When it comes to SEO, planning is everything. So make a six-month plan for your campaign and make sure you follow it through. These tools are here to help you with your campaign, but they won’t do it all for you.
We’ve categorised our chosen tools into the main tasks of an SEO campaign, in the order you’d normally action them, starting with the research phase. You can consider these categories as your top-level tasks when creating your plan. And remember, “He who fails to plan is planning to fail”.
To help you out, we’re going to list the best tools for specific SEO jobs. Some of them are free and some require a paid subscription, but most offer a free trial so you can check them out and decide if they’re right for you.
However, don’t go signing up to every tool you see here. First you need to make a SEO plan for your website and decide where you could benefit from some help.
When it comes to SEO, planning is everything. So make a six-month plan for your campaign and make sure you follow it through. These tools are here to help you with your campaign, but they won’t do it all for you.
We’ve categorised our chosen tools into the main tasks of an SEO campaign, in the order you’d normally action them, starting with the research phase. You can consider these categories as your top-level tasks when creating your plan. And remember, “He who fails to plan is planning to fail”.
When looking at personal sites of web designers and developers, you’ll often see a lot of unique (and sometimes insane) concepts and designs that you’d never see on any ‘real world’ website. Personal sites tend to be the one area where people allow themselves to truly unleash their creativity. This often goes a long way in showing both your own personality, and the ability to think a little differently from the herd.
We’re going to use one of my own plug-ins, jQuery Scroll Path, as a tool to transform a conventional site layout into something that resembles an interactive presentation. The sections of the page will be spread out and rotated across a two-dimensional plane, and bound together with a path that the browser window follows when the user scrolls the page.
We’re going to use one of my own plug-ins, jQuery Scroll Path, as a tool to transform a conventional site layout into something that resembles an interactive presentation. The sections of the page will be spread out and rotated across a two-dimensional plane, and bound together with a path that the browser window follows when the user scrolls the page.
New CSS properties offer easy ways to lay out web pages. Thomas Lewis of Microsoft walks you through Grid Alignment, Flexible Box and Multi-column Layout
Laying out pages in CSS has always seemed a more complicated process than it needs to be. So here’s some great news: there are fresh specs that will make creating layouts a much simpler task for web designers.
The major browsers, with the help of bodies such as the W3C, are starting to provide standards and implementations for a variety of new layout options that we can begin using today. For example, the W3C currently considers CSS3 Multicolumn Layout Module a Candidate Recommendation. Basically this means it’s at the point where the W3C is comfortable with browsers implementing it as a feature.
Laying out pages in CSS has always seemed a more complicated process than it needs to be. So here’s some great news: there are fresh specs that will make creating layouts a much simpler task for web designers.
The major browsers, with the help of bodies such as the W3C, are starting to provide standards and implementations for a variety of new layout options that we can begin using today. For example, the W3C currently considers CSS3 Multicolumn Layout Module a Candidate Recommendation. Basically this means it’s at the point where the W3C is comfortable with browsers implementing it as a feature.
Shwetank Dixit of Opera Software explains how to use localStorage to save data offline so that what a user types into the form isn’t lost if disaster strikes
How many times have you been in the middle of meticulously typing information inside a form and – BAM! – the browser crashed? I bet it’s happened a few times at least. And when it has, you’ve had to open the browser, go to the URL again and enter all that information one more time – hoping the browser doesn’t crash again a few minutes later.
Various things can and do go wrong every day when filling in online forms. The browser may crash, your internet connection can barf at the wrong moment (especially on dial-up or flaky Wi-Fi), or you could even accidentally close the page yourself (something I’ve been guilty of myself at times).
How many times have you been in the middle of meticulously typing information inside a form and – BAM! – the browser crashed? I bet it’s happened a few times at least. And when it has, you’ve had to open the browser, go to the URL again and enter all that information one more time – hoping the browser doesn’t crash again a few minutes later.
Various things can and do go wrong every day when filling in online forms. The browser may crash, your internet connection can barf at the wrong moment (especially on dial-up or flaky Wi-Fi), or you could even accidentally close the page yourself (something I’ve been guilty of myself at times).
Tom Gullen presents a primer on SEO (not only) for startups and explains common misconceptions and mistakes as well as the importance of accessibility
SEO is an industry that sparks frequent heated debate and passionate responses. It’s an industry that is often misunderstood and even dismissed. Yet for startups a basic SEO foundation and understanding of it is likely to be of crucial importance, and can really help them on their path to success.
So how do we go about beginning to optimise our startup’s website for search engines? Accessibility should be a primary concern for websites not only because it makes your website accessible for less able people, but also because a search crawler bot should be considered your least able user. Developing your website in a highly accessible manner comes with the additional benefit of making your website highly accessible for search engine crawlers.
Basic accessibility for websites isn’t difficult to achieve.
SEO is an industry that sparks frequent heated debate and passionate responses. It’s an industry that is often misunderstood and even dismissed. Yet for startups a basic SEO foundation and understanding of it is likely to be of crucial importance, and can really help them on their path to success.
So how do we go about beginning to optimise our startup’s website for search engines? Accessibility should be a primary concern for websites not only because it makes your website accessible for less able people, but also because a search crawler bot should be considered your least able user. Developing your website in a highly accessible manner comes with the additional benefit of making your website highly accessible for search engine crawlers.
Basic accessibility for websites isn’t difficult to achieve.
With CSS3 transforms now supported in most major browsers, we have the delightful opportunity to create innovative layouts and interfaces. No longer are we shackled in our one-dimensional prisons, bound to the tyranny of vertically-scrolling sites.