Tag Archives: responsive

Meet XRespond Testing Tool: Let’s Make Building Responsive Websites Simpler

The way people consume information is constantly evolving. As web designers and developers, we keep up with all of the different screen shapes and sizes, learning to create beautiful, flexible software. Yet most of the available tools still don’t reflect the nature and diversity of the platform we’re building for: the browser.
When I was making my first responsive website in 2012, I quickly realized how inefficient and time-consuming the constant browser window resizing was.

Continue reading: 

Meet XRespond Testing Tool: Let’s Make Building Responsive Websites Simpler

Building For Mobile: RWD, PWA, AMP Or Instant Articles?

As we look deep into 2017, one of the questions on every web developer’s mind ought to be, “What trend will define the web in 2017?” Just three years ago, we were talking about the “Year of Responsive Web Design”, and we’ve all seen how the stakes were raised when Google announced Mobilegeddon (21 April 2015) and started to boost the rankings of mobile-friendly websites in mobile search results.

Building For Mobile: RWD, PWA, AMP Or Instant Articles?

Today, as our findings indicate, responsive web design is the norm, with 7 out of 10 mobile-optimized websites being responsive, up from 5 last year, which begs the questions: What’s next? Where is it all heading? We solved the screen-size issue and had a great run for a few years — now what?

The post Building For Mobile: RWD, PWA, AMP Or Instant Articles? appeared first on Smashing Magazine.

More:

Building For Mobile: RWD, PWA, AMP Or Instant Articles?

Figma Vs Sketch: The Showdown

The past year has seen quite a rise in UI design tools. While existing applications, such as Affinity Designer, and Sketch, have improved drastically, some new players have entered the field, such as Adobe XD and Figma.
For me, the latter is the most remarkable. Due to its similarity to Sketch, Figma was easy for me to grasp right from the start, but it also has some unique features to differentiate it from its competitor, such as easy file-sharing, vector networks, “constraints” (for responsive design) and real-time collaboration.

Link:  

Figma Vs Sketch: The Showdown

Designing With Real Data In Sketch Using The Craft Plugin

Besides the user’s needs, what’s another vital aspect of an app? Your first thought might be its design. That’s important, correct, but before you can even think about the design, you need to get something else right: the data.

The image shows a preview of a movie app, designed with the Craft plugin in Sketch

Data should be the cornerstone of everything you create. Not only does it help you to make more informed decisions, but it also makes it easier to account for edge cases, or things you might not have thought of otherwise.

If you want to get even more out of Sketch, feel free to check out our fancy new book, “The Sketch Handbook”, with practical examples that you can follow along, step-by-step, to master even the trickiest, advanced facets and become a true master of Sketch.

The post Designing With Real Data In Sketch Using The Craft Plugin appeared first on Smashing Magazine.

Source article: 

Designing With Real Data In Sketch Using The Craft Plugin

An Introduction To Building And Sending HTML Email For Web Developers

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

An Introduction To Building And Sending HTML Email For Web Developers

Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email.

The post An Introduction To Building And Sending HTML Email For Web Developers appeared first on Smashing Magazine.

Excerpt from – 

An Introduction To Building And Sending HTML Email For Web Developers

Responsive Images In WordPress With Art Direction

Support for responsive images was added to WordPress core in version 4.4 to address the use case for viewport-based image selection, where the browser requests the image size that best fits the layout for its particular viewport.

Responsive Images In WordPress With Art Direction

Images that are inserted within the text of a post automatically get the responsive treatment, while images that are handled by the theme or plugins — like featured images and image galleries — can be coded by developers using the new responsive image functions and filters. With a few additions, WordPress websites can accommodate another responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints.

The post Responsive Images In WordPress With Art Direction appeared first on Smashing Magazine.

Follow this link:

Responsive Images In WordPress With Art Direction

Element Queries, And How You Can Use Them Today

For some time, we’ve run up against the limits of what CSS can do. Those who build responsive layouts will freely admit the frustrations and shortcomings of CSS that force us to reach for CSS preprocessors, plugins and other tools to help us write the styles that we’re unable to write with CSS alone. Even still, we run into limitations with what current tools help us accomplish.
Think for a moment of a physical structure.

Original article:

Element Queries, And How You Can Use Them Today

Responsive And Fluid Typography With vh And vw Units

Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.
Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which we have a practically infinite number of screen sizes to support.

View original – 

Responsive And Fluid Typography With vh And vw Units

Never Stop Learning With Conference Live Streams And Videos

What makes a great conference? It fuels your ideas and polishes up your skills. It fosters your professional growth and takes your work to the next level. Luckily, a lot of conferences provide videos of their talks after the event has ended, some do even stream live to pass on their knowledge even if you couldn’t attend.
The videos collected in this round-up revive the spirit of the conferences they were recorded at and cater for a lot of fresh insights and light-bulb moments to make the learning never stop.

Jump to original: 

Never Stop Learning With Conference Live Streams And Videos

Efficient Responsive Design Process

What’s your responsive design process like? Do you feel that it’s efficient? The following article is an excerpt from Ben Callahan’s chapter “Responsive Process,” first published in the eBook version of Smashing Book 5 (table of contents). We’ve collected some useful techniques and practices from real-life responsive projects in the book — and you can get your hard copy or grab the eBook today. You will not be disappointed, you know.

See original article:

Efficient Responsive Design Process