If you are a graphic designer or a typing enthusiast, the thought of creating your own font must have come to your mind at least once. There are hundreds of fonts that you can use to match your writing style, but sometimes, you must have felt the need to create a writing style of your own. Creating your own font gives you an opportunity to be different from conventional forms of writing. Here, we are going to tell you how to create your own font, and give you a few useful tips to do that successfully.

Know the purpose of the font

While creating the font, ask yourself what you are making the font for. If you are planning to sell it worldwide, then don’t forget to include alternative scripts and accented characters. If you are creating this font only for your personal use and for playing around on a project, then you are free to build whatever characters come to your mind. Also find out where your font will be used. If you are going to use it in a science project, then it needs to be plain and sophisticated, but if you are going to print it on a greeting card, you have a whole lot of options to play with.

Be accurate

While working in a vector-based program like Illustrator, give attention to accuracy of the fonts you draw. The Maths function of Illustrator is highly helpful in getting all your characters 100% accurate. The fonts that you create should look symmetric and in sync with each other. All the characters should complement each other and the entire set should be in harmony with one another.

Creating the font grid

Creating the characters in vector format is not an easy job. Some designers longing for accuracy spend an entire day on a single character. Have a look at your grid beforehand, which will give you a good foundation to start with. Planning is extremely essential while creating a font, and a font grid created beforehand will give you a good start. If you plan carefully, you will definitely be happy with the fonts that you create.

Complete the details

Make sure that the vectors are completely polished before you take it to the font lab. If your characters are not 100% prepared, they will only come back with a number of red flag errors. The typeface will require the same amount of work in the font lab as you did in the Illustrator. Give attention to each and every detail of each character right in its Illustrator phase. This will save a lot of time and hard work when you take the vectors to the font lab.

Use your experiments

If you are enthusiastic about fonts, you must have a folder full of typographical experiments. Use them as critical pieces of artwork that prove to be more worthwhile when you set your mind to create a font of your own. You may show this folder to an expert, and ask for advice and suggestions. Give attention to what they have to say and what they feel about your creations. You may create a font, and sell others to someone who is interested.

Get professional help

If you just want to have a font of your own, but are not creative enough to create it yourself, then leave the development process to professionals. You can create a sketch that is as accurate as you can make, and then pass those designs to a professional developer. If you are serious about entering the typeface market, then getting professional help is a must.

Once you create a font of your choice, start looking at how it performs at a wide range of tasks suited to its brief. Use this font on a number of design projects by replacing the original font. You may also seek professional opinion on how it looks, and ask for his feedback.

Read More at Tips to Create your Own Font

The canny tool creators from Source are back. Fontea is a recently published plugin that allows you to use all Google fonts directly within Photoshop. Fontea works starting from Photoshop version 2015 on up and is free. An extension for Sketch is also announced.

Comfortably Use Google Fonts on the Desktop

Years ago, I presented ways to download and locally use all Google Fonts, to be more flexible. However, the complete download is a heavy load, and thus won’t be a good alternative for most people. The advantage is that the solution is entirely free.

An alternative to that is the tool Skyfonts, which I presented here. It allows you to select individual Google Fonts that you want to synchronize, meaning download. Here, the hitch is, that you have to choose the fonts on the service’s website. After that, you can synchronize them. As long as you stick to Google Fonts, Skyfonts is free as well.

Fontea Makes Using Fonts in Photoshop Easier

The new tool called Fontea only works with Photoshop, while the previously mentioned solutions work on the operating system level, and are thus able to provide fonts for all programs. However, I found out that I don’t need the fonts in other programs. I use Photoshop to create design prototypes. That’s where I need the Google Fonts, and not in Microsoft’s Office, where they only slow down the font selection.

Fontea is currently available for download on Mac OSX and Windows. It works from Photoshop 2015 and up. Designers that switched from Photoshop to Sketch will be happy to hear that a Fontea version for Sketch is on the way.

The download and installation of the less than 50 MB heavy package is done as usual. Fontea recognizes the installation path to Photoshop on its own, but it can also be manually bent to other paths.

Once installed, you can find Fontea in Photoshop under Window > Extensions > Fontea. Once clicked, one of the usual levitating windows appears on the right side of the editor. The way it works is very simple. Mark a text layer, and then click on one of the fonts in the Fontea window. After a bit of waiting, the entered text is displayed in the chosen font. That’s it.

