TL;DR: Maybe: If you have a need for bulk assets, this subscription can certainly be an affordable budget way to purchase everything.

Why did I try Envato Elements in the first place?

I was revamping my company website, with an emphasis on updating the portfolio section. I was searching all over the internet for high quality mockup templates for my recent work in web design, branding, and graphic design. I noticed I was wasting my time scouring for free templates and was willing to pay to save time. When looking for paid options, I noticed the challenge to find mockups that were similar in style was still difficult.

I found a smartphone package on Creative Market that had my attention. The appearance was high-quality for a reasonable price point, but I still would need to find a desktop package and other graphic design options. Next I stumbled upon www.ls.graphics (not affiliate link) and their device mockup pacakge for $70. This was everything I wanted for the website side of my portfolio and with little hesitation I purchased the package and was extremely happy. The package deal included customizable multi-perspective high-resolution mockups for most current flagship devices: iPhone XS, iphone XR, iMac, iPad Pro, MacBook, MacBook Air, MacBook Pro, MS Surface Studio, MS Surface book 2,  Dell XPS, Google Pixel, Galaxy S9 and more.

Sadly, what worked for the website portfolio, didn’t work for logos and graphic design. If you check out my portfolio, you’ll notice I favor minimalist design where the focus is on the design. No random plants, pens, and gizmos, on a desk. Nope. Simply a gray (or muted) background if possible.

The search for branding and graphic design mockups continued.

I considered Envato elements earlier and quickly dismissed the subscription due to their weak selection of device mockups. But, with that piece of the puzzle already solved, I ended up purchasing a month’s access for $33. The subscription worked out and I got what I needed. But overall, I wasn’t thrilled with this service, which I break down in the pros and cons below.

 

Where Envato elements falls short:

Quality is a mixed bag.

The service provides a huge assortment of stock photos and video, graphics and templates, music and sound effects, fonts, assets for websites, 3D elements and more. Looking through the stock photo section, I got the impression the selection was dated and made of content that didn’t sell. My test to confirm this was searching the term “smartphone”, which revealed the majority of photographs that include a smartphone, indubitably used old iPhone models. My guess would be that 95% of the smartphones photographs feature an iPhone 8 or older.

 

Envato has a big stake in the stock asset industry and is not going to risk losing sales on it’s money makers. Therefor, the top sellers and highest quality products are unlikely to find its way into the subscription library. However, over the years, Envato presumably amassed a humongous collection of assets that sit collecting dust. This is where subscriptions make sense, monetizing low-selling content and repackaging it to budget buyers.

Finding the right graphic is a challenge.

A large selection of low quality stock means you will have to sift through search results. You will download content, only to find it is not up to your standards. But with the shear size of the collection and various asset types, you will unquestionably find some usable content.

One of the main reasons I am willing to pay for such content is time is money. In my budget days, I would jump from website to website in search for free content without attribution requirements. When the quest for the right shot or angle slows the process down, you waste hours and can still come up empty handed. With Envato Elements, you have access all in one place, but it still feels like you can search hard and long for a specific shot and come up disappointed.

Where Envato Elements rises to the occasion:

Huge library spanning many media types.

$33 for a month access to such a large and diverse collection is an amazing deal. Seriously, I’ve purchased one photo on istockphotos.com for $30. Download a few things and the deal is worth well worth it. Find 10+ things and you’re making off like a bandit, and you have an entire month to find content. Don’t forget, you can even search their collection before you commit. Although, you get better previews to multiple-file downloads when you subscribe.

Compared to searching for free assets from website to website, this is a better experience in that your search is in one place. Also, at least you know when you find something, you already have the license to use it.

Conclusion

Envato Elements is ideal for designers on a budget, agencies with a constant need for assets, or folks like me who have a need for bulk content for a specific project or two. On the other hand, if you have high-standards and seek high-quality content, I recommend looking elsewhere. You may be able to find some perfect assets with Envato, but it is like finding a needle in a haystack.

