Posts Tagged ‘Responsive Web Design’

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

Responsive Images With WordPress’ Featured Images

It’s been a couple of years now since the concept of responsive design took the Web design world by storm, and more and more websites are going responsive. But there are still some barriers and potential problems, not the least of these being the challenge of reducing the size of files that you’re sending to mobile devices.

WordPress Featured Images

In this article, we’ll look at how to use WordPress' built-in featured images capability to deliver different-sized image files to different devices. "Featured images," sometimes referred to as thumbnails, is a feature of WordPress that has been vastly improved since version 3.

Read more...

Creating Mobile-Optimized Websites Using WordPress

“Mobile Web design.” Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.

Why We Shouldn't Make Separate Mobile Websites

Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Read more...

Mobile First Isn't always the answer A Foot On The Bottom Rung: First Forays Into Responsive Web Development

Responsive design is the hottest topic in front-end Web development right now. It’s going to transform the Web into an all-singing, all-dancing, all-devices party, where we can access any information located anywhere in the world. But does responsive design translate well from the text-heavy Web design blogosphere to the cold hard reality of commercial systems?

First Forays Into Responsive Web Development

Rumors came through our office grapevine that management was looking to revamp our mobile presence. There was talk of multiple apps being built externally that could be used on some of the major mobile devices.

Read more...

Stop Redesigning And Start Tuning Your Site Instead

In my nearly two decades as an information architect, I’ve seen my clients flush away millions upon millions of dollars on worthless, pointless, “fix it once and for all” website redesigns. All types of organizations are guilty: large government agencies, Fortune 500s, not-for-profits and (especially) institutions of higher education.

Stop Redesigning And Start Tuning Your Site

Worst of all, these offending organizations are prone to repeating the redesign process every few years like spendthrift amnesiacs. Sadly, redesigns rarely solve actual problems faced by end users. I’m frustrated because it really doesn’t have to be this way. Let’s look at why redesigns happen, and some straightforward and inexpensive ways we might avoid them.

Read more...

Why We Shouldn’t Make Separate Mobile Websites

There has been a long-running war going on over the mobile Web: it can be summarized with the following question: "Is there a mobile Web?" That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites. I disagree.

Why We Shouldn't Make Separate Mobile Websites

Jakob Nielsen, the usability expert, recently published his latest mobile usability guidelines. He summarizes, "Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work."

Read more...

Device-Agnostic Approach To Responsive Web Design

This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.

Device-Agnostic Approach To Responsive Web Design

Let’s start our journey by looking at the online tools such as Responsive Design Testing, Responsive.is, Responsinator and BriCSS. These pages let people check websites through a set of pre-built views based on various device sizes or orientations. Bricss even goes one step further and allows you to "customize" viewports by setting any dimensions you want.

Read more...

Is There Ever A Justification For Responsive Text?

Depending on who you follow and what you read, you may have noticed the concept of “responsive text” being discussed in design circles recently. It’s not what you might imagine — resizing and altering the typography to make it easier to read on a range of devices — but rather delivering varying amounts of content to devices based on screen size.

Website for Sifter App

One example of this is an experiment by designer Frankie Roberto. Another is the navigation menu on the website for Sifter App. Roberto and Sifter are using media queries to actually hide and display text based on screen size (i.e. not rewriting or delivering different content based on context — as one would do with mobile-focused copy, for example).

Read more...

Content Prototyping In Responsive Web Design

Michelangelo once said, "The best of artists has no conception that the marble alone does not contain within itself." Translate this to the world of Web design and you might say, "No matter how great a designer you are, you’re only as good as your content." While the reality of client work sometimes makes it challenging to gather and produce content prior to starting the design, this is now widely accepted as being necessary.

You may have heard this referred to as “content-driven design.” I’m not the first to suggest that our current approach to responsive Web design could be improved by imparting a bigger role to content in determining how our websites respond. However, I haven’t seen many (if not any) practical explanations on how to do this. I’d like to start this conversation by introducing a theoretical concept called a “content prototype.”

Read more...

Freebie: Responsive jQuery Slider Plugin Flexslider

When it comes to responsive design, it's not just about fluid images or adaptive layouts. It's also about the responsive methodology behind the entire design process. In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with.

This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details). It just makes sense to consider each and every design component — including the image slider.

Read more...

From Monitor To Mobile: Optimizing Email Newsletters With CSS

HTML email has a reputation for being a particularly tough design medium. So tough, in fact, that many designers regard coding and testing even the simplest email design to be almost as bad as fixing display quirks in Internet Explorer 6, and only slightly better than a tooth extraction. So, it’s with much courage that I tell you today about using CSS in email newsletters: what works, where it’s going and what you should do next.

From Monitor To Mobile: Optimizing Email Newsletters With CSS

After reading this article, you will hopefully come away with a few ideas on how to start coding email designs with improved readability and usability when viewed in Web, mobile and email desktop clients alike. Also included are a variety of resources to get you on the right path with using CSS in email.

Read more...

↑ Back to top