To ease handling hundreds of fonts at once, Fontea comes with a bunch of tools. For one, you can limit the font selection to one of six categories. The tool also allows you to search via free text. You’ll find the fonts you used last by clicking the icon “Recent.” On top of that, you can mark fonts as a favorite with a single click, making sure that it is added to the respective favorite list.

Please keep in mind that in order to use it, a Source account, which you set up fast and easily when you first use Fontea, is needed. You can choose Facebook, Twitter, or Github for the OAuth authentification. If you don’t want to do that, use the classic email and password combination.

Fontea: Clear Recommendation

In my test using Windows 10 and Photoshop 2015, everything worked perfectly fine. The response time of about two seconds after choosing the font was definitely acceptable, given that my internet speed is rather lacking.

As neither Fontea, nor the included fonts cost any money and are some of the most popular fonts in web design, there is no reason not to use Fontea. Just try it yourself. If you’re a Sketch user, be patient. Fontea is already in the works for you.

(dpe)

Has anyone ever tried to lure you into doing a project by telling you that it will be “easy”? Or, have you looked over the requirements of a potential project and decided that it’s going to be “simple” and “straightforward”?

Over the years I’ve heard or thought those things more times than I’d like to admit. So much so that the road I’ve travelled is littered with projects that were supposed to be a slam dunk.

It all makes me wonder if easy projects really exist at all. Could someone out there really setup a website with ease (and get paid in a timely fashion for it)? Perhaps this is just part of some web designer mythology.

Defining ‘easy’

Part of the problem is that easy means different things to different people. A client who’s not technically-inclined may see the design and development of a website as something very simple. To them, your job is to do whatever it is that you do all day. So of course it’s easy!

For example, let’s say you’re setting up an ecommerce site for a client who tells you:

• “We only have about a dozen products.”
• “Each product will be a simple picture with a text description.”
• “There are no variable products – there will be just one version of each product.”

Sounds very reasonable, right? This should take no time at all. After it’s done you’ll get a check that might pay for the family trip to the beach this year.

So, you pick your favorite ecommerce solution (we’ll say WooCommerce in this case) and get to work. You add in the products and you’re done! Only, something happens on your way to Easy Street.

The client just has a few “minor” changes to the site. No biggie, right? As it turns out, they want to radically alter the way WooCommerce displays products. Oh, and now that they think about it, they’ll need a bunch of shipping zones set up. Perhaps we should use the payment gateway their bank recommends (for which there is no WooCommerce extension). And, does the shopping cart page really need to look like that?

Rats. Guess you’ll be working through that holiday at the beach.

What happened?

Clearly, the client is completely at fault for lying about the project!

Well, maybe not. To them, what they are asking for is simple and straightforward. They figure that you’re an expert and so it must be easily within your abilities to fulfil their requests. Without knowing the technical details, what else would you expect?

As web professionals, we know that sometimes performing the smallest change can quickly become a herculean task. When we change one little thing it can create a domino effect of several other things needing changed as well. Sometimes it’s even a matter of the client asking for software to do something it wasn’t really designed to do (while staying on the same shoestring budget).

So, what can we do to avoid “easy project syndrome”? Two things come to mind:

1. Communicate with, and educate your clients

The first key is to not only listen to what your clients are saying, but to actively participate in the discussion as well. Personally, it took me a few years to figure out that I wasn’t simply there to listen and nod in agreement.

Ask probing questions about what the goal of the project is and how your client would like it done. That will not only give you a sense of what they want, but also why they want a particular feature. If possible, ask them to show you examples. Without this information, you could be setting yourself up for a difficult and frustrating experience.

Now that you know a bit more about what you’re getting in to, you can also help to educate your clients on the pros and cons of it all. You don’t have to get highly technical in your explanations, but you can at least let them know how different features could affect the project’s timeline and budget.

This will help to make you better prepared (and not feeling duped) by the client’s definition of what’s easy.

That leads to the second key…

2. Temper your expectations and maintain focus

When you hear or feel that a project is going to be easy, it’s not necessarily best for your brain to focus on that particular aspect. You may find that you get this expectation in your head that things really will be easy. That can lead to a real bummer when things don’t go as you hoped they would.

In sports analogies, it’s a bit like a first-place team preparing to play a last-place team. The top team may feel (subconsciously, at least) like they can win without giving their best effort. Sometimes that can result in a rude awakening.

