After days and months of hard work, you are finally ready to roll out your new product. You have polished the design, perfected the functionality and refined the user experience. It seems that your beloved application is ready to come into the world and take it by storm. Hang on, how about the presentation?

As any merchant, you should be prepared to stand the competition that is highly intense nowadays. The market is overpopulated with different stuff, so before jumping right into it, you need to establish a solid ground for yourself. Various marketing tricks can help to give a product head start. And the very first thing that you need to do is take care of a proper presentation.

It underlies all the strategies and is responsible for the first impression that is a powerful tool in influencing the decision-making factors. It does not have to be a killer one; neat and clean demonstration will also do the trick. The good presentation will not only express the idea behind the creation but also increase your chances to achieve the success.

Any digital product requires a “wrapper”. When it comes to a mobile application, it is better to be placed within a cell-phone so that it will feel natural. In case of a premium theme for CMS or website, it will look just great within a browser frame or such devices as monitor or tablet. If it is a print, then you can get the most out of realistic renderings of T-shirts, mugs, stationery, etc.

Our today’s list dedicated to 2016 includes numerous high-quality mockups that are ideal for building presentations of digital goods. There are tablets, cell phones, monitor, etc. Enjoy the collection and share your previews.

Devices

Creator: Facebook
License: Declared as Free, no proper license given.

Mockups

Creator: 360mockups
License: Declared as Free, no proper license given.

Apple Devices Mockup

Creator: webhooligans
License: Declared as Free, no proper license given.

Looped Live Mockups

Creator: Lstore Graphics
License: Declared as Free, no proper license given.

The Screens – Free Perspective PSD Mockup Template

Creator: Tran Mau Tri Tam
License: Declared as Free, no proper license given.

iPad Tablet Hand Hold – Free PSD Mockup

Creator: Alexandr Pidvalny
License: Declared as Free, no proper license given.

iPhone 6s Psd Rose Gold Mockup

Creator: Pixeden
License: Free for personal and commercial use.

140+ Large Mockup

Creator: BAIANAT
License: Declared as Free, no proper license given.

3D Web Mockup

Creator: Petr Hradil
License: Declared as Free, no proper license given.

iPhone 6S on Table

Creator: Dinesh
License: Declared as Free, no proper license given.

MacBook Air with iPhone6S

Creator: Dinesh
License: Declared as Free, no proper license given.

iPhone on Workspace

Creator: Dinesh
License: Declared as Free, no proper license given.

iPhone on hand

Creator: Dinesh
License: Declared as Free, no proper license given.

Apple Imac Desktop Mockup Free PSD

Creator: psdfreebies
License: Declared as Free, no proper license given.

MacBook Pro and iPad Mockup Template Free PSD

Creator: psdfreebies
License: Declared as Free, no proper license given.

iPhone7 Mockup

Creator: psdfreebies
License: Declared as Free, no proper license given.

Free PSD Mock Ups Vol. 4-8

Creator: Qeaql
License: Attribution-NonCommercial-NoDerivatives.

PSD Device Comps

Creator: Eric Celedonia
License: Royalty Free.

Apple iPhone SE Mockup PSD

Creator: wellgraphic
License: Declared as Free, no proper license given.

Apple iPad Pro

Creator: wellgraphic
License: Declared as Free, no proper license given.

10 Photorealistic Mockups

Creator: Mockup World
License: Declared as Free, no proper license given.

Responsive Screen Web Mockups

Creator: Vasil Kamarashev
License: Free for personal and commercial use.

Macbook PSD

Creator: Gustav Ågren
License: Declared as Free, no proper license given.

High Res Apple Products PSD mockup

Creator: Mockup Depot
License: Declared as Free, no proper license given.

4K Black and Jet Black iPhone 7 Plus PSD mockup

Creator: Mockup Depot
License: Declared as Free, no proper license given.

4K Google Pixel PSD mockup

Creator: Mockup Depot
License: Declared as Free, no proper license given.

iPhone 7 Mockups

Creator: designer bundle
License: Declared as Free, no proper license given.

Macbook Mockups

Creator: designer bundle
License: Declared as Free, no proper license given.

Food Mockups Set

Creator: designer bundle
License: Declared as Free, no proper license given.

White iPhone Showcase Scene Mockup

Creator: mockup world
License: Declared as Free, no proper license given.

Workspace with Devices Mockup

Creator: mockup world
License: Declared as Free, no proper license given.

iPhone with App Screens Mockup

Creator: mockup world
License: Declared as Free, no proper license given.

Samsung Galaxy S7 Edge Mockup

Creator: Ramotion
License: Declared as Free, no proper license given.

8 Free TheFox iPhone 6 PSD Mock-Ups Template

Creator: Tran Mau Tri Tam
License: Attribution-NonCommercial.

Samsung Galaxy S6 Edge Mockup

Creator: Young Lynn
License: Free for personal use.

iPhone7 Mockup

Creator: Samat Odedara
License: Declared as Free, no proper license given.

iPad Photo Mockup

Creator: Creative Studio Form
License: Declared as Free, no proper license given.

Ipad Pro 9.7 Dark Mockup

Creator: Orevuart
License: Declared as Free, no proper license given.

iPhone6 Mockup

Creator: Simon Henke
License: Declared as Free, no proper license given.

Artist Scene Mockup

Creator: Simon Henke
License: Declared as Free, no proper license given.

Free Entertainment Mockup Scene

Creator: Simon Henke
License: Declared as Free, no proper license given.

Multiple Web Screens Perspective PSD Mockup

Creator: graphberry
License: Free for personal and commercial use.

Google Pixel Free

Creator: Georg Bednorz
License: Declared as Free, no proper license given.

HTC 10 Free

Creator: Georg Bednorz
License: Declared as Free, no proper license given.

App Screen Showcase

Creator: graphberry
License: Declared as Free, no proper license given.

Perspective Web Design Mockup

Creator: graphberry
License: Declared as Free, no proper license given.

iPhone7

Creator: Cvijovic Zarko
License: Declared as Free, no proper license given.

Free PSD Mockup iMac Business office

Creator: mockupdeals
License: Declared as Free, no proper license given.

iPad Air PSD Mockup

Creator: Andrej Zitnik
License: Declared as Free, no proper license given.

iPad Air PSD Template

Creator: Andrej Zitnik
License: Declared as Free, no proper license given.

iPhone7 Minimal Mockup

Creator: Santiago Alonso
License: Declared as Free, no proper license given.