Imagine sending email by typing in MS Word and sending the message over as a screenshot. Seems silly, right? But for many web designers, artists, and bloggers, that’s been our situation when designing vector graphics. You could compose scalable icons, but would need to export them as raster images for websites. Many logos were originally created in Illustrator, but then designers crop them and save them as .JPGs and .PNGs for web destinations. Resizing and/or changing a color became an entire process that started with going back to the source file, which is the MS Word document in my email analogy. You would make the desired changes, output the series of images, and re-upload all those files to your server.

Thankfully, that’s all changed. While scalable vector graphics (SVG) were introduced in 2001, only recently has the image format displayed consistently on the web, leading me to the first reason why the SVG format is kicking data and taking names.

 

Why SVGs are made of dreams

1) SVGs are widely supported

SVGs are growing in popularity and compatibility on websites. In general, all major browsers support SVGs at a basic level. SVGs do come with some limitations, but what doesn’t? When facing compatibility inconsistencies, you can live with them, have a fallback, or use JavaScript to bypass those shortcomings. For example, Microsoft’s Internet Explorer and Edge don’t provide functionality for CSS animations that make use of the transform property. Explorer and Edge will simply ignore those instructions and still render the graphics statically. That’s not a big deal as long as that doesn’t break functionality. The other capable modern browsers will display the intended movement and animation, and users will enjoy the visual progressive enhancement.

 

2) SVGs are speedy

SVGs are generally small in file size, and thus download faster than raster images. Also, inline SVG code can be placed in HTML directly and cut down on server requests. You need millions of pixels to fill a screen with a digital photograph on common-sized monitors, while you can make colorful full-screen SVG backgrounds with a fraction of the file size.

 

3) SVGs scale perfectly

They’re scalable – it’s in the name. With responsive design becoming the new norm over the last ten years, websites need to consider various screen sizes. Graphics that scale automatically are a welcome tool on the web for this very reason. Raster graphics —think JPGs, PNGs, and GIFs— on the other hand, cannot scale bigger without becoming blurry. And even though you can shrink photos on websites decently, your browser is downloading an image at the bigger than necessary file-size.

 

4) SVGs are high resolution

They look great at any resolution, and that’s important as higher-resolution devices become more popular. Your computer lacks the fictional CSI software that can zoom into images beyond their resolution without pixelation or getting blurry. Raster photos are composed of colored squares within a grid, unlike SVGs which are calculated through math to fit the current screen resolution.

 

5) SVGs can be styled through CSS

CSS is the way to style websites, and it is more powerful than ever. You can even style raster images, though effects target the entire image and may not be very practical. Like, how many websites really need to display an inverted image or change the hue? Blurs, opacity, sepia, grayscale, and brightness may have a place, though it is more common for designers to style elements around image, such as a colorful image overlay. SVGs on the other hand are written in XML and that means you can target bits and pieces that make up the entire SVG. You can change the color of an icon or re-position the direction of an arrow within an icon. You could hide and show reusable vector stars as part of a rating system. You can place many of these properties on mouse hovers for easy animations, which brings us to the next point…

 

6) SVGs can be animated

Raster images can look impressive, but unless you delve into video or gifs that come with large file sizes, animating digital photos is limited. Unlike raster images, SVGs are made up of smaller parts that can be manipulated. Picture a simple smiley face. In the SVG format, there would likely be a yellow circle for the head, perhaps two black circles for eyes, along with a curved line for a mouth. You could target any of those shapes to animate, and could make an eye wink by simply decreasing its height.

A more practical use is animating company logos. Many years ago, you were limited in hover effects. If a website visitor hovered over a logo, perhaps using a transparent .png logo, you could animate the background changing color. Now, with SVG, you can spin the logo mark, while changing letter color in delayed succession, and increasing the logo’s overall size.

 

7) SVGs can be rearranged easily

When preparing images for the web, the dimensions are often determined by the destination. Sometimes one website will want your image as a square – like Instagram – while others require portrait or landscape orientations. With raster images, you may have to crop images in ways that hide certain elements. However, with vector graphics, you can simply re-position and re-size elements around varying dimensions.