So the best strategy is to simply forget about any possibility of this project being a piece of cake. Learn to expect hidden challenges so that you’ll not be caught off guard when they arise.

This way of thinking can be applied not only to the actual work you’ll be doing, but for pricing of the project as well. Build some extra padding into your proposal because you know there will be something unexpected to deal with. Because you had the foresight to do this, you won’t feel cheated when you have to put in some extra time to do the job right.

Let’s call it ‘less difficult’

Expectations can lead to emotions that really mess with your mind. They can make you paranoid while waiting for a problem to pop up. They might also lead you to put your brain on autopilot, thinking that everything will go exactly as planned. Learning to take your emotions (and those of the client) out of the equation will help you see things more clearly.

I propose that the next time any of us hears the (now dirty) word “easy” in reference to a project, we take it with a grain of salt. If it turns out that there are really no complications that arise, then we can be happy that it turned out to be less difficult than we thought.

Source

Have you ever wondered how elements come together to create successful designs? It’s no accident that compelling design just seems to work. What most of these designs have in common is the use of gestalt grouping principles to organize information that helps us understand the relationships and differences between elements. As designers, we can use these principles to create our own engaging and successful work.

In the first part of this series, we focused on the principles of similarity and proximity to understand how the gestalt principles work in creating relationships between elements. Next, we’ll focus on the principles of closure and figure-ground, which play with positive and negative space to build relationships and create wholes with the sum of their parts. As in the first article, we’ll look at how the principles work and then move on to real-world examples to illustrate them in use.

The post Improve Your Designs With The Principles Of Closure And Figure-Ground (Part 2) appeared first on Smashing Magazine.

I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system:

I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.

That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later.

Borders, colors, text styles, icons; there’s so much to consider! But what I really wanted to make a quick note of here is the idea of resilience in a design, particularly where Nathan talks about adding components inside a button, like an icon:

When you add an element, even a simple icon, a button layout shouldn’t break down. Coping with less predictable elements reveals pesky issues of spacing and alignment inside.

So whenever you remove a component from inside a button then the button itself should still work. But this isn’t just important for buttons really, it’s important for any component that we’re building. In short: asking questions about how a certain element might break visually, or in terms of interaction, is vital to the process of building an effective design system.

Direct Link to Article — Permalink

Buttons in Design Systems is a post from CSS-Tricks

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. Yet, for some reason, it is still used far less than responsive techniques.

The post Fluid Typography appeared first on Smashing Magazine.

In a digital age where millions have an easy access to the web and that too via their hand-held devices, the popularity of web applications has soared manifold. The market is flooded with web app development companies. They are using a wide range of technologies like PHP, Java, .NET, and many more. Among these, PHP has emerged as a darling of the developer community for creating exciting and dynamic web apps. Although you can hire PHP developer from any web application development firm at a cost effective rate, it is best to know the reasons that make PHP so adorable for web application developers.

• Open Source
Of course, web app development involves a cost, but since, PHP is open source i.e. absolutely free and many of the PHP development tools are free. This means there is no whopping cost for hardware and no vendor lock-ins. Clearly, this makes PHP an attractive one over other popular technologies and gives you enough reasons to pick the same.

• Cross Platform

It is possible to build web applications that can run on all available platforms. Yes, you can run PHP web applications on Unix, Windows, Linux, Netware, and many more. This is marvelous, as no longer developers are expected to build separate web apps for each of the platform. Moreover, in a world where millions of people are using different platforms, cross-platform web application development seems to be the most feasible solution to ensure a better reach.

• User-Friendly
PHP is extremely easy to learn and you do not need to be an expert in programming before attempting the powerful scripting language. It has its syntax similar to C language that makes it all the more user-friendly.

• Fast Development
Website or web app building with PHP is always a straightforward approach with minimum hassles. This means you will take a smaller time frame to build a web application using PHP than any other technology. For entrepreneurs who look for their desired app to launch soon, PHP is obviously a right choice.

• Robust Security
Web app owners often worry a lot about malicious attacks and PHP is a gem in this regard, as it has a multi-layered security that protects a website or web application build in PHP from bugs, threats, viruses and many others. Moreover, you can easily come across a large number of tips to secure PHP web applications.

• High Performance
The development time for a web application is less when a developer is using PHP. Its ability to operate fast on a traditional web stack and achieving a high speed if apache web server is used, speaks volume about its high performance which is admired by all.

