This category features articles on best and emerging practices for responsive website design, Web apps and native apps. While the mobile Web is still in it’s infancy, we can learn from the experiences of professionals who are working on mobile every day. Curated by Derek Allard. Subscribe to the RSS-Feed.
In the early days of mobile, debugging was quite a challenge. Sure, you could get ahold of a device and perform a quick visual assessment, but what would you do after discovering a bug?
With a distinct lack of debugging tools, developers turned to a variety of hacks. In general, these hacks were an attempt to recreate a given issue in a desktop browser and then debug with Chrome Developer Tools or a similar desktop toolkit. For instance, a developer might shrink the size of the desktop browser’s window to test a responsive website or alter the user agent to spoof a particular mobile device.
Responsive web design has become the dominant method of developing and designing websites. It makes it easier to think “mobile first” and to create a website that is viewable on mobile devices. In the early days of responsive web design, creating breakpoints in CSS for particular screen sizes was common, like 320 pixels for iPhone and 768 pixels for iPad, and then we tested and monitored those devices.
As responsive design has evolved, we now more often start with the content and then set breakpoints when the content “breaks.” This means that you might end up with quite a few content-centric breakpoints and no particular devices or form factors on which to test your website.
Do you know which platforms and email clients to focus on when creating an email newsletter for yourself or a client? Using the data from over 22 billion email subscribers, we determined what designers should prioritize, both this year and beyond.
In this article, we’ll interpret the numbers from our “Email Marketing Trends” report to help designers like you make informed decisions about what works and what doesn’t in email newsletters.
“Know your audience” has stood as a fundamental marketing principle since long before the web. When advertising online, you need to take into account one of the most basic factors of the audience you are reaching: what devices they are using.
The most popular online advertising platform, in use by marketers of all sizes, is Google AdWords. Up until early 2013, AdWords allowed advertisers to set up separate campaigns to target mobile devices. Best practice generally entailed targeting mobile, desktop and sometimes tablet users in unique campaigns.
Nowadays, displaying onboarding screens to first-time users has become a common practice in mobile apps. The purpose of these onboarding screens — also referred to as walkthroughs — is to introduce the app and demonstrate what it does.
Given that these are often the first set of screens with which users interact, they also set the users’ expectations of the app. Therefore, it is essential that those involved in creating the product — product managers, designers, developers — take the time to evaluate whether onboarding is necessary for the app and, if so, to determine the best way to implement it.
This article is the first part of a series of articles on emerging responsive design tools. Today, Richard Knight explores the advantages of Webflow and how you can use it today to build responsive websites — perhaps a bit faster than you would build them otherwise. – Ed.
New tools have emerged to address the challenges of responsive web design — tools such as Adobe Reflow and the recently released Macaw. Today, we’ll look at one that I have tested extensively in the last few months. Though not perfect, it’s been a leap forward in productivity for the team that I work with. Its name is Webflow, and it could be the solution to the problems you face with static design comps produced in Photoshop and Fireworks.
This article will take you step by step through the process of creating a responsive website layout for a real project. As we go along, we’ll also identify Webflow’s advantages and where it comes up short.
Look at your calendar. If you’re anything like me, all you see are meetings, places to go, things to do, people to meet and not a lot of white space. Few people love their calendar. So, we set out to change that, and we learned a lot in the process.
Our app is an iPhone app that flips your calendar upside down and lets you focus on the free time in your day, instead of all the busy time. The app itself has been around since 2011, but the story of how it came to be and what our team ultimately learned is one that I have been wanting to tell for quite some time. It’s the story of how limitations led to my biggest success in the App Store — and my biggest failure.
You resize the browser and a smile creeps over your face. You’re happy: You think you are now mobile-friendly, that you have achieved your goals for the website. Let me be a bit forward before getting into the discussion: You are losing users and probably money if responsive web design is your entire goal and your only solution for mobile. The good news is that you can do it right.
In this article, we’ll cover the relationship between the mobile web and responsive design, starting with how to apply responsive design intelligently, why performance is so important in mobile, why responsive design should not be your website’s goal, and ending with the performance issues of the technique to help us understand the problem.
My Android Galaxy smartphone is so sweet. It plays games, has a lovely screen and lets me check all of my favorite websites while I’m commuting to and from work. And my new iPad is even better; it’s all I use at home when I’m relaxing in the living room, cooking in the kitchen or toileting on the toilet. As a consumer of electronic gadgets, I’m happier than Angelina Jolie in an orphanage with all of the devices with which I can use to access the Internet. As a developer, I hate it.
Have you seen how many browsers and devices we have to test now? I remember when Internet Explorer (IE) 8 came out and we were annoyed that we had to start testing six browsers. Now, we’re testing at least 15! Back then, when every home had broadband and before anyone had a smartphone, we were living in the Golden Age of web development. We never knew how easy our jobs were.
It's one thing to create a web application and quite another to keep it accessible — independent of the device that the user is using and its capabilities. That's why Heydon Pickering, now the accessibility editor on Smashing Magazine, wrote an eBook Apps For All: Coding Accessible Web Applications, outlining the roadmap for well-designed, accessible applications.
This article is an excerpt of a chapter in the eBook that introduces many of the ideas and techniques presented. Reviewed by Steve Faulkner, it's an eBook you definitely shouldn't miss if you're a developer who cares about well-structured content and inclusive interface design. – Ed.
Because the W3C’s mission from the outset has been to make the web accessible, accessibility features are built into its specifications. As responsible designers, we have the job of creating compelling web experiences without disrupting the inclusive features of a simpler design.