Free iPhone Frontal Mockup

Creator: Ramotion
License: Declared as Free, no proper license given.

Floating Screen Mockup

Creator: design lazy
License: Free for personal and commercial use with attribution.

Desk Presentation Mockup

Creator: design lazy
License: Free for personal and commercial use with attribution.

Scene Creator

Creator: design lazy
License: Free for personal and commercial use with attribution.

App Screen/UI Showcase

Creator: design lazy
License: Free for personal and commercial use with attribution.

Mockup Girl with Phone in Forest

Creator: Mocup
License: Declared as Free, no proper license given.

Business Container Mockup

Creator: Mocup
License: Declared as Free, no proper license given.

Standing Visual Branding Mockup PSD

Creator: Rafi
License: Free for personal and commercial use with Attribution.

App Screens Standing Mockup

Creator: Rafi
License: Free for personal and commercial use with Attribution.

IPhone 6s Plus And IPad Pro On The Beach Mockup

Creator: Rafi
License: Free for personal and commercial use with Attribution.

Free Business Card, Smart Phone and Tablet Mock-up PSD

Creator: graphic google
License: Free to use personally and commercially, but link-back is compulsory.

Fascinating Girl Holding iPhone 6 Mock-up PSD

Creator: graphic google
License: Free to use personally and commercially, but link-back is compulsory.

Elegant BlackBerry & Business Card Mock-up PSD

Creator: graphic google
License: Free to use personally and commercially, but link-back is compulsory.

iPhone 6 Hand Hold – Free PSD Mockup

Creator: Alexandr Pidvalny
License: Declared as Free, no proper license given.

Vintage Laptop

Creator: Saqib Ahmad
License: Free for personal and commercial use.

iMac Mockup

Creator: Daniel Cristea
License: Declared as Free, no proper license given.

iPhone 7 & iPhone 7 Plus Flat Mockup Free

Creator: Konstantin
License: Declared as Free, no proper license given.

Samsung Galaxy S7 Flat Mockup

Creator: Konstantin
License: Declared as Free, no proper license given.

Hand Holding Business Card Mockup PSD

Creator: graphicspsd
License: Free for personal and commercial use.

Hand Holding Smartphone PSD Mockup

Creator: graphicspsd
License: Free for personal and commercial use.

Laptop Website Mockup PSD

Creator: graphicspsd
License: Free for personal and commercial use.

Appstore screenshots template for iPhone sizes (Sketch Freebie)

Creator: Evgeniy Loktev
License: Declared as Free, no proper license given.

iPhone Layered UI Mockup

Creator: Carlos Ramos
License: Declared as Free, no proper license given.

Stripe Devices

Creator: Daniel Sofinet
License: Declared as Free, no proper license given.

Apple Watch Mockup

Creator: PSD Graphics
License: Free for personal and commercial use.

Gold iPhone 7 Plus Mockup Free PSD

Creator: PSD Graphics
License: Free for personal and commercial use.

iPad in Hand

Creator: PSD Graphics
License: Free for personal and commercial use.

Macbook Pro Mockup

Creator: Mark Finn
License: Declared as Free, no proper license given.

Chrome Browser Template

Creator: Bryan Horsey
License: Declared as Free, no proper license given.

iPhone6 Vector

Creator: Michael Ciarlo
License: Declared as Free, no proper license given.

The new MacBook minimalist vector mockup

Creator: MAX BRUNEL
License: Declared as Free, no proper license given.

Perspective Business Cards Mockup

Creator: Shaan Suleman
License: CC0 1.0 Universal (CC0 1.0)..

iPhone7 at night

Creator: Emil Guseinov
License: Declared as Free, no proper license given.

Surface Book Mockup

Creator: Anthony Airoldi
License: Declared as Free, no proper license given.

Perspective Business Cards Mockup V2

Creator: Shaan Suleman
License: CC0 1.0 Universal (CC0 1.0)..

iPhone 7 perspective MockUp

Creator: Piotr Wilk
License: Free for personal and commercial use.

iPhone App Perspective Mockup – Vol 5

Creator: Tony Thomas
License: Free for personal and commercial use with attribution.

iPhone7 – Free PSD Mockup

Creator: Tony Thomas
License: Free for personal and commercial use with attribution.

MacBook Pro with Touch Bar Mockup

Creator: Tony Thomas
License: Free for personal and commercial use with attribution.

Nexus 5

Creator: Samat Odedara
License: Declared as Free, no proper license given.

Perspective App Screens Mockup

Creator: pixeden
License: Royalty free for use in both personal and commercial projects.

Apple iPhone 7 Back Cover Case Mock-up PSD File

Creator: Design Bolts
License: Free for personal and commercial usage.

iPad Air 2 Gravity Mockup

Creator: Pixeden
License: Royalty free for use in both personal and commercial projects.

Perspective Business Card Mockup

Creator: graphberry
License: Declared as Free, no proper license given.

Perspective App PSD Showcase Mockup

Creator: graphberry
License: Declared as Free, no proper license given.

30 PSD Mockups

Creator: SmartyBundles
License: Declared as Free, no proper license given.

Elevated Elements Webpage

Creator: EpicCoders
License: Declared as Free, no proper license given.

iPhone7 UI Mockup

Creator: Epic Pxls
License: Declared as Free, no proper license given.

iPhone 7/Galaxy s7 in Male/Female Hand PSD/Sketch mockup

Creator: Tanya S. Mau
License: Declared as Free, no proper license given.

Here’s the point of emphasis…

That’s the theme this month. This collection of trends focuses on adding emphasis to the design with specific detailing from italics to split screens to stark, minimalist backgrounds paired with a trick or two.

Here’s what’s trending in design this month:

1. Split Screens

Split screen design was something that started gaining traction in mid-2016 and now it is a big deal. Browse through collections of website design and split screen outlines are everywhere.

What’s nice is how quickly the style has evolved. Early split screen designs featured mostly symmetrical designs with a yin and yang style aesthetic. The new split screens have a more “anything goes” feel to them.

The three examples below show three very different ways to use the same trend.

• Rency uses a split design to contain a loop video and the main navigation. The contrast between the white area and red is stark and forces the eye across the screen. It also ensures the user will find the navigation because it is the only element within the colored portion of the design.
• GECN is a complex governmental site that uses a split screen to convey two different ideas with two links immediately in the design. While the split isn’t full-screen and contains a lot of text, this is a good alternative for a design with lots of calls to action, user bases or complicated content.
• Bashful uses a concept similar to Rency but with a twist: The design features a full-screen video loop and half of it is covered with a tinted color box. All the clickable elements are inside the tinted area and the navigation menu is hidden in the top right corner of the video.