• Flexibility
In contrast to other languages or technologies, PHP offers a rare flexibility to the developer. If you are an entrepreneur and have some specific business needs for your app, it is best to hire PHP developer within no time. An abundance of PHP tools helps immensely in this regard.

• Has Extensions
PHP has a large number of extensions so that its core functionalities can extend as per the requirements. This means as a developer, you will feel no problem to meet client expectations and as an entrepreneur, PHP is the perfect pick to have your dream web application.

• Handle Traffic

Most business web apps are built on PHP, and why not as it boasts of an amazing ability to handle voluminous traffic with an ease. Even websites like Facebook and Twitter handling a large amount of traffic every day from all over the world have a PHP framework.

• Both End Development
What makes PHP unique is that it can be used both for front-end and back-end web development. However, most developers use PHP only for the front-end in the case of developing web applications. It is notable that in a web application, front-end is the server-side.

So, if you have already chosen PHP for your web app development, you are on the right path. With PHP, a beautiful, highly functional and engaging web application is guaranteed. Just hire the right PHP developer from a reputed PHP web development company and you will not have to bother about anything.

Author Bio:

Harshal Shah CEO & Founder of Elsner Technologies, a global IT consulting firm with expertise in delivering IT solutions on Web, Mobile and Cloud. I am an tech evangelist with an reputation to provide optimum solutions for business automation and solving real life problems with the power of IT.”

Read More at 10 Reasons For Which PHP Is Adorable For Web Application Developers

The following is a guest post by Jon Yablonski. Jon told me he recently worked on a project where there was a lot of emphasis placed on giant screens. Jon is going to show us that just like RWD work of any kind, it requires planning. Extra media queries are useful for targeting the huge displays, and typography can take you far.

With the rise of ultra high-definition displays and devices that enable browsing the web via smart TVs, the internet is increasingly being accessed and viewed on screens that dwarf traditional desktop displays. Most websites fall short of being optimized for this scale. But if you’re building responsive websites, it’s likely that the tools you need to scale your content are already in place. In this article, we’ll take a look at the challenges and techniques for optimizing your site on large-scale displays.

Identifying Large-Scale Displays

First, let’s identify what exactly constitutes an large-scale display. According to W3Counter, screens with a device width of 1366×768 pixels are the most common large device resolution. The next common large resolution is 1920×1080 pixels. These values come primarily from desktop monitors, and most websites will adapt to these screens without much problem.

Traveling up the scale, the next most common device width lands at 2560 pixels wide. This width is what you will find with most high-definition desktop displays that start with 27” monitors. It is also the range at which most websites begin to struggle because of excess screen real-estate.

Take for example the image above, which depicts a small sampling of popular websites that were each captured at a screen size of 2560×1600 pixels. As you can see, none of these sites are optimized for this scale: text is too small, the volume of content packed into a relatively small space makes it difficult for the eye to know where to focus, and everything seems to be dwarfed by the whitespace that surrounds it. Each of these factors contribute to a decrease in legibility and less than optimal user experience.

So what is preventing designers and developers from optimizing for large-scale displays? The answer is sure to vary by team, but there are definitely a few technical challenges at this scale. Let’s identify what these challenges are.

The Challenges of Large-Scale Displays

The challenges of optimizing for large-scale displays center around how to scale and manage content. Broken down into categories, these challenges would look like the following:

Content choreography

Content choreography refers to how content is adapted proportional to screen size, serving the best possible experience at any width. The larger the screen, the less proportional the content will seem. This is a problem for a few reasons: 1) the awkward space that results is distracting, 2) the excessive space can dwarf the content, which makes the content seem smaller than it is, and 3) legibility will most likely suffer as a result of being too small.

Generally speaking, the way content adapts on small screens is pretty straight-forward: we stack content within a single column and adjust the visual order if necessary. On the other hand, the way we approach this on large devices can vary greatly, depending on the content and the space available. If you avoid adapting your content to the excess space made available on large-scale displays, your content will most likely seem dwarfed in comparison to the negative space that surrounds it. But, if you attempt to fill the space with content by introducing more columns, you risk visually overwhelming the user by presenting too much content in a relative area of the screen.

Images