If you download free stock photographs and free vector graphics, you can make color edits to match your company branding. With vector graphics, you can do it with the click of a button, but with raster images, you have to work to recolor section by section.

 

8) SVGs support transparency

Not all raster formats allow transparency, and those that do come with some drawbacks liked jagged edges with .GIF or hefty file-size with PNG. Transparency works well with SVGs, and is one of the main reasons I use SVGs for company logos on websites. It allows simple hover effects for the background of the logo. Transparency is a great way to break away from rectangular graphics and blocky websites. It is easy to see, transparency is great.

 

9) SVGs are great for readability

How common are hero images? Hero images are those full-screen images (or videos) that welcome visitors on websites, especially on homepages. Often, text appears over the visual, and even though it’s usually large and bold, sometimes readability is sacrificed in the name of hip visuals. SVGs integrate into websites in a way that doesn’t force designers to place text over them. Photographs come with boundaries, whereas you can simply pull specific elements of imagery onto the webpage in a way that you can’t with photographs.

Regardless, for a fair comparison, let’s assume the imagery takes up the whole screen whether as a raster or vector graphic. In either case, there are certain visual choices that can help or hurt readability. You obviously shouldn’t put white text over very light imagery. You also shouldn’t place thin or intricate fonts over imagery that has varying jumps of high contrast, such as text over a bare tree. This last point is where SVG shines. Photography comes with fine details, noise, and uneven contrasts that are not ideal to overlay with text. SVGs, however, often use flat design and solid colors, which are more suitable behind text. With responsive design, text over images doesn’t always line-up consistently from device to device, so it is important that background visuals contain less noise.

 

10) SVGs stand out

In a world where seemingly everyone carries around a device that hosts TWO camera lenses, photographic imagery is widely used on amateur and professional websites alike. Everyone has access to free professional-grade photographs at their finger tips. There’s also Google images for those with no moral compass or fear of lawsuit. Photographs are more commonly used on websites than vector graphics, so if you’re after a more unique look, you can give your customers a visually memorable experience with custom SVGs tailored to your business.

There are reasons most logos are designed with vector editing software like Adobe Illustrator. Great logos distill a complex concept into an easily understandable visual mark. Vector graphics can send a visual message with precision – cutting the background noise and blurry interpretation that often comes with photography.

 

Conclusion

SVGs are scaleable, small in file-size, high definition, well-supported, and great for readability. They can also be customized, styled through CSS, animated, transparent, translucent or opaque, and the perfect way to standout from competition. SVGs are awesome, but not perfect. Unlike Franks Red Hot Sauce, you might not what to put that on everything. SVGs aren’t suitable in every situation. Because they’re not 100% compatible in email yet and they often have a highly illustrative style, SVGs may not be right for every brand’s website. That said, this visual format is an underutilized powerhouse that is finding its place across the internet. SVGs have won my heart. They will soon win your heart too.

In the days of dial-up modems, website visitors were rather patient waiting for content to load, but in spite of that patience, webpages were still abandoned.  You don’t have to be an expert to know that five minutes is too long for an average website to load. Most readers, I hope, would also think the same for a webpage that takes one minute. So, what is a reasonable load time for a website? This article hopes to answer that, as well as to provide tips on how to achieve fast load times.

The Speed Trap

Common internet speeds have increased by a magnitude of 100,000%. That is not a typo. 56k modems equate to 56 Kbps or 0.056 Mbps.  50Mbps internet speed plans are common in the US. Verizon even claims to provide “peak download speeds approaching 50 Mbps” on their mobile 4G LTE network. Common speeds are now 1000 times faster then dial-up modems. I said common. Some US cities have upgraded to fiber-optic cables and are currently reaching speeds close to one gigabit per second or 1,000 Mbps. By my calculations, that is one bat out of hell or 1,785,714% faster than a 56k modem.

We are at a time where internet speeds are blazing fast, but they’re also wildly varying. Even users who are accustomed to fast speeds may search on the go while in a spot that doesn’t get good reception. All of a sudden this user is on slow internet. Not only do you have to prepare for users with slower internet, you’ll need to consider that mobile users may occasionally experience poor reception.

 

