Posts Tagged ‘Responsive Web Design’

We are pleased to present below all posts tagged with ‘Responsive Web Design’.

Creating High-Performance Mobile Websites

Editor’s Note: This article features just one of the many solutions for creating high-performance mobile websites. We suggest that you review different approaches such as Building A Responsive Web App, Improving Mobile Support and Making Your Websites Faster before choosing a particular solution.

People start to lose interest in a website if they don’t get a response within three seconds. Fulfilling this expectation for mobile phone users requires a different approach to usage analysis, design and testing.

Creating High-Performance Mobile Websites

This article expands on the techniques that Johan Johansson explains in his article “How to Make Your Websites Faster on Mobile Devices,” published in April 2013. We’ll demonstrate methods to identify how people interact with a website differently on mobile devices, and the design decisions that can be made based on this understanding.

Read more...

Simple Responsive Images With CSS Background Images

With all the talk of new HTML5 standards such as the srcset attribute and <picture> element, as well as server-side techniques such as Responsive Web Design + Server Side Components (RESS), you'd be forgiven for concluding that simple, static websites can’t support responsive images today.

Simple Responsive Images With CSS Background Images

That conclusion might be premature, however. In fact, there’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s Web browsers: CSS background images.

Read more...

Choosing A Responsive Image Solution

If you code websites, it’s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you’ll need a strategy to make images flexible, too — a responsive image solution.

Choosing A Responsive Image Solution

The basics are fairly simple to learn, but once you’ve mastered them, you’ll find that scaling images is only the beginning — you might also have performance and art direction conundrums to solve.

Read more...

My (Simple) Workflow To Design And Develop A Portfolio Website

Please notice that this article is targeted at newcomers to the industry rather than seasoned designers and developers. The point of the article is to provide a general guide to building meaningful, future-friendly websites today, including strategies, techniques and tools that most Web designers are used to today. — Ed.

A long time ago in a galaxy far, far away… a young designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take in order to stand proud with their peers in this wide world we call the Web. Yes, I’m talking about creating your own portfolio website.

Behind the scenes look at my design and development workflow.

I recently redesigned my own portfolio website. It was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represents my personality and displays my design work in detail, while of course serving as a promotional medium to gain more exposure and business.

Read more...

Media Queries Are Not The Answer: Element Query Polyfill

Responsive Web design has transformed how websites are designed and built. It has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. This, however, deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container.

Media Queries Are Not The Answer: Element Query Polyfill

Extensive use of media queries might be the answer for today, but it is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size.

Read more...

Adapting To A Responsive Design (Case Study)

This is the story of what we learned during a redesign for our most demanding client — ourselves! In this article, I will explain, from our own experience of refreshing our agency website, why we abandoned a separate mobile website and will review our process of creating a new responsive design.

Adapting To A Responsive Design (Case Study)

At Cyber-Duck, we have been designing both responsive websites and adaptive mobile websites for several years now. Both options, of course, have their pros and cons.

Read more...

Facing The Challenge: Building A Responsive Web Application

We are talking and reading a lot about responsive Web design (RWD) these days, but very little attention is given to Web applications. Admittedly, RWD still has to be ironed out. But many of us believe it to be a strong concept, and it is here to stay. So, why don’t we extend this topic to HTML5-powered applications?

Facing The Challenge: Building A Responsive Web Application

Because responsive Web applications (RWAs) are both a huge opportunity and a big challenge, I wanted to dive in. Building a RWA is more feasible than you might think. In this article, we will explore ideas and solutions.

Read more...

↑ Back to top