Images pose a number of unique challenges on large-scale displays. Since most large screens are also higher resolution, we must manage additional variations of each image to ensure the appropriate image is served. In addition, we must also manage how the images will behave in the context of the layout. Images that don’t scale with the screen can leave awkward gaps of space between them and other elements. In contrast, images that scale too large can take away from other elements and become overwhelming. Since there is no one-size-fits-all solution to the challenges that images pose, you must carefully consider how you want to manage them based on the unique needs of your content.

Techniques for Optimization

Now that we’ve identified the various challenges that come with large-scale displays, let’s take a look at some approaches to optimizing our content for this scale.

I’ve created a site to demonstrate each technique we’ll be looking at for optimizing for large-scale displays. Given the topic, I chose a theme that seems appropriate in the context of scalability, the Death Star II. I will be referring to bits of code from this demo, but you can see it in it’s entirely here on CodePen.

The method you use to optimize your content for large-scale displays will vary, depending on your content. One option is to simply adjust the layout in order to present your content in a way that takes advantage of the additional screen space. Another method is to responsively upscale your content so that it fits the space proportionately. And of course, you could also leverage a combination of both methods. In our demo, we will responsively upscaling our content in order to provide a superior experience for users on larges-scale displays.

Plan Ahead

The first step in optimizing for large-scale displays to is plan for them. By planning ahead, you are minimizing surprises and ensuring that everything works together before diving in, at which point it’s harder to make changes. If your design process involves working in a design application in order to visualize how you want content to behave, then do so by creating a canvas size that represents a extra large screen alongside your other comps that represent more traditional screen sizes. If you prefer to design in the browser, then plan how you want your content to behave on large screens by first sketching out your ideas.

For our demo, I chose to start with sketching out the general idea for the layout and content. By doing this first, I got a sense for how I should break the site down into sections, and how the page as a whole could be structured to accommodate these sections. Next, I explored design aesthetic a bit by creating a high-fidelity composite in Sketch, which allowed me to identify design elements such as fonts, colors and proportion. The key here is to stay loose and don’t worry about pixel perfection — the important things like interaction, scaling and even font-size should be decided in the browser.

Build with Relative Units

Relative units such as percentages, EMs, and REMs are essential to responsive web site because they provide us a way to build on a flexible foundation. By using relative units everywhere, we can ensure that measurements will remain proportional, regardless of the font size set by the user. This is in direct contrast to explicit pixel values, which will not scale relative to a user’s settings, and therefore measurements will not be proportional if the user scales up or down the default font size.

// Breakpoints
$bp-small: 48em; // 768px
$bp-medium: 64em; // 1024px
$bp-large: 85.375em; // 1366px
$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px

// Media Queries
$mq-small: "(min-width: #{$bp-small})";
$mq-medium: "(min-width: #{$bp-medium})";
$mq-large: "(min-width: #{$bp-large})";
$mq-xlarge: "(min-width: #{$bp-xlarge})";
$mq-xxlarge: "(min-width: #{$bp-xxlarge})";
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";

Take for example the media queries used for our Death Star II demo. By defining our media queries in EMs, we are ensuring the design scales proportionately without enabling awkward scrolls bars in the browser if the user was to adjust the zoom level.

Scaling Text

In addition to media queries, relative units also come in handy for text. Font-sizing can be controlled globally by adjusting the font-size property on the element, as long all text on the site is defined in relative values like EMs. This is especially useful when it comes to large screens because it allows you to proportionately scale type up globally as screen size increases, thus avoiding the text in your design from seeming too small in relation to the screen.

To implement this on our demo, we began by defining some variables. As you can see below, the first step is to define what the base value of your font sizing will be. In our case it is set to 1em, which means we are defaulting to whatever default font-size is set by the browser. This base value can easily be adjusted in browser, but it usually defaults to 16px. It’s also useful to define the base line-height values here in conjunction with font-size. You’ll notice we are leaving off the unit at the end of these line-height values, also known as ‘unit-less’ values. By setting line-height this way, we ensure that child elements can compute their line heights based on their computed font size, instead of inheriting this value from its parent.

// Font-Size
$base-font-size: 1em;

// Line-Height
$base-line-height: 1.5;
$header-line-height: 1.25;

Next, we apply these variables to our element and increase both font-size and line-height gradually as the screen gets larger. As mentioned before, this will scale up the text size everywhere if you have set font sizes in your content as a relative unit like EMs.