Make it snappy; why speed matters

Fewer people wait for slow loading webpages. It’s no secret that, as we already mentioned, a slow website will cause people to lose patience and abandon a website because it is taking too long to load. With the lightning fast internet speeds that can be expected today, Akamai And JupiterResearch determined that average online shoppers won’t wait over four seconds for a webpage to load. That means a good portion of shoppers are already leaving well before the four second mark.

Other reasons to recognize the importance of website load time:

Google rankings – Website speed is a determining factor of which sites rank higher in Google’s search engine.

User experience – Even the users who last through a long load time will be frustrated right before they look at your content and brand.

Server stress – Huge resource-intensive tasks and files can consume your server’s bandwidth, which will slow everyone down more.

Long term effects – We’ve established that users struggling to connect to a website may leave, but the consequence over time is that less people will refer that website through links and word-of-mouth.

 

How to measure your website speed

You may ask yourself “how fast is my website?” Well, there are automated tests to help you determine exactly that. And best of all, they’re free.

There are many factors that determine your load time, from server speed to content file size. While we will look at some of those today, we’ll save a more in-depth look for another blog post. To catch the most common and addressable hindrances to achieving a fast website, we can call on some experts to analyze your website. In doing so, you’ll be graded on website speed performance, and before you know it, you will be well on your way to making speed improvements.

Input your website or specific webpage URL into the following three tools:

1. Google PageSpeed Insights
2. GT Metrix
3. Pingdom

Keep in mind that reaching a grade of A+ on all three tools is likely a waste of time. That is not the ultimate goal. The goal is to make your website reasonably fast, without having to painstakingly address every issue. Focus, especially initially, on the low-effort issues with a high return in increased speed.

The biggest takeaways from the tests are your actual loading time, page size, and the number of requests. If your page is taking over 2 seconds to load, you should work to get that time down. If your page size is over 3MB, addressing file-size will likely result in a faster load time. I aim to keep webpages under 1MB, and even lower for mobile devices, which takes effort and strategic decisions. Lastly, requests are the files being “requested” from a server by the webpage. This includes scripts, images, fonts, and more. The less calls to the server, the faster a server can respond to the queue of requests. Keep this under 100 requests, and ideally much fewer than that.

Ways to improve website speed in a flash

Individuals are willing to wait varying times before ditching a loading webpage. Thus, it makes sense to ensure your website loads in the blink of an eye, or at least ASAP. After running your website through any of those three speed tests, you may have gotten some suggestions on how to go about speeding up your website. Here are great ways to implement speed optimization techniques:

 

Reduce use of bulky, unnecessary files

Full screen images can be beautiful, but the cost is hefty file size. Can you achieve a similar result with CSS, SVG (scalable vector graphics), or smaller images? In one fell swoop, some website owners can cut their load time in half, by avoiding the use of unnecessarily large content. In one case, an owner asked me for feedback, and I pointed out the video background that greeted his website visitors. While it was nice visually, that one file was 20MB, which is 17 times bigger than the entire Bump Set Creative homepage.  The owner’s site took ages to completely load for a non-critical component of the website, without a fallback. Why didn’t the owner notice this? After the video loads the first time, it is stuck in your browser’s cache, which means the content is preloaded for future loads.

 

Split up content among multiple pages

Designing for the web changed when mobile devices were introduced. Simplifying navigation and scrolling both encouraged the rise of parallax design and one-page web design. These techniques lead to cramming everything on one webpage, which can create a dilemma for page file size. Lazy-load elements and other solutions try to negate the effect of compiling more content on single pages. Sometimes, however, the best solution is to require an extra click. For instance, Bump Set Creative originally had a contact form at the very bottom of the homepage as an attempt to encourage quote requests. At the same time, a small percentage of visitors used the form, while it utilizes the large 148 Kb reCAPTCHA API script and sends 17 server requests upon load. The trade-off of an extra click is warranted and it makes sense to limit the API call strictly to a contact page, because we get much better speed performance for the majority of users.

 