What each of the examples have in common is that the split screen design adds emphasis to the content. It helps drive the users to specific elements in the design through use of color and with actual or perceived movement, thanks to contrasting “screens.”

The best part of the newer split screen designs is that there’s an asymmetrical flow to them. Designers aren’t stuck in a yin and yang format and the result is much more interesting visual patterns.

2. Italics

One of the least used character styles is getting more play as a display option.

Italics are making their way into the typography palettes of designers, and not just for the occasional point of emphasis. More italics are being used for display typefaces, secondary elements such as links or menu items or for broader emphasis.

Italics are a fresh take on your typical type styles. Because they aren’t so widely used, this trend is one that is sure to grab the attention of visitors, even if they aren’t sure what about the lettering got their attention in the first place.

Italics are a subtle change that don’t even require a new typography palette. They do come with some cautions and suggestions for best practices.

• To make the most of italics use them sparingly for small blocks of text.
• Use a highly readable typeface if you plan to italicize; novelty options can get tricky.
• Use the typeface italic and don’t try to create your own version by slanting letters. (That can get messy in a hurry.)
• Use italics to represent commonly italicized elements, such as the title of something, as showcases in many of the examples below.
• Pair italics with a simple effect, such as an animation or color, for even more emphasis.
• Because italics can be a little more difficult to read, make sure there is plenty of contrast between the type and background.
• Pair italic type options with a simple serif or sans serif typeface as to not detract from the italic.

3. Solid Backgrounds with a ‘Trick’

One of the easiest ways to create visual emphasis is with contrasting elements. While a solid color background might seem plain or flat, it can be the perfect canvas for a design trick, such as animation, illustration or sound.

The contrast between the starkness of the background and the trick, helps bring the user interface element to life. From the simple bouncing squares in the 3K design to the fun cartoon from Retrace Health to the parallax scrolling of Florian Monfrini.

Each of the effects stands out because of the simplicity of the background. Further, these backgrounds don’t get in the way of the design either. Each one is white or pastel and fades out of the foregrounds so that users focus on the messaging of the primary content. (Black or simple dark backgrounds can work equally well.)

This is why it works: Users aren’t caught up in the canvas and the design almost pops off the screen. It’s almost like art on a wall. If the wall is painted with wild colors and patterns, it can be tough to see the framed image that you are there for, but a piece of art on a white wall is a showpiece.

This design trend creates a showpiece for that trick you’ve been wanting to incorporate into a project. It can be almost anything. And it will be the highlight of the design with a simple canvas to display it on.

One caution when planning a color choice for a simple background: For the most impact stick to a white, black or neutral color. Bold, bright colors are almost a design trick in themselves and might detract from your goal.

Conclusion

Every design needs to place emphasis on something. That’s why this group of trends is so refreshing. Each underlines something important for users with an easy to understand way of providing emphasis. Users know exactly what italics mean and they can see variance in split screens or backgrounds that contrast with user interface elements.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Found

The document has moved here.

---

Apache Server at www.mightydeals.com Port 80

Source

In Part 1 of this series, I provided some background on responsive images, describing how you can add srcset and sizes attributes to an img element to serve appropriately sized image files to users of a website based on the size and capabilities of their browser and device. I also shared how WordPress used its native image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native implementation that WordPress provides.

In this installment, I go into more detail about how image resizing in WordPress works. I explain how I used built-in WordPress hooks along with Cloudinary’s application programming interface (API)—and its PHP integration library—to create a WordPress plug?in that offloads responsive image resizing and optimization to Cloudinary.

Getting Started

This article assumes that you understand how to create a WordPress plug?in. If you don’t, read the WordPress Codex article Writing a Plugin before continuing. For my example, I used the WP-CLI to create a scaffold for my plug?in from the command line.

Next, follow the instructions in the WordPress PHP Getting Started Guide to download and include Cloudinary’s PHP library in your plug?in. Save the library files to the `/lib/cloudinary_php/` directory within your plug?in, and include them in your main plug?in file with the following code:

// Load dependencies.
require 'lib/cloudinary_php/src/Cloudinary.php';
require 'lib/cloudinary_php/src/Uploader.php';
require 'lib/cloudinary_php/src/Api.php';

Finally, set up Cloudinary using the configuration parameters found in your Cloudinary management console, which you define as constants in your `wp-config.php` file because it’s a bad idea to save account information directly to your plug?in. Here’s what the config setup in my plug?in looks like:

Cloudinary::config( array(
 "cloud_name" => CLD_CLOUD_NAME,
 "api_key"    => CLD_API_KEY,
 "api_secret" => CLD_API_SECRET
) );

Now that you have configured your plug?in to communicate with the Cloudinary API, you can start building the functionality of your plug?in.

Image Resizing in WordPress

In planning my plug?in, I wanted to integrate seamlessly with the default user experience for managing images in WordPress. I also wanted to maintain local copies of my files so that everything would continue working even if I decided to deactivate the plug?in. To fulfill these goals, it’s helpful to understand what WordPress does whenever you upload an image.

When you upload an image, WordPress executes the media_handle_upload() function, which saves the uploaded file to the server and creates a new post in the database representing the image using the wp_insert_attachment() function. After the post is created, media_handle_upload() calls wp_generate_attachment_metadata() to create additional metadata about the image. It’s during this step that WordPress creates additional sizes of the image and includes information about those sizes in the attachment metadata. Here’s an example of what attachment metadata in WordPress looks like by default:

array(
  'width' => 1500,
  'height' => 1500,
  'file' => '2016/11/image.jpg',
  'sizes' => array(
    'thumbnail' => array(
      'file' => 'image-150x150.jpg',
      'width' => 150,
      'height' => 150,
      'mime-type' => 'image/jpeg',
    ),
    'medium' => array(
      'file' => 'image-300x300.jpg',
      'width' => 300,
      'height' => 300,
      'mime-type' => 'image/jpeg',
    ),
    'large' => array(
      'file' => 'image-1024x1024.jpg',
      'width' => 1024,
      'height' => 1024,
      'mime-type' => 'image/jpeg',
    ),
  ),
)

As you can see, WordPress now knows the file name and dimensions for the original image file, and for any additional sizes created by WordPress after the image was uploaded. WordPress references this metadata to create the HTML markup needed to display the image on a webpage. This is the information we will extend by including information generated by the Cloudinary API.