body {
  font-size: $base-font-size;
  line-height: $base-line-height;

  @media #{$mq-medium} {
    font-size: $base-font-size*1.2;
    line-height: $base-line-height*1.2;
  }

  @media #{$mq-large} {
    font-size: $base-font-size*1.3;
  }

  @media #{$mq-xlarge} {
    font-size: $base-font-size*1.4;
  }

  @media #{$mq-xxlarge} {
    font-size: $base-font-size*1.6;
  }
}

So how much of a difference does scaling text up to fit the proportions of the screen? Turns out, pretty significantly. Take a look at the image below, which illustrates the difference between our demo when font-size isn’t scaled up on the body (on the left), and when font-size is globally scaled up (on the right) at 2560 pixels wide. Not only is the scaled-up version more legible, but all elements on the page have been proportionately scaled up to activate the space.

Containment

When it comes to controlling content, there are few tools in the responsive web design toolbox as useful as the ubiquitous ‘container’. This element has one purpose, and that is to control the maximum-width in which our content can extend to. Take for example the following, which is the most common way you see these elements defined in CSS:

.container {
  margin: 0 auto;
  max-width: 1024px;
}

This approach works but, but it doesn’t scale to large screens because the maximum width is too dependent on a specific width. Even if the max-width value was increased to something much larger, it isn’t relative to the viewport width. A better way to approach this is to define the left and right margins as relative units and gradually increase these values as the screen size gets larger. As a result, content will be contained in relation to the screen width and feel more at home if the screen is extra large.

.container {
  margin: 0 4%;

  @media #{$mq-medium} {
    margin: 0 8%;
  }

  @media #{$mq-large} {
    margin: 0 12%;
  }

  @media #{$mq-xlarge} {
    margin: 0 18%;
  }
}

Manage Images

How you manage images on extra large screens is entirely dependent dependent on your project needs, but you will most likely need to serve up higher resolution variations of each image to ensure images aren’t too small. The approach we take is different, based on how the image is applied.

.detail {
  height: 0;
  padding-bottom: 40%;
  margin: 0 0 $base-spacing*2;
  background-image: url(/Death-Star/detail_sml.jpg);
  background-position: center center;
  background-size: cover;

  @media #{$mq-xlarge} and #{$mq-retina} {
    background-image: url(/Death-Star/detail_sml%402x.jpg);
  }

  @media #{$mq-medium} {
    background-image: url(Death-Star/detail_med.jpg);
  }

  @media #{$mq-medium} and #{$mq-retina} {
    background-image: url(/Death-Star/detail_med%402x.jpg);
  }

  // Additional media queries

}

For background images, this is quite simple: define the background image on the appropriate element, give the element dimensions, and define higher resolution sources of the image within media queries. The image above illustrates how this is done on our demo. Notice that we are setting the height property to 0, providing bottom padding, and setting the background-size property to cover. This is a technique known as “Uncle Dave’s Ol’ Padded Box”, and allows us to maintain an aspect ratio by percentage padding based on the width of the parent element.

For inline images, we now have an HTML specification that allows us to extend the img and source elements to provide a list of available image sources and their sizes. This allows browsers to use this information to pick the best image source. The image below details how this is implemented on our demo, in which we are defining additional image sources and their sizes with srcset and sizes attributes. This enables the browser to switch image resolution based on screen size and pixel density, thus providing the most appropriate image.

<header role="banner" class="header">
  <div class="header__img">
    <img  
      srcset="./death-star_sml%402x.jpg 400w,
      ./death-star_lrg.jpg 600w,
      ./death-star_sml%402x.jpg 800w,
      ./death-star_lrg%402x.jpg 1200w"
      sizes ="(min-width:1336px) 75vw, 50vw"
      alt="Death Star 02">
  </div>
</header>

You might notice that we aren’t including a src attribute on our inline image. This is because we must leverage a polyfill to enable support for srcset and sizes in browsers that do not yet support them. Browsers without support will prefetch the img’s src if specified, often causing wasteful overhead. To prevent this, it is recommended by the polyfill author to omit src and only use srcset.

Conclusion

Serving the best possible experience at any screen size is imperative. When it comes to optimizing our content for large-scale displays, we shouldn’t stop short of common desktop resolutions. With the proper planning, we can leverage the tools already available to us when building responsive websites to scale up and adapt our content for large-scale displays.

Further Reading/Tools

• Screensiz.es
• Surveying the Big Screen
• Responsive Images Community Group

Optimizing for Large-Scale Displays is a post from CSS-Tricks