Display smaller images for small screens

Responsive design should not fixate strictly on resizing content to the current screen width. Mobile-friendly design should consider file size for displayed content as well. One trick I often use is displaying images as a background image. Then, with the magic of CSS a website can show different images at different screen sizes. This means, I will show a small image or no image by default, but will show a larger image when I detect a larger screen size. Remember that desktops more consistently have a better internet connection, so you want to be increasingly critical in your content choice for mobile browsers.

 

Optimize your files

After you determine the images and files that are necessary for your website, make sure they are optimized. Websites like tinyjpg.com can decrease file size, without damaging image quality noticeably, in many cases better than photoshop. I use SVG OMG for reducing SVG file size, which removes the unnecessary markup that Illustrator can add to SVG files and while keeping the code human readable.

 

Compress and minimize production-ready code

Coders are humans who need white-space to organize code into a readable format. Computers can read a blob of code just fine. Even more, use gzip or some form of compression, which serves to write code more efficiently by finding patterns and repetitions that can be described in a shorter way.

 

Eliminate render blocking elements

If you run a website speed test, this is a common obstacle that is increasing load time. Browsers wait until CSS and JavaScript load before rendering a webpage. The biggest culprits here are bulky CSS and JS frameworks. Pre-written code can speed up development, but at the cost of having bulky files that are only half-used.

 

Faster than a speeding bullet

Final thoughts from a friend who knows a thing or two about speed: “meep meep.”

There are always trade-offs when it comes to website speed. You can get the speediest website by not using images and writing strictly plain HTML, but then you may end up with a website that doesn’t function, looks awful, and can be hard to manage. If you want to have a great website, then great content and functionality are a must. Making smart decisions will bring together the best of both worlds.

Community is important in encouraging the adoption of software or tools in general. To join this community, you need to have Adobe CC or Animate CC and then go out of your way to install a plugin which may prove to be difficult or time-consuming. Limiting access to a community is a great way to prevent it from taking off. The installation process is an obstacle, as it didn’t work for me and countless others. You can get an idea of how it took me nearly 2 hours troublshooting the Snap.svg Animator plugin to work on Animate CC.

Knowing a little about my background will help you understand my experience with the plugin. I made flash games in 2008-2010, mostly with ActionScript 2.0, though I did make at least one game in ActionScript 3.0. I am familiar with flash, although I have only used the program very rarely since then.

Somewhere in 2014 I tried out the JavaScript library Snap.svg to make a puzzle. I didn’t find it too hard to get started with minimal JS experience, as the JS language has many similarities with ActionScript.  If interested in this route, I suggest checking out this Snap.svg resource to help you get started. It is tricky animating without a visual interface and that is exactly why I got excited about the promise of the Snap.svg Animator plugin that works on Animate CC (Originally Flash).

What is the ultimate goal for users of Snap.svg Animator? On one extreme, there will be designers who simply want to animate SVGs and this group can output to other formats. The rest of the spectrum includes designers who want some level of interactivity, and that will require coding.

When I first opened my first canvas, I fumbled around to create a shape and turn it into a movieclip, but my past knowledge came back, well enough for basic shortcuts. After testing the ‘movie’ using ‘ctrl + enter’ my shape displayed. When I added a little code, nothing would display. It wasn’t clear what language I should be using. Under ‘edit > preferences > code editor’ you have the option to choose ActionScript or JavaScript, the former is the default. I now believe this selection has no effect. I had to follow the one scripting Snap.svg Animator tutorial that I could find made by the plugin developer, who mentions coding is done in JavaScript. It took me a while to realize I needed to use ‘this.stop();’ instead of ‘stop();’ to stop the animation on a frame. The limited number of resources for this plugin make it hard to Google how to achieve what I set out to accomplish.

I spent two days learning basics and after a bit of frustration of not getting far, I at least saw the path to get this working. However, I completely lost the initial excitement. SVGs are fairly new, or at least having the compatibility from all major browsers is new. As with any new technology, there is a huge learning curve and best practices are being worked out. Why should I invest my time learning to use this software, when Adobe isn’t fully invested?