Integrating WordPress with Cloudinary

For the remainder of this article, I’ll be referencing the Cloudinary_WP_Integration class in the plug?in. Here’s the full source code for this class. In this class, I’ve added a method named register_hooks(), which adds all my custom functionality by taking advantage of WordPress built-in filter hooks. To better understand WordPress hooks, read about the Plugin API in the WordPress Codex.

Because I want to mirror uploaded files with Cloudinary and use its API to generate a set of image sizes for use in srcset attributes, the first thing I do is hook into the wp_generate_attachment_metadata filter to extend the metadata that WordPress is already creating. To register this functionality, I added the following code to my register_hooks() class:

add_filter( 'wp_generate_attachment_metadata', array( $this, 'generate_cloudinary_data' ) );

This tells WordPress to call the generate_cloudinary_data() method in my class when the wp_generate_attachment_metadata filter is fired. Here’s what that method looks like:

public function generate_cloudinary_data( $metadata ) {
 // Bail early if we don't have a file path to work with.
 if ( ! isset( $metadata['file'] ) ) {
  return $metadata;
 }

 $uploads = wp_get_upload_dir();
 $filepath = trailingslashit( $uploads['basedir'] ) . $metadata['file'];

 // Mirror the image on Cloudinary and build custom metadata from the response.
 if ( $data = $this->handle_upload( $filepath ) ) {
  $metadata['cloudinary_data'] = array(
   'public_id'  => $data['public_id'],
   'width'      => $data['width'],
   'height'     => $data['height'],
   'bytes'      => $data['bytes'],
   'url'        => $data['url'],
   'secure_url' => $data['secure_url'],
  );

  foreach ( $data['responsive_breakpoints'][0]['breakpoints'] as $size ) {
   $metadata['cloudinary_data']['sizes'][$size['width'] ] = $size;
  }
 };

 return $metadata;
}

This code uses wp_get_upload_dir() to build the path to the uploaded image and passes it to a second method, handle_upload(), which uploads the image to Cloudinary and returns data from the API. When handle_upload() is complete, I add the returned data to a cloudinary_data array in the metadata, and then loop through each breakpoint size that Cloudinary returns—which I’ll explain in a moment—and save those to the cloudinary_data['sizes'] key. Let’s look at what happens in the handle_upload() method:

public function handle_upload( $file ) {
  $data = false;
  if ( is_callable( array( 'CloudinaryUploader', 'upload' ) ) ) {
    $api_args = array(
      'responsive_breakpoints' => array(
        array(
          'create_derived' => false,
          'bytes_step'  => 20000,
          'min_width' => 200,
          'max_width' => 1000,
          'max_images' => 20,
        ),
     ),
     'use_filename' => true,
    );
    $response = CloudinaryUploader::upload( $file, $api_args );
    // Check for a valid response before returning Cloudinary data.
    $data = isset( $response['public_id'] ) ? $response : false;
  }
  return $data;
}

This method determines whether it can call the upload() method in the CloudinaryUploader class I imported earlier by using is_callable(). If it can, it builds the arguments I plan to pass to CloudinaryUploader::upload(). First, I use Cloudinary’s responsive image breakpoint functionality to automatically generate the best set of image sizes based on the content of the image itself. I’m passing a few options to the responsive_breakpoints argument here, so let me explain each:

• create_derived tells Cloudinary whether it should create additional image files as soon as the original is uploaded. Passing false generates data about the image without actually creating the files until they’re requested.
• bytes_step defines how many bytes should be allowed between images before creating a new size. I’m going with 20,000 (or 20 KB), but you can tweak that number to suit your needs.
• The min_width and max_width arguments tell Cloudinary what the dimensions of the smallest and largest images, respectively, should be so that you don’t create unnecessary image sizes.
• max_images sets the maximum total number of images that Cloudinary should create.

With this information, Cloudinary automatically determines the optimal number and size of images to create for use in srcset attributes. Finally, I set use_filename to true, which tells Cloudinary to use file names matching the one I’m uploading—defined as the $file variable—rather than generating random image file names. This helps me identify images in my Cloudinary library but makes no real difference otherwise.

Now that I have a way to automatically upload images to Cloudinary and save the returned data to the attachment metadata for my image, I can use these data to serve images from the Cloudinary content delivery network (CDN) rather than my local server. To do this, I first want to filter all attachment URLs so that the Cloudinary URL is used instead of local URLs. For this, I’ve added a filter named get_attachment_url() to the wp_get_attachment_url hook in my register_hooks() method here:

add_filter( 'wp_get_attachment_url', array( $this, 'get_attachment_url' ), 10, 2 );

This line returns the URL and attachment ID of an image to be passed to my get_attachment_url() method, which looks like this:

public function get_attachment_url( $url, $attachment_id ) {
  $metadata = wp_get_attachment_metadata( $attachment_id );

  if ( isset( $metadata['cloudinary_data']['secure_url'] ) ) {
    $url = $metadata['cloudinary_data']['secure_url'];
  }

  return $url;
}

This method looks up the metadata associated with my image and determines whether a URL from the cloudinary_data I saved in my last step exists. If it does, it returns the URL from Cloudinary. Otherwise, it returns the local URL.

This takes care of the URL for the full-sized image, but replacing URLs for any of the sizes WordPress creates (i.e., intermediate sizes) can be a bit trickier. To accomplish this, I need to hook into image_downsize(), which is the function WordPress uses to get information about intermediate sizes associated with an image. Here, I use Cloudinary instead of local files.

The following code registers my filter followed by the method that replaces the data from WordPress with data from Cloudinary:

add_filter( 'image_downsize', array( $this, 'image_downsize' ), 10, 3 );
public function image_downsize( $downsize, $attachment_id, $size ) {
  $metadata = wp_get_attachment_metadata( $attachment_id );

  if ( isset( $metadata['cloudinary_data']['secure_url'] ) ) {
    $sizes = $this->get_wordpress_image_size_data( $size );

    // If we found size data, let's figure out our own downsize attributes.
    if ( is_string( $size ) && isset( $sizes[ $size ] ) &&
       ( $sizes[ $size ]['width'] <= $metadata['cloudinary_data']['width'] ) &&
       ( $sizes[ $size ]['height'] <= $metadata['cloudinary_data']['height'] ) ) {

      $width = $sizes[ $size ]['width'];
      $height = $sizes[ $size ]['height'];

      $dims = image_resize_dimensions( $metadata['width'], $metadata['height'], $sizes[ $size ]['width'], $sizes[ $size ]['height'], $sizes[ $size ]['crop'] );

      if ( $dims ) {
        $width = $dims[4];
        $height = $dims[5];
      }

      $crop = ( $sizes[ $size ]['crop'] ) ? 'c_lfill' : 'c_limit';

      $url_params = "w_$width,h_$height,$crop";

      $downsize = array(
        str_replace( '/image/upload', '/image/upload/' . $url_params, $metadata['cloudinary_data']['secure_url'] ),
        $width,
        $height,
        true,
      );

    } elseif ( is_array( $size ) ) {
      $downsize = array(
        str_replace( '/image/upload', "/image/upload/w_$size[0],h_$size[1],c_limit", $metadata['cloudinary_data']['secure_url'] ),
        $size[0],
        $size[1],
        true,
      );
    }
  }

  return $downsize;
}

This is a long block of code, so let me walk through it. Again, I start by getting the attachment metadata and checking for the $metadata['cloudinary_data'] information. I then use a helper function called get_wordpress_image_size_data() to get the image sizes that are registered with WordPress, which I then pass to image_resize_dimensions() to calculate the expected dimensions if I’m using a named size (e.g., thumbnail, medium). If the $size parameter is already an array of dimensions, which happens occasionally, I pass those dimensions directly to Cloudinary for processing.

I should note here that I could have used the Cloudinary API to replicate all the alternate sizes WordPress creates. Instead, I chose to take advantage of Cloudinary’s dynamic URL image generation functionality to generate the additional sizes I need by replacing the URL to the full-sized image with dynamic parameters like this:

str_replace( 
  '/image/upload',
  "/image/upload/w_$size[0],h_$size[1],c_limit",
  $metadata['cloudinary_data']['secure_url'] );

If the image dimensions should be an exact crop, I’ll use Cloudinary’s c_lfill cropping algorithm. Otherwise, c_limit make images that fit within my target dimensions while maintaining the original file’s aspect ratio.

Once I’ve completed these steps, Cloudinary should serve any image newly uploaded to WordPress. The last task is to generate srcset and sizes attributes by using the metadata that I previously got back from Cloudinary’s responsive image breakpoint functionality.

Automatically Generating srcset and sizes

To understand the details of WordPress’s responsive images implementation, you may want to read Responsive Images in WordPress 4.4. To summarize, I’ll review the two occasions when WordPress dynamically adds srcset and sizes to images.

Responsive Markup for Dynamically Generated Images

First, WordPress automatically attempts to add these attributes to any image dynamically generated in a template using wp_get_attachment_image() or similar functions. You can add srcset and sizes attributes to these images by filtering the image attributes before the markup is assembled by using the wp_get_attachment_image_attributes filter:

add_filter( 'wp_get_attachment_image_attributes', array( $this, 'wp_get_attachment_image_attributes' ), 10, 3 );
public function wp_get_attachment_image_attributes( $attr, $attachment, $size ) {
  $metadata = wp_get_attachment_metadata( $attachment->ID );

  if ( is_string( $size ) ) {
    if ( 'full' === $size ) {
      $width = $attachment['width'];
      $height = $attachment['height'];
    } elseif ( $data = $this->get_wordpress_image_size_data( $size ) ) {
      // Bail early if this is a cropped image size.
      if ( $data[$size]['crop'] ) {
        return $attr;
      }

      $width = $data[$size]['width'];
      $height = $data[$size]['height'];
    }
  } elseif ( is_array( $size ) ) {
    list( $width, $height ) = $size;
  }

  if ( isset( $metadata['cloudinary_data']['sizes'] ) ) {
    $srcset = '';

    foreach( $metadata['cloudinary_data']['sizes'] as $s ) {
      $srcset .= $s['secure_url'] . ' ' . $s['width'] . 'w, ';
    }

    if ( ! empty( $srcset ) ) {
      $attr['srcset'] = rtrim( $srcset, ', ' );
      $sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $width );

      // Convert named size to dimension array for the filter.
      $size = array($width, $height);
      $attr['sizes'] = apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $attr['src'], $metadata, $attachment->ID );
    }
  }

  return $attr;
}

In the wp_get_attachment_image_attributes() method, you calculate the dimensions of the image based on the $size parameter. For now, I’m only adding srcset and sizes to those images with an aspect ratio matching the original file so that I can take advantage of the breakpoint sizes Cloudinary provided when I uploaded my image. If I determine that the $size is a different aspect ratio (e.g., a hard crop), I return the $attr value unchanged.

Once you have the dimensions of your image, you loop through all the breakpoint sizes from the $metadata['cloudinary_data']['sizes'] array to build the srcset attribute. Afterward, you create a sizes attribute based on the width of the image. Finally, you pass your sizes attribute value to the wp_calculate_image_sizes() filter so that themes and plug?ins can modify the sizes attribute based on their specific layout needs.

Responsive Markup for Images in Post Content

WordPress also automatically adds srcset and sizes attributes to images embedded in post content. Instead of saving these attributes in the post content in the database, WordPress generates them dynamically when the page is generated. That way, as new methods for serving responsive images become available, WordPress can easily adopt them.

You want your Cloudinary integration to be just as future friendly as the native implementation. So, replace the content filter that WordPress uses — wp_make_content_images_responsive() — with your own filter, named make_content_images_responsive(). Here’s the code that accomplishes both tasks:

// Replace the default WordPress content filter with our own.
remove_filter( 'the_content', 'wp_make_content_images_responsive' );
add_filter( 'the_content', array( $this, 'make_content_images_responsive',  ) );
public function make_content_images_responsive( $content ) {
  if ( ! preg_match_all( '/<img [^>]+>/', $content, $matches ) ) {
    return $content;
  }

  $selected_images = $attachment_ids = array();

  foreach( $matches[0] as $image ) {
    if ( false === strpos( $image, ' srcset=' ) && preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) &&
      ( $attachment_id = absint( $class_id[1] ) ) ) {

      /*
       * If exactly the same image tag is used more than once, overwrite it.
       * All identical tags will be replaced later with 'str_replace()'.
       */
      $selected_images[ $image ] = $attachment_id;
      // Overwrite the ID when the same image is included more than once.
      $attachment_ids[ $attachment_id ] = true;
    }
  }

  if ( count( $attachment_ids ) > 1 ) {
    /*
     * Warm object cache for use with 'get_post_meta()'.
     *
     * To avoid making a database call for each image, a single query
     * warms the object cache with the meta information for all images.
     */
    update_meta_cache( 'post', array_keys( $attachment_ids ) );
  }

  foreach ( $selected_images as $image => $attachment_id ) {
    $image_meta = wp_get_attachment_metadata( $attachment_id );
    $content = str_replace( $image, $this->add_srcset_and_sizes( $image, $image_meta, $attachment_id ), $content );
  }

  return $content;
}

