Posts Tagged:responsive design

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

Responsive Images in WordPress with Cloudinary, Part 1

If you’re reading this, you’re probably already familiar with responsive images. Even so, it may be helpful to have a little background. (Then we’ll get to the WordPress part, and how to make them even better with Cloudinary.) For most of the Web’s existence, any time you wanted to include an image on a web page, you would create markup that looked like this: <img src=”/path/to/my/image.jpg” alt=”a very nice image”> In this example, the <img> element references a single image file named `image.jpg` located on a server at `/path/to/my`. This markup is straightforward in that it tells the browser to download and render a specific image file, referenced by the src element, onto the web page. This arrangement was fine until 2010, when Ethan Marcotte published his seminal article, Responsive Web Design, which popularized the technique of using Cascading Style Sheet media queries to modify the layout of web pages…

Read More →

Where Are All the Creative Web Designers At?

There’s a common notion in the industry these days that web designers are stuck in a pit of uncreativity. The open canvas we once had as web professionals feels considerably more constrained these days by the growing collection of best practices, new technology trends and the use of automated tools. So what happened to the rare breed of creative web designers – did they really all disappear without a trace or is the more to the story behind a web that feels eerily familiar wherever you go?   The same old templates argument This is where the notion of web design becoming uncreative all stems from. Once platforms like WordPress and Shopify started publishing themes and templates the web gradually started to look more formulaic. Not only were designers creating these templates within the confines of their chosen platform but people were buying these templates in mass numbers.   Shopify’s themes…

Read More →

7 New Adobe Typekit UI Upgrades To Make Typography Easier

Adobe has been a leader in design and technology for years, and the company has developed powerful products that satisfy graphic designers of varying skill levels. While Adobe Photoshop and Illustrator are killing it in terms of popularity, one application that serious graphic design experts are using these days is Adobe Typekit. What is Adobe Typekit? Adobe Typekit is a design service initially released by Small Batch, Inc. in September 2009 and acquired by Google in October 2011. Its core business is offering premium quality fonts made available through annual subscription plans. The fonts stored in Adobe Typekit can be used on websites or synced via Adobe Creative Cloud to various applications installed on the user’s computer. As of this writing, Adobe Typekit consists of more than a thousand font families from various foundries. These are offered as a standalone service and as part of Adobe’s Creative Cloud. Meanwhile, hundreds…

Read More →

Powerful SEO Trends for 2017 To Boost Your Search Ranking

If you think fashion and technology change too frequently for people to keep up, the same is true with search engine optimization (SEO). Standards in the field of SEO get updated practically every year, and this year is no different. In this article, we will discuss SEO trends for 2017 that will set the tone for search, and bring websites and companies to a whole new SEO ballgame. Why Should You Update Your SEO Strategies Regularly? This question is really a no-brainer, but unfortunately a lot of companies fall prey to one fallacy: that their website will run along with the times even without updating it so much. This mindset couldn’t be farther from the truth! Here are some reasons why you should keep up with updates on SEO strategies: Google is a fickle-minded but extremely powerful online giant. If you haven’t recognized the power of Google, then you’re probably…

Read More →

Benefits of Sending Emails That Follow Responsive Design

Newsletters provide businesses with a great way to reach out to their customers. There is a huge chance that most of your customers have a smartphone or tablet, and many of them are subscribers to your newsletter. Likewise, some of your subscribers will probably read your email newsletters on their devices. For this reason, it is important that your email newsletter should follow responsive design. Statistics on Mobile Email Use According to the latest figures for December 2016, about 55 percent of email opens will come from mobile devices, clearly surpassing webmail and desktop email opens. Mobile mail will account for 15 to 70 percent of email opens, depending on the target audience, product, and email type. Given these statistics, it is important to ensure that your email messages are optimized for mobile devices. How to Prepare for Responsive Design in Email Marketing Responsive emails utilize fluid tables and images…

Read More →

Benefits and Disadvantages of Using The Hamburger Menu In Responsive Websites

Let’s get one thing straight: this article has nothing to do with different varieties of hamburgers, but rather a new trend in the web development industry. The hamburger menu is a technique in responsive design aimed at improving the functionality of a website. The name refers to its shape literally looking like two buns and a slab of meat. You might not be aware of it but you might have seen the design before. What is the Hamburger Menu? The hamburger menu consists of three stacked, horizontal lines usually found at the top left or right corner of a webpage, allowing users to click through and have a glimpse of a hidden menu of the different pages of the website. The hamburger menu was originally created by former Xerox product designer Norm Cox back in 1981. It was originally intended to simply indicate a list within the company’s Star system.…

Read More →

Drupal Architect – Claridyne Inc., – Columbus, OH

Drupal 7 and Drupal 8:. Experience in Drupal 7 and Drupal 8 platforms is must. Drupal UX Changes and Responsive design….From Indeed – Wed, 28 Dec 2016 14:58:31 GMT – View all Columbus jobs Source:

Drupal Architect – vTech Solution – Columbus, IN

Understanding of Drupal 7 and Drupal 8 features is must. Drupal UX Changes and Responsive design. Oversee new initiatives for Drupal within GWC….From vTech Solution – Wed, 28 Dec 2016 04:08:00 GMT – View all Columbus jobs Source:

Scaling Responsive Animations

Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can be trying to get specific components, particularly ones that have pieces that have to stay a certain size (like animations), to look good regardless of the screen size. In this post, we’ll cover how to help keep our responsive animations sized the way we want them. Before we get into specific techniques, there are a couple basic guidelines we want to keep in mind: Guidelines for scaling responsive animations 1. Size the animations based on a container Whether we’re using responsive or adaptive scaling (see below), we should try to size animations based on the container’s sizing. In responsive scaling this is simple enough, but in adaptive scaling we have to look to element (container) queries. The only exception is if we know that in every circumstance…

Read More →

Google Analytics Can Show You Screen Resolution ≠ Browser Window

It was five years ago when I wrote Screen Resolution ≠ Browser Window. The idea was that, at the time, there was a lot of talk about monitor size in relation to how we design websites. JavaScript is happy to tell the dimensions of a monitor: screen.width. But how useful is that? Isn’t it more useful to know how big the actual browser window is? Of course, it is. We don’t write media queries based on screen.width, we write them based on the browser window width, e.g. @media (min-width: 400px) {}. (And perchance, someday, element/container queries.) The fact that we can and do practice responsive design means that we have all but stopped worrying about what an “average” size browser is that is visiting our site is. Still, it’s interesting data to have. Back in 2011, to gather that original data, I wrote some JavaScript to measure both the screen…

Read More →

Is Divi 3.0 Is Faster, More Powerful and Finally Visual

Back in September, Elegant Themes released the latest version of its flagship WordPress theme – Divi 3.0. So, after testing the builder out for a couple of months, now seems like the right time to see how good this thing actually is. Let’s start by saying this is no small update. Elegant Themes has reinvented this theme from the ground up, redesigning the whole platforms and building it in a completely new set of language frameworks. If you’ve used previous versions of the Divi builder, you’ll see it’s now faster and more powerful from the moment you start using it. Plus there’s the fact Divi is now a fully-visual editor with drag-and-drop functions, meaning you can see your edits on the fly as you make them. So there’s no doubt Divi 3.0 is a different kind of website builder now. It’s one that brings some major new features and improved…

Read More →

What is the difference between CSS variables and preprocessor variables?

Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables (“CSS Custom Properties”) for the same reasons. But there are also some important differences that should be made clear. A simple example of preprocessor variable usage is like this: $brandColor: #F06D06; .main-header { color: $brandColor; } .main-footer { background-color: $brandColor; } That was the SCSS variant of Sass, but all CSS preprocessors offer the concept of variables: Stylus, Less, PostCSS, etc. The above code would do nothing in a browser. The browser wouldn’t understand the declarations and toss them out. Preprocessors need to compile into CSS to be used. This code would compile to: .main-header { color: #F06D06; }…

Read More →

An in-depth guide to CSS3 Media Queries

Inspired Magazine Inspired Magazine – creativity & inspiration dailyMedia queries are one of the best things ever to happen in Web development, but even though they’re now being widely used (largely due to their implementation in templates and frameworks), they’re still not very well understood by the majority of developers.  The power and features available to developers to create better websites is definitely being under-utilized.  So with that in mind, we have put together this guide to media queries.  If you haven’t given much attention to media queries before, this is your opportunity to gain more insight into everything you can do with them.Media queries are at the heart of responsive design and adaptive designResponsive design is a really big thing these days.  Adaptive design is actually better, but because it’s more work, not many people prefer to do it.  Both of these design methods rely on media queries to…

Read More →

Abrams Learning Trends and Drupal Commerce

To address its commerce needs, Pixeldust helped Abrams develop a product hierarchy that added logical structure to their heretofore sprawling product groupings. This reproducible hierarchy made it possible to import over 1200 products into Commerce with the structure intact. No easy task. In the course of this project, Pixeldust developed two custom modules that will be contributed to the Drupal community. Pixeldust used Foundation as the framework on which to build a responsive theme. This project marks our first partnering with Pantheon Hosting. Pantheon is a Drupal specific hosting platform with amazing development and performance benefits.  Abrams Learning Trends  is an Austin, TX based innovative publisher of high quality Pre-K–5 supplemental educational materials in literacy, phonics, math, science, health & safety, and more. Visit

Yoga for Drupal: Flexibility with Drupal Developer

Consistency is important in any yoga practice. It requires balance, endurance, and an open mind. You must think beyond what you already know is possible and accept the natural course of the future. Just like yoga, there are elements of Drupal Web Design which require a similar kind of discipline. Like developer John Allsopp would say, we have to “accept the ebb and flow of things.”

Responsive Design Patterns to Create Penn State’s Beautiful Online Experience

With the recent launch of Penn State University’s main site and news site, we were able to help Penn State breathe new life into their outdated online presence, to allow prospective and current students alike to have the best experience possible on a wide array of devices. Working closely with the PSU design team, we created a complete experience from desktop to mobile, utilizing popular design patterns that would help guide the user experience while never fully stripping away content from the end user. Utilizing the Omega Theme, we used the default media queries of mobile, narrow and normal or otherwise known as under 740px (mobile), under 980px (tablet) and anything else above (desktop). These media queries really helped the PSU design team explore the possibilities of what was possible at each one of these breakpoints and how fundamental elements can be optimized for the device that they are being displayed on. Most notable were,…

Read More →

Back to Top