I am currently working on including inline SVG code and applying animations through CSS. While JavaScript will inevitably be needed for complex interactivity, CSS animations prove to be a great way to understand optimizing animation code. The Snap.svg Animator produces excessive code, even for simple tasks.

 

Obstacle Recap:

• Plugin installation troubles
• Community user-base restricted by software and plugin
• Limited documentation, FAQ, and tutorials
• Bulky file size

Animate CC and Snap.svg (the JS library) are solid tools. This review simply criticizes the integration needs work if it Adobe wants to encourage a community of enthusiastic Snap.svg Animator users. While I am not uninstalling the plugin yet, in my quest to make use of SVG on the web, I will be looking elsewhere.

TL;DR Try this:

• Restart Animate CC after making a change
• Ensure sync settings are on and not paused
• Reinstall Animate CC and snap.svg plugin
• Manually install through Manage Extentions Utility
• Restart computer

A big obstacle many face, as evident in the Snap.svg animator reviews and comment sections, is with installing the plugin. I experienced this first hand and spent two frustrating sessions getting the plugin to work. I have Adobe CC, and acquired the snap plugin on the adobe website, which didn’t give me the option to create a new “SnapSVGAnimator (Custom)” document. Several attempts to restart the program and my laptop didn’t change a thing, same with my efforts to uninstall and reinstall the plugin.

I went through Adobe’s troubleshooting, which thoroughly takes you through things such as checking your internet connection is working (step 1). Oh, it’s my internet Adobe? How did I just access this webpage?! The “more” useful suggestions have you to avoid old versions of Extension Manager CC, ensure sync settings are on and not paused, and ultimately lead me look else where for help.

Then I tried to install the plugin with the manual approach. I was very hesitant about this approach, because who wants to install unfamiliar software to install a plugin onto expensive installed software that you pay for monthly? I only pressed on because the instructions came directly from Adobe. Download and install the Manage Extensions Utility, and download the  ‘.ZXP file’ on the plugin’s GitHub page. Adobe explains how to install the .zxp file to get Snap.svg Animator working. It didn’t work. Even after restarting Animate CC and my computer. Great.

My last ditch effort was to uninstall the software and plugin, and install both again. This is the moment it started working for me. Finally. What did it? IDK. Maybe I should have uninstalled and reinstalled Animate CC in the first place, but I imagine this did not work on it’s own. I already updated the software earlier before installing the plugin, which upgraded me from Adobe Animate CC 2017 to Animate CC 2018. I was up-to-date.

Hopefully you got the plugin working, and much quicker than I did. I had to search for these various resources. If not, I suggest giving feedback on the plugin page, because a poor installation process discourages designers from giving software a try. If Adobe wants to take browser SVG animation seriously, they should get behind improving the installation process.

CSS stands for Cascading Style Sheets. It is code that controls the visual styling of HTML elements from the colors of text, to the sizes or positioning of images. In its latest version, CSS3, animation can be accomplished.

CSS is often used as a stand-alone file using a ‘.css’ file extension, but it can be included with HTML code for smaller projects. Designers and developers typically keep the styling rules separate using a stand-alone CSS files because doing so keeps everything organized and makes it easier to build upon.

CSS is text based, so one rule designers follow is not to use images, if the same can be done using CSS. This is simply because images are large in file size and will make a website take longer to load, which is especially bad for mobile visitors who may be on slow connections.

The greatest feature of CSS is that its code is reusable. In other words, you can style a box to be yellow with large black text and rounded corners, then apply that styling to as many HTML elements as you want. All you would need to do is reference the styling in the HTML element to inherit given styles.

---

What can you do with CSS?

CSS is powerful. You can specify how HTML elements look and behave in various situations. With text, you can select its color, size, font, alignment, and more. With CCS3, you can now even give text shadows, or slowly change colors with cursor interaction. You can now specify different styles based on screen width, which is the foundation of responsive design.