The make_content_images_responsive() method is essentially a copy of the wp_make_content_images_responsive() function from WordPress, which searches the content for all elements — handling some edge cases and including some performance optimizations in the process—and passes them to a second function that handles adding the srcset and sizes attributes. I created a custom callback method in my class named add_srcset_and_sizes() for this purpose:

public function add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
  if ( isset( $image_meta['cloudinary_data']['sizes'] ) ) {
    // See if our filename is in the URL string.
    if ( false !== strpos( $image, wp_basename( $image_meta['cloudinary_data']['url'] ) ) && false === strpos( $image, 'c_lfill') ) {
      $src = preg_match( '/src="([^"]+)"/', $image, $match_src ) ? $match_src[1] : '';
      $width  = preg_match( '/ width="([0-9]+)"/',  $image, $match_width  ) ? (int) $match_width[1]  : 0;
      $height = preg_match( '/ height="([0-9]+)"/', $image, $match_height ) ? (int) $match_height[1] : 0;

      $srcset = '';

      foreach( $image_meta['cloudinary_data']['sizes'] as $s ) {
        $srcset .= $s['secure_url'] . ' ' . $s['width'] .  'w, ';
      }

      if ( ! empty( $srcset ) ) {
        $srcset = rtrim( $srcset, ', ' );
        $sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $width );

        // Convert named size to dimension array.
        $size = array($width, $height);
        $sizes = apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $src, $image_meta, $attachment_id );
      }

      $image = preg_replace( '/src="([^"]+)"/', 'src="$1" srcset="' . $srcset . '" sizes="' . $sizes .'"', $image );
    }
  }

  return $image;
}

Here, I again make sure that my attachment metadata includes size data from Cloudinary. Then, I make sure that the image markup includes the same file name as the image I uploaded to Cloudinary, just in case the image markup hasn’t been edited after it was inserted into the content. Finally, I include false === strpos( $image, 'c_lfill') to determine whether the URL indicates that Cloudinary is hard-cropping the image, similar to how I checked for hard cropping in wp_get_attachment_image_attributes(). If all checks pass, I can loop through the breakpoint sizes that were created when I originally uploaded the image to Cloudinary and use those data to build out my srcset and sizes attributes.

With this functionality, you can now successfully offload all your responsive image processing to Cloudinary and serve optimized images from the Cloudinary CDN instead of your local web server.

Wrap?Up

I hope this gives you a better understanding of how WordPress handles resizing images and shows how you can extend WordPress to take advantage of Cloudinary to dynamically generate and serve images that are optimized for different device types and sizes. To try this code out on your site, download the plug?in from GitHub, and be sure to leave feedback about anything that you think could be improved.

---

This post (and the plugin!) was written by Joe McGill.

---

Responsive Images in WordPress with Cloudinary, Part 2 is a post from CSS-Tricks

Front-end developers and web designers live in an insane multi-device reality.

A few months ago, the Red Hat UXD team discussed how to design enterprise applications for mobile environments. Sarah and Jenn, my talented colleagues, pointed out that touch devices should not be judged by their size alone.

Assumptions are beguiling. If only we could agree on certain boundaries, then wouldn’t web design be so much easier to control?” – Jeremy Keith, Resilient Web Design

Today, there is a new layer of complexity to the already complicated world of interaction design and front-end development.

The hardware industry has created massive touchscreen TVs, really large tablets (like the iPad Pro), and even huge touch desktop PCs (like the new, jaw-dropping Surface Studio). This means we can no longer assume that a small viewport is a touch screen and a large viewport isn’t. Sometimes large screens are touch, requiring the user to use their finger, and small screens have a stylus.

Responsive viewport media queries are great but they’re not enough.

We can detect a touch screen with JS tools like Modernizr, but CSS has a hidden gem that is smarter and more flexible.

Interaction Media Features

Thanks to the W3C CSS Working Group and the CSS community, we have a cleaner solution.

On the Media Queries Level 4 Working Draft, there is a spec for Interaction Media Features that includes three definitions:

• Pointing Device Quality
• Hover Capability
• Rare Interaction Capabilities

These provide the capability to query a document based on the presence and accuracy of the user’s pointing device and whether it has the ability to hover over elements.

Let’s take a closer look at each one:

Pointing Device Quality: The pointer Feature

The pointer media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, the pointer media feature must reflect the characteristics of the “primary” input mechanism, as determined by the user agent.” – W3C

The key word here is “accuracy” of the pointing device.

• A mouse or a drawing stylus is very accurate and defines the value of fine.
• A finger or a Kinect peripheral isn’t, and takes the value of coarse.

Therefore, we can adapt our UI elements to the user’s pointer capabilities. This is useful for making hit areas larger, if the user’s main input mechanism is a finger.

/* The primary input mechanism of the device includes a pointing device of limited accuracy. */
@media (pointer: coarse) { ... }

/* The primary input mechanism of the device includes an accurate pointing device. */
@media (pointer: fine) { ... }

/* The primary input mechanism of the device does not include a pointing device. */
@media (pointer: none) { ... }

An example use case for this query is to size the click area of a checkbox or radio.

Hover Capability: The hover Feature

The hover media feature is used to query the user’s ability to hover over elements on the page. If a device has multiple input mechanisms, the hover media feature must reflect the characteristics of the “primary” input mechanism, as determined by the user agent.” – W3C

It’s important to notice that it only evaluates the primary input mechanism. If the primary input mechanism is not able to hover, but the secondary input can, then the query will resolve to none:

For example, a touchscreen where a long press is treated as hovering would match hover: none.” – W3C

• A touch screen device, where the primary pointer system is the finger and can’t hover, will take the value of none.
• A device where the primary input is a mouse and can easily hover parts of the page takes the value of hover.

/* Primary input mechanism system can 
   hover over elements with ease */
@media (hover: hover) { ... }

/* Primary input mechanism cannot hover 
   at all or cannot conveniently hover 
   (e.g., many mobile devices emulate hovering
   when the user performs an inconvenient long tap), 
   or there is no primary pointing input mechanism */