Media queries allow you to react to changes in width and height of the browser’s display area. When the browser window is changed on desktop devices, or when a mobile device is changed from portrait to landscape mode, fitting stylesheets can be applied immediately with CSS and media queries. Control the behavior of the media queries via JavaScript using the JavaScript tool Simple State Manager. That’s useful, as now and then, it is necessary to react to size changes of the display area via JavaScript.

The JavaScript Simple State Manager by Jonathan Fielding from London was first presented in June 2013 and has experienced a rapid development since then. The Simple State Manager (SSM) doesn’t have any other dependencies aside from JavaScript and is designed to be fully available with a simple link integration or via a browser.

Simple State Manager: Defining States

Assuming that you’ve correctly implemented the SSM in your document, this is how we continue. First, so-called “States” need to be defined. Within these states, the width of the display area to which the SSM should react to is determined. Here, define the minimum and maximum values. A reaction to the display area’s height is unprovided for. However, most of the time, the width is a more important factor when it comes to responsive layouts anyway. In addition to that, we assign an ID as well as a function that is activated when the state’s conditions are met, to each state.

sssm.addState({
  id: "mobile",
  maxWidth: 320,
  onEnter: function() {
    document.getElementsByTagName("body")[0].style.backgroundColor = "red";
  }
}).ready();

In the example, a state with the ID “mobile” is created. The function defined within it is triggered once the maximum size of the browser window is larger than 320 pixels. In this case, the background color is altered. The unique thing about this is that the “Simple State Manager” doesn’t only check once which states are appropriate for the current display area. Instead, it rechecks whenever the viewport changes. In the example, this means that the function is executed once the viewport’s width is less than or equals 320 pixels.

Aside from the option “onEnter” that always triggers a function when the state condition is met, there’s the alternative “onResize”. Here, the function is only called up when the size of the panel changes. When loading the page with “onResize”, the state would not be considered.

Reacting to Multiple States With the SSM

Of course, it is possible to define multiple states to meet the requirements of different resolutions and mobile devices.

ssm.addStates([
  {
    id: "mobil",
    maxWidth: 320,
    onEnter: function() {
      document.getElementsByTagName("body")[0].style.backgroundColor = "red";
    }
  },
  {
    id: "desktop",
    minWidth: 321,
    onEnter: function() {
      document.getElementsByTagName("body")[0].style.backgroundColor = "green";
    }
  }
]).ready();

In the example, two different states are defined. One that makes sure that the background is green for a window width of over 320 pixels and the other to turn the background red for a lower width.

SSM: Debugger as a Bookmarklet

The “Simple State Manager” scope of functions includes many other options that allow for an extensive reaction to different size situations. This way, it is possible to delete states or alter them at any time. Additionally, you can request the current state.

There’s a debugger that can be called up as a bookmarklet which allows you to test the states. It informs you about the amount of defined states, as well as all assigned settings and functions. This way, you gain a quick overview on whether everything is labeled correctly or not.

SSM: Browser Support and Plugins

The Simple State Manager runs on all standard browsers and doesn’t require any other libraries like jQuery and co. However, the Internet Explorer is only supported from version 7 on up.

Extend the scope of functions even further using plugins. For example, there’s one that works together with the jQuery lightbox plugin “Colorbox”. This enables you to control from which window size images should start being loaded via “Colorbox”. The Simple State Manager is distributed under the MIT license and thus, is free to use for private and commercial purposes. Participation in the project is wished-for and organized via Github.

(dpe)

In this month’s edition of what’s new for designers and developers, we’ve included website builders, new CMSs, CSS frameworks, pattern guides, color resources, email marketing collections, productivity tools, and much more. And as always, we’ve also included some awesome new free fonts!

