Posts Tagged:tablet

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.


Zen and the Art of Legacy Web App Maintenance

Before we jump into the nerdy bits here, let’s take a moment to honor the true thinker of Zen, author Robert M. Pirsig, who passed away April 24th, 2017. Quality . . . you know what it is, yet you don’t know what it is. But that’s self-contradictory. But some things are better than others, that is, they have more quality. But when you try to say what the quality is, apart from the things that have it, it all goes poof! — Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance We make a lot of websites and web apps here at Viget. And since we don’t like to hand off our work and tell clients to get lost, we’ve found ourselves maintaining a decent amount of large codebases over the years. While the mere uttering of the words “legacy code” can send developers running for the hills,…

Read More →

Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First

A month ago I explored the importance of relying on Interaction Media Features to identify the user’s ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine pointer like a mouse or a coarse one like a finger. But it goes beyond the input devices or the ability to hover; the screen refresh rate, the color of the screen, or the orientation. Making assumptions about these factors based on the width of the viewport is not reliable and can lead to a broken interface. I’ll take you on a journey through the land of Media Query Level 4 and explore the opportunities that the W3C CSS WG has drafted to help us deal with all the device fruit salad madness. Media queries Media queries, in a nutshell, inform us about the context in which our content is being displayed, allowing us to scope…

Read More →

What Not to Wearable: Part 2

In Part 1, I outlined strategies to coordinate the design goals of digital and physical products. Now, I want to take a look at how employing those strategies might yield wearables that appeal to a broad market. Wearables consist of three designed components: The Product This is the object that will house the hardware.The Hardware These are the technology components that make a product “smart.” It includes the sensors, indicators, transmitters (as well as requisite power sources) that are layered into a physical product to add functionality.The Digital Experience This is the suite of apps and interfaces that the user interacts with in relation to the wearable. It may be on the wearable itself (as in a full-display watch) or synced to a device (as with a fitness tracker). There are many articles (including this one and this one) that offer guidance on designing for wearables. But, they all tend…

Read More →

Between the Lines

Media queries are great for changing values in sudden snaps at different screen sizes. But, combining the power of calc() and viewport units like vw and vh , we can get an awful lot of fluidity across our layouts. For this we’ll use a technique called linear interpolation. Linear interpolation is a formula used to find a value between two points on a line. In our case those two points are CSS values, like font-sizes, margins or widths, that we want to interpolate between over a set of viewport widths. The reason we might want to interpolate between values over a set of viewport widths is to avoid having to create multiple breakpoints to control the flow of our content when the viewport changes. Instead, we let the user’s browser calculate, according to our instructions, what values it gets. Let me explain. The following snippet is a Sass function based…

Read More →

3 Groundbreaking Automated Layout Features To Shape The Future of Graphic Design

The University of Toronto Computer Science Department in collaboration with Adobe Research has devised an experimental automated layout system called DesignScape that is likely to lay the foundation for the future of graphic design. The new system is designed to help graphic artists in the design process through interactive automated layout suggestions. In the system, the user is presented with a set of elements commonly encountered by designers such as a headline, logos, icons, contact information, and other graphics. Here’s a video to explain more about how DesignScape is going to change the way graphic designers create layouts: As the designer works on the elements, the system provides new automated layout suggestions depending on what the designer inputs. The user can then select from one of the suggestions to further refine. This is called “layout intelligence” and will lay the foundation for the future of graphic design. This new system…

Read More →

7 Essential New Facebook Ad Features to Experiment with ASAP

Facebook’s been busy. While short-sighted people squabble over nothing, Facebook has been quietly rolling out new stuff that continues to make them an indispensable part of a marketer’s arsenal. Facebook’s custom audiences and ability to match data points with user information has been virtually untouchable. Albeit, limited.  Not anymore. The true underlying power isn’t in the feature per se. But in how you’re able to leverage it to work with all of the other activities, campaigns, and promotions you’re currently running in multiple channels. Here are seven examples that they’ve introduced over the past few months that you need to start experimenting with immediately. 1. Fan Page Engagement Custom Audiences Custom audiences are undoubtedly the best targeting approach you can use on Facebook. AdWords might have intent. But Facebook’s custom audiences deliver peerless retargeting options. Trouble was, you were kinda limited. You need a large audience to get the most bang for…

Read More →

7 Exciting Adobe Photoshop Express UI Updates For Better Image Editing

Ever since its creation in 1988 by Thomas and John Knoll, Adobe Photoshop has been an extremely useful tool for graphic designers and layout artists who are looking for a powerful application to generate fantastic images. These days, the power of Photoshop is now made available through a lighter version called Adobe Photoshop Express. What is Adobe Photoshop Express? Adobe Photoshop Express is a free image editing web and mobile application that enables users to edit images using practically any kind of device (running on Windows, iOS, or Android). It uses some of the basic but powerful features of the native Photoshop program, but in a lighter app (and again, it’s free!). The app interface recently got a whole design makeover after the last one back in 2014. The new interface was developed to match the increasing demand with regards to mobile photography along with today’s design standards. Adobe Photoshop…

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 →

Reactive Audio WebVR

Virtual reality has become a thing again! All of the usual suspects are involved: HTC, Microsoft, Samsung, and Facebook, among others, are all peddling their respective devices. These predictable players shouldn’t be having all the fun, though! You make websites. You know a bit of Javascript. You have a mobile device. You can have a slice of this virtual pie too! WebVR is here, and it’s not that difficult to learn. If you already know the basics of three.js, you might be surprised at how simple it is to get it going. If you haven’t ever used three.js, this will be a fun way to learn it. I’ve been making websites for quite a while, but only in the last couple of years have I explored the use of front-end technologies for more than just websites. Having spent some time using tools such as canvas and three.js, my mind has…

Read More →

Lessons Learned Working with Google's AMP

So you want to add Accelerated Mobile Pages, or AMP, to your site and aren’t sure where to start? Well aside from AMP’s robust documentation this is a good place to look for some lessons learned while integrating it to Viget’s main site. Lesson 1 – AMP is different Maybe you have used Facebook Instant Articles and liked how easy it was to make a custom feed to export, or you have used Apple News and had a nice time using their News Publisher app. However, AMP’s barrier to entry is much higher. AMP uses an opinionated tagging system, which requires more than a few slight configurations to your existing site to work. To start, AMP’s focus is speed. It wants you to load the barest of bones page. This means your CSS must be inlined in the head (no external links, sorry) and must be 50Kb or less in…

Read More →

Lazy Loading Responsive Adsense Ads

You’ve been hard at work optimizing your site. You’ve already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do. You can respect user’s mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can also serve ads in the right size in accordance to the screen of the device. That would be nice of you. That would not only be responsive but also responsible. The Problem The nature of Google Adsense is that the ads, along with the script, file are loaded automatically: this may unreasonably slow down the appearance of the other important things, like styles, fonts, or other scripts. Google Adsense: no lazy load Moreover, the correct ad size…

Read More →

Mobile Internet Usage Surpasses Desktop for First Time Ever Worldwide by @MattGSouthern

In October 2016, mobile and tablet devices accounted for 51.3% of internet usage in October compared to 48.7% by desktop.The post Mobile Internet Usage Surpasses Desktop for First Time Ever Worldwide by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

The New Playground for the Web: Foundation

These days, the use of tablets and smart phones has become so prevalent that it’s hard to believe some people still used a dial-up modem 10 years ago (*shudders with horror). But despite all of the awesomeness that is now literally at our fingertips, the increasing use of smart devices has placed a div in the road to Drupal Web Design and development greatness: designing and developing websites and applications for more than just a PC.

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