@media (hover: none) { ... }

A good use of this query is a drop-down menu.

Rare Interaction Capabilities: The any-pointer and any-hover Features

On devices that are both touch and have a mouse or a stylus, like the Microsoft Surface, the hover and pointer media query will evaluate the primary input mechanism only.

As Andrea Giammarc pointed out, his Dell XPS 13″ touch takes the value of fine, even though it does have a touch screen because the primary input mechanism is a mouse.

@Real_CSS_Tricks FYI I have a touch screen and that method fails like a charm in Chrome. ?

— Andrea Giammarchi (@WebReflection) February 5, 2017

If we want a device like that to take the value of coarse or hover, we can use the Rare Interaction Capabilities.

The any-pointer and any-hover media features are identical to the pointer and hover media features, but they correspond to the union of capabilities of all the pointing devices available to the user. More than one of their values can match, if different pointing devices have different characteristics. They must only match none if all of the pointing devices would match none for the corresponding query, or there are no pointing devices at all.” – W3C

/* One or more available input mechanism(s) 
   can hover over elements with ease */
@media (any-hover: hover) { ... }

/* One or more available input mechanism(s) can hover, 
   but not easily (e.g., many mobile devices emulate 
   hovering when the user performs a long tap) */
@media (any-hover: on-demand) { ... }

/* One or more available input mechanism(s) cannot 
   hover (or there are no pointing input mechanisms) */
@media (any-hover: none) { ... }


/* At least one input mechanism of the device 
   includes a pointing device of limited accuracy. */
@media (any-pointer: coarse) { ... }

/* At least one input mechanism of the device 
   includes an accurate pointing device. */
@media (any-pointer: fine) { ... }

/* The device does not include any pointing device. */
@media (any-pointer: none) { ... }

Device Examples

Typical examples of devices matching combinations of pointer and hover:

	pointer: coarse	pointer: fine
hover: none	smartphones, touch screens	stylus-based screens (Cintiq, Wacom, etc)
hover: hover	Nintendo Wii controller, Kinect	mouse, touch pad

W3C

Patrick H. Lauke has written a great guide about how each device type evaluates interaction media queries.

This is really cool, right? I hear you shouting: what about browser support?

Browser Support Isn’t Bad at All!

Even though this is a working draft, it has pretty good support.

My simple test proved successful on Chrome, Chrome for Android, Safari, Edge, Opera, Samsung browser, and Android Browser, but it didn’t work on FireFox, Opera Mini or IE.

See the Pen Touch screen test by Andres Galante (@andresgalante) on CodePen.

FireFox and IE represent only a bit more than 2% mobile/tablet browser market share. I couldn’t find information about touch TVs or other touch screen devices that are not mobile or tablets.

I think we are ready to use this feature, and as FireFox adds support for it and IE dies once and for all, we will have full support.

The “Cards Selection” Use Case

A month ago, we worked on implementing a multi-select cards component for the new version of PatternFly, an open source design system to which I contribute. It was a perfect case to use the hover and pointer media query.

To select a card, when the user hovers over it, a checkbox is displayed. If the user is not able to hover over elements, then we show the checkbox at all times.

To improve this interaction, we increased the hit area of the checkbox if the primary input mechanism is coarse.

See the Pen Multi select cards by Andres Galante (@andresgalante) on CodePen.

Firefox and IE will display default checkboxes at all times.

Size Isn’t Everything

Devices should be judged by their capabilities since, in the end, it is those capabilities that define them.

This is an underused feature, and it opens the door to exciting new challenges. I can’t wait to see what we, as a community, can do with it.

References

All the descriptions commented on the code are from Mozilla Developer Network.

---

Touch Devices Should Not Be Judged By Their Size is a post from CSS-Tricks

Typography is a primary element of composition. Being a designer, I pay a lot of attention to its quality. Operating Photoshop is easy for me; however, to level up my skills, I am always learning to work with letters, using my hands, without any computer programs.

The first time I took a calligraphy course was about a year ago, and the decision was quite hard. I was sure that it would be painstaking and that I would need excellent handwriting to learn this art. How mistaken I was!

The post The Art Of Calligraphy: Getting Started And Lessons Learned appeared first on Smashing Magazine.

I’ve said a number of times in the past:

I wish I could just check a checkbox and make certain Google Analytics data public.

I get that analytics can be a very private thing for some sites. I think there are just as many sites where that data just doesn’t need to be private. Not only would it be interesting, but insight might be gleaned from having more eyeballs on the data, and it could contribute to a wider data set of analytic trends.

Anyway, there is no such checkbox. But Zach Aten pointed out to me there is a thing called Data Studio that allows you to build custom visual reports, and you can make them public with the same kind of sharing controls you find in other Google products (like Google Docs).

I slapped together a quick dashboard for just raw traffic data. Not the most useful thing to look at, but sometimes the most fun. I’d embed it here, but…

Can I embed charts on other sites?

No. Data Studio is currently a stand alone product.

Embedding a Data Studio report in an iframe is blocked by Chrome as a potential security risk.

So here’s a link to it and a picture:

Of course, you can do a way better job of not only building more beautiful and useful charts but also of collecting more useful data. If you’re using Google Analytics, doing a little bit more than using the default snippet goes a long way. Remember we have an article and video on that subject.

---

Google Analytics Data Studio is a post from CSS-Tricks

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

55 CSS Checkboxes

Do Responsive Sites Have to Be so Tall on Mobile?

How I Started Drawing CSS Images

CSS Cheatsheet for Box Alignment

Responsive CSS Patterns Without Media Queries

The Circular Design Guide

Design Patterns for Humans

Netflix’s New Design Series Spreads the Wrong Idea About Design

The Value of Design Constraints

5 Essential Steps to Building a UX Design Portfolio

How to Build a Freelance Website that Actually Drives Leads

The Most Creative Newsletters by Designers for Designers

Curated List of Best Tools for Launching your Website

How to Start a Large Code project

Stop Talking and Start Sketching: A Guide to Paper Prototyping

Air Canada Unveils Sleek New Brand Design – Forbes

Leaflet.js is the Simplest Map Library You’ll Ever Find

6 Reasons Why You Should Never Use an Online Website Builder for your Business

A Branding Tool for Everything and Everyone

48 Free Tattoo Fonts for your Body Art

Website Builder Wix Acquires Art Community DeviantArt for $36M