Almost everything on the list this month is free, with a few high-value paid apps and tools also included. They’re sure to be useful to designers and developers, from beginners to experts.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to [@cameron_chapman](http://twitter.com/cameron_chapman) to be considered!

StringBean

StringBean is a featherweight CSS framework that comes in at just 4K. It uses a 24-point grid system rather than the more common 12-point.

Gutenberg

Gutenberg is a starter kit that brings meaning and craftsmanship to web typography. It’s flexible and simple to use.

Frend

Frend is a collection of modern front-end components. They’re modest and dependency-free.

RichCSS

RichCSS is a clean and reusable object oriented CSS framework. It allows for reusability of your CSS, versioning, and more.

Microsoft Bot Framework

Microsoft Bot Framework lets you build and connect intelligent bots that can interact with your users wherever they may be.

Min

Min is a “smarter” web broser. It uses DuckDuckGo for search, includes a calculator, and more. You can even jump to any site using fuzzy search and get suggestions before you start typing.

Runner

Runner helps you speed up your Sketch workflow. It gives you an intuitive interface that supercharges your daily workflow.

Flexbox Patterns

Flexbox Patterns are a collection of user interface patterns for Flexbox. It includes examples and source code.

Email Toolbox

Email Toolbox is a collection of hand-picked resources for email marketers and designers. It includes links to people, courses, writings on email design, and more.

Material Color

Material Color is a material design color palette tool. You can view by code, hex value, or RGB.

Microsoft Flow

Microsoft Flow is Microsoft’s version of IFTT. Create automated workflows between your favorite apps and services for notifications, data collection, and more.

Bookmark

Bookmark is a drag and drop website builder that’s easy to use and creates beautiful, responsive websites.

MJML App

The MJML App lets you leverage the power of MJML directly from your desktop. You can import and manage templates, edit email with live rendering, and more.

Simplified JavaScript Jargon

Simplified JavaScript Jargon is a community-sourced JavaScript buzzword glossary.

UTM Builder

If you need to build UTM tags for your links, UTM Builder makes it easy. Just answer the step-by-step questionnaire and it generates your link for you.

Create

Create is a powerful mobile creativity and graphic design app. It lets you use shapes, icons, typography, lines, photos, and more.

Stashes.io

Stashes.io lets you build your own collections of resources to refer back to or share.

Showbox

Showbox makes it super easy to create studio-quality videos right in your browser, in just minutes.

Sympli

Sympli is a collaboration platform that works with Xcode, Android Studio, Sketch, and Photoshop. Just design with Photoshop or Sketch, export to Sympli, and quickly implement your design.

Fontea

Fontea gives you access to all 700 Google fonts in Photoshop (and soon in Sketch). It’s a plugin, so it doesn’t interfere with your usual Photoshop workflow.

Maki

Maki is a set of icons for map designers. It includes 114 icons for things like parks, museums, and places of worship.

FourZeroFour

FourZeroFour is a gallery of the most awesome 404 pages from around the web.

Smartmockups

Smartmockups is a collection of the best free product mockups, ready and waiting for your designs.

Carrd

Carrd makes it easy to create simple, free, fully responsive one-page sites for anything you want. Just choose a template to start from.

Logo Foundry

Logo Foundry is a logo maker app that works right on your phone. It includes over 6000 symbols, shapes, and icons to use.

Flexbox Grid

Flexbox Grid is a responsive grid system based on the flex display property.

Fwrdto.me

Frwrdto.me is a little bookmarklet that lets you send web pages to your inbox with just one click.

Pitch Card

Pitch Card lets you pitch your idea in 200 characters or less and get quick feedback. Share with just your friends or with everyone via social media.

Sherbit

Sherbit lets you analyze and understand the data your apps and devices collect about you. You can connect and visualize your data to find meaningful insights about yourself.

Pagekit

Pagekit is a modern open source CMS that’s intuitive, modular, and flexible. It has a simple UI, built-in marketplace, and is built with Symfony components.

Worona

Worona makes it simple to turn your WordPress site into a mobile app for iOS or Android. It lets users read your posts when they’re offline, sends push notifications, and more.

Homizio Nova

Homizio Nova is a free sans-serif typeface that includes light, regular, and italic styles.

Sweet Sorrow

Sweet Sorrow is a vintage script font that’s perfect for things like signs, t-shirts, logos, and other display uses.

Ludicrous

Ludicrous is a free handwriting font that includes ligatures and extras.

Goldin

Goldin is a rounded sans-serif typeface that’s perfect for branding and display use. It comes in regular and light weights.

South Rose

South Rose is a beautiful display typeface inspired by the South Rose window in the Notre Dame cathedral.

Wadon

Wadon is a modern typeface with accents reminiscent of ancient runes.

Asteroid

Asteroid is a super funky geometric font that looks straight out of a sci-fi movie and is perfect for branding.

Nighttime & After Midnight

Nighttime & After Midnight are complimentary typefaces, one with slab-serif stroke terminations and the other with circle terminations.

750+ Design Elements with Cruzine’s Just Flow Light & Dark Editions – only $19!

Source