@media (min-width: 500px) {
   .logo {
      width: 300px;
   }
}

The above CSS code tells the browser “If the screen width is at least 500 pixels big, apply these styles.”

Here are common uses of CSS:

• Displaying background visuals, from solid colors or gradients to full-screen or tiled images
• Positioning content into columns of various fixed or fluid sizes
• Hiding elements is also a way to style HTML
• Aligning navigation to the top, sides, or even hidden until a button press reveals a drop down menu
• Animating elements from a simple button hover state to a repeating sequence of 3D transformations

---

How does CSS work?

Browsers render HTML, which means that the HTML code is realized visually. CSS gives instruction on how HTML elements should look. Without CSS, the browser would still render the HTML code with default stylings, which differs from browser to browser.

CSS works by connecting HTML elements, such as text or images, with CSS refernces. The references are id‘s, classes, and HTML element names.

<img id="logo" class="graphic" src="/logo.jpg">

In the example above, you have an image HTML element (<img>) that has ‘logo’ as the id and ‘graphic’ as the class. There are four ways to change the visual styling of this element with CSS. The following examples are different ways in which you could set the width of the image to be 200px.

img {
   width: 200px;
}

The first ways references the HTML element name: “img”, which represents images. This will instruct not only this image, but all images that appear in the HTML code. In this case you would be telling the browser to set all images to have a width of 200px.

#logo {
   width :200px;
}

The above example showcases an id, which should be only given to unique HTML elements. The pound sign ‘#’ (aka the number symbol or hashtag if social media is your thing) tells us that we are working with an id. If you need to have multiple instance of this element, you should use a class instead, which brings us to our next example.

.graphic {
   width: 200px;
}

In the example above, “.graphic” is a reference to a class, as a period precedes the name of the class. Classes are reusable styles that can be applied to different HTML elements. In this case, the image will have a width of 200px. You could give other HTML elements, like an input box, the same class to set the same dimensions. The first three methods, demonstrated so far, allow coders to style HTML elements from a stand-alone ‘.css’ file. The last method is different.

<img style="width:200px;" src="/logo.jpg">

Inline CSS, used above, is a way to style an element from the HTML element directly. Inline CSS is hard to manage and should be avoided in many cases, but can come in handy for a few situations.

---

CSS is the visual heart of web design

We’ve touched upon the basics of Cascading Style Sheets (CSS), but we are far from covering the limits of CSS. We have not even mentioned how the functionality of CSS can be extended through preprocessors like SASS or LESS, or how you can interact with CSS in real-time with JavaScript. One thing is for sure, CSS is a critical component of web design.

Hosting is a service that uses servers to store website files and contents, allowing visitors to download that material and view the website in a browser.

In order for this all to work, a domain name must be connected to the host’s servers. Your host should tell you the information you need in order to point Nameservers to the hosting company. After this step is completed,  when you type the domain address into a browser, the host can serve up the website files over the internet.

---

Do I need to pay for hosting for my website?

The simple answer is yes.

You could technically host your website from your very own computer, people would download files from your hard drive instead of servers. But there are many issues with this setup. When you turn off your computer or lose internet service, no one could access your website. Your computer might also struggle with handling 5-10 users at the same time, never mind 100. Most importantly, would you want to give access to your computer to everyone on the entire internet?

---

How much does hosting typically cost?

$5, $10, or $15 per month should suffice for most small business websites. Hosting costs are affordable because hosting companies will put multiple websites on the same server. The cheapest hosting option, known as shared hosting, might come with a few speed hiccups at times because other websites might hog the server resources. This might be caused by content hosted on the server going viral, too may websites hosted on the same server, or a ‘host’ of other reasons. If your host doesn’t address a server that is constantly sluggish, you should look for a new hosting company.

The other types of hosting can get a little more pricey. VPS hosting, while still shared with other websites, reserves a specific amount of processing resources for your website.  In costs, you are looking about double the price of what shared hosting costs. There is also dedicated server hosting which essentially gets you your own server. Dedicated servers are expensive and typically costs a three-figure monthly number.