The Programming Interview from Hell

How the Freelance Generation is Redefining Professional Norms

User Research is Overrated

Am I a Real Developer – Ever Wonder if You’re a ‘Real’ Developer

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Found

The document has moved here.

---

Apache Server at www.mightydeals.com Port 80

Source

Lea Verou writes about the design of HTML APIs and how we might write better documentation for web designers. An HTML API is term for a JavaScript library that is configured and controlled through HTML rather than through JavaScript. For example

might tell a library that this element is in charge of opening a modal. There is no configuration or initting other than loading the library itself.

My favorite part of this piece is where Lea confronts what might generally be seen as a simple plug-n-play JavaScript library:

Even this tiny snippet of code requires people to understand object literals, arrays, variables, strings, how to get a reference to a DOM element, events, when the DOM is ready and much more. Things that seem trivial to programmers can be an uphill battle to HTML authors with no JavaScript knowledge

By giving folks an HTML API we can avoid potential headache.

…remember that many of these people do not speak any programming language, not just JavaScript. Do not talk about models, views, controllers or other software engineering concepts in text that you expect them to read and understand. All you will achieve is confusing them and turning them away.

Lea’s made a collection of libraries that have HTML APIs.

Direct Link to Article — Permalink

---

HTML APIs: What They Are And How To Design A Good One is a post from CSS-Tricks

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

The more the merrier

Designer drool

Tough choice

Can you relate to these situations? Please share your funny stories and comments below…

Found

The document has moved here.

---

Apache Server at www.mightydeals.com Port 80

Source

Eager to create your first website? Are you sure that you need one? If your answer is yes, don’t spontaneously go with WebCheap Supplier Ltd. with a full hosting for 0.99 bucks a month, but instead, read the following article first.

What do You Want to Accomplish?

Why do you want to create a website? Because everyone has one? Because you can? All of these would be pretty weak reasons, and I’m going to assume that you have a better motivation.

Do you want to run a blog that is supposed to cover a certain niche, or do you plan on selling your products over the internet? Whatever it may be, define it clearly, and focus on that goal. Don’t try to cover a little bit of everything just because there’s enough space on the internet and an added function more or less doesn’t cost more money.

No matter what your aim is, the website is the communication means to reach that goal. You know this from the archetype of all communication, the dialogue. It needs a clear structure as well, shouldn’t drift off to the left or right, and it is the most successful when it strictly follows the golden thread laid out by the goal of the dialogue.

You should build your website like this as well. Don’t let it fray out, get out of hand, or drift off into vagueness. Don’t use more words than needed, and place clear calls to action (CTA).

Who do You Want to Reach?

Who’s your target group? You probably thought you had already answered this question inside the reply to the previous question. But that would be too simplistic. When it comes to the question who you want to reach, you should take smaller steps, and not just define a more or less vague group such as teenagers between 16 and 19.

I can almost guarantee that your target group can not be defined solely by their age (or other obvious factors). Further aspects will be substantial. Work them out precisely.

Is the offer directed more towards male or female clients? Are pupils, apprentices, or students more attractive? Does your target customer need a certain amount of free income? There are lots of factors like these. The more precisely you define your target group, the more accurately will you be able to address them.

Speaking of addressing; use the language of your target audience to meet them at eye level. If this includes not sticking to all dictionary rules, then do that.

By Which Search Terms do You Want to be Found?

You actually have to ask this question before registering your internet address (URL, domain). In the best case, the most relevant search term that you wish to be found by should be part of your domain name. This way, Google thinks that your website is exceptionally relevant to this keyword, as it even appears in the URL.

Every single page of your website gets a title, a meta description, as well as an individual URL which comes as an extension of the domain name. Within these three elements is where you cover your search terms, the so-called keywords. This can definitely be a different one for each page. Then, you make sure that the corresponding keyword appears in headings, captions, and file names on the according page. This way, you have pretty much covered the area of so-called on-page SEO, the search engine optimization on the page itself.

How to Structure the Information on Your Website?

The information architecture of your site, meaning the way you make your content available regarding structure, is just as essential for the success as architecture is when building a house. For example, it would be suboptimal if the only way to reach the kitchen was through the bedroom.

In general, the navigation menu of your website should have as few items as possible. Of course, not so few that the essential areas of your site can’t be accessed. Also, I wouldn’t recommend nesting the navigation too deeply. Your visitor will get lost very quickly.

Provide clear access to the individual topics, and, when in doubt, reduce or focus your content, rather than opening the 100th menu item.

Do You Want to Build Your Site Yourself or Will You Hire a Professional?

You won’t be surprised to hear that I generally recommend to always hire a professional when it comes to creating your website, especially when it has to be built from scratch. Depending on your knowledge, or level of motivation, you can learn how to take care of the website later on. But you should leave the cornerstone to an expert, to make sure that the foundation doesn’t break. Websites are more than a few pages with pictures.

However, if your project is very small, or if you simply don’t have the financial option to hire an expert, that doesn’t mean that you should forgo a website. In that case, you’ll have to get to work yourself. Prepare for a training period, and grab the simplest tool you can find.

A while ago, we published an article that shows some beautiful stuff that can be done with a homepage builder. Recently, Wix.com has seen a massive presence on the market. We have already taken a look at this product several times. You won’t go wrong with that.

To take care of your pages, you need other tools, like Canva for the image creation, or Unsplash as a source for free images.

Other useful tools for web design and work related to your website can be found in this overview on DIY web design.

Who do You Entrust With the Hosting?

If you followed my advice to hire a professional to create your website, he should help you to elegantly avoid the cliff that is selecting the appropriate web host. If you went off on your own, there are a couple of things to keep in mind that you might not fully understand yet.

The most valuable insight on this topic is the following: changing the selected web host is not easy. Thus, you shouldn’t choose a very cheap solution first, and see what happens. When in doubt, just move on.

If your website has a certain complexity, and is more than a digital business card, moving from A to B is not as simple as moving a few boxes into a new apartment. Different providers don’t only have different prices, but, above all else, entirely different performance levels.

Take a look at our article on hosting aspects.

For logical reasons, you should try to make a qualified assessment of how much traffic is to be expected at what time, and which server-side features are required. Most likely, this won’t lead to the cheapest host, and that’s a good thing.

Conclusion: Thought About Everything? Then Let’s Go!

If you went through all questions and got useful answers, you can start with the realization of your website with a clear conscience. Here at Noupe, you’ll find tons of articles to help you on your way.