---

Should I buy my domain name from my hosting company?

No. The only substantial reason to buy a domain name from a hosting company is to save money. The hosting company might offer a package deal on buying hosting and your domain name for a full year. That savings is perhaps equivalent to about $10 or $15.

I’ve heard horror stories where hosting companies would hold a website hostage or shut it down, leveraging the domain and hosting in order to address an outstanding issue. In this case, if the owner purchased the domain from a different service, the owner could simply point the domain to a new host to avoid getting their website shutdown.

You have a website for a reason. You want visitors to get the information they need, often with the ultimate goal of converting into sales or making some other important actions.

Would you expect a visitor to call your business if you didn’t list your phone number? That’s what it’s like to a user who cannot access your website as intended. Even if the right information is present on your website, users can be discouraged from searching if there are obstacles in the way. Sometimes, from a visitors standpoint, it is easier to look elsewhere for similar or competing information.

You may have contemplated why you need a mobile website, here are the top ten reasons to ensure your website is mobile friendly:

 

10. Desktop features can fail on mobile

Menus, especially drop-down menus may not function correctly. Certain elements may squish or block other elements. Videos and other media may not work as intended. Pop-ups may annoy mobile users and can sometimes even break your website. Fancy JavaScript effects may extremely slow down your website, if not halt its operation altogether.

 

9. The user experience is very important

Even if all your website content works correctly on both desktop and mobile, your visitors experience will suffer if your website is not tailored to mobile devices. You are requiring them to zoom, read tiny text, scroll sporadically, and use an interface that might require pin-point precision or multiple attempts to click a desired button.

 

8. Load times are different

Mobile devices often connect to the internet on the go. They don’t always have the convenience of a home network that gets fast internet. Expecting your website to load quickly on a bad network connections is naive. Mobile design optimizes load time by shrinking file sizes, cutting unnecessary content and removing certain design elements or graphics.

 

7. Adults stay near their smartphone

91% of American adults keep their smartphone within arm’s reach. Smartphones are changing the way people interact with the world, and more and more people are gaining access to smartphones. Your business cannot simply ignore the fact that smartphones are highly integrated into people’s lives. (source: Morgan Stanley)

 

6. Mobile searches lead to action

9 of 10 mobile searches lead to action. More than half lead to sales. Mobile users are efficient with their time and ready to make a decision. When they are searching to find a restaurant, they are going to eat somewhere. When they are looking up a phone number, they already decided to call. They also buy products or tickets, look-up hours of operation, message businesses, and share or bookmark web content. (source)

 

5. Mobile users have specific goals

Mobile phones are called mobile for a reason, their users are usually on the go and often have one simple task. They might want your phone number, address, or hours. Catering your mobile site to address the most common on-the-go tasks can go a long way in satisfying the majority of those visits.

 

4. Mobile users have different expectations

Your desktop version might expect people to type paragraphs, or copy and paste text or other tasks which are overly complex or difficult on a mobile device. A mobile website can prepare for these situations by making a phone number clickable and so on.

 

3. Mobile devices are here to stay

Mobile devices are literally taking over the world. According to Pew Research Center, in October of 2014, “64% of American adults now own a smartphone of some kind, up from 35% in the spring of 2011.” (source)

 

2. Mobile helps you stay competitive

If your competition has a mobile site and you don’t, you’re at a horrible disadvantage. If you have a mobile website, and some of your competition does not, you gain an edge and will likely gain some extra business.

 

1. Get more traffic though search engines

Google is favoring mobile-friendly websites on searches done on mobile devices. In Google’s own words (2/26/15): “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change … will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.” (source)

 

---

What to do after deciding to be mobile-friendly

The decision is the first step, how to go about the conversion is the next step.

The two main routes to make a mobile-enabled website is through responsive design or a stand-alone mobile site. Bump Set Creative caters to small businesses who generally don’t have the time or resources to manage both a desktop and mobile website. Responsive websites take the same content, and change the layout to fit varying screen widths, making it ideal for a business to change all the content in one centralized place.