LBRY Block Explorer

LBRY Claims • let's-build-a-consultancy-website-12

08c0692a49ef1ff23e7b1d48704ca8a1fb0dad7e

Published By
Created On
11 Jan 2024 20:29:58 UTC
Transaction ID
Cost
Safe for Work
Free
Yes
Let's Build A Consultancy Website - Part 15 - Preparing Assets
Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com??

===========

DOWNLOAD THE SOURCE CODE:
https://github.com/justalever/endlyssdesigns

Part 15 walks you through my process of preparing assets for a typical website. In this video, I walk you through slicing and exporting assets from Affinity Designer.

##File types and sizes

When exporting assets for web modern tools lend us a hand. Affinity Designer, for instance, has a separate mode (or persona) called Export. This mode is specifically geared towards exporting assets of many different file types.

I have another article and video on the Export persona you should definitely check out if you are new to the app.

##### Raster Images

Slicing assets out of a design is a pretty old but necessary process when it comes to translating a design to code. Images are about the only thing you can't create with code these days. While you can't create them specifically you should pay attention to their size. The larger the image size the longer it takes to load.

On top of the initial 1x size, you need to think about serving the appropriate resolutions for devices capable of displaying higher DPI's. Modern iPhones and Android devices are now displaying at pretty insane quality. To adapt to this you almost always need a 1x, 2x, and sometimes 3x version of the same photo.

Serving the photo to these devices can be tricky but there are exciting new technologies to help with this. One that comes to mind is the newer srcset attribute on img tags in html. Here you can declare which images should show at specific widths and screen sizes.

##### SVG

I try to use SVG for everything I can on a website. SVG stands for scalable vector graphics. Everything about that is amazing. Why? Your graphics can scale. They don't need a 2x or 3x version. You can also target them with CSS depending on how you serve them in your project. Doing things like animations, transitions, filling in color and strokes are all possible. You can even make sprites using SVG and optimize them that way. I wrote about this process over on Web Designer Depot. https://www.webdesignerdepot.com/2017/05/how-to-create-and-manage-svg-sprites/

## The reality of preparing assets for websites

Most of the type I have a mix of file types and sizes in every project I work on. A design will often call for images so there's no escaping them. The best level of attack with images is to make sure they are optimized as much as possible. I like to use a tool called Image Optim or use a built in version of that in my Gulp configuration which you saw in the previous part of the series.

If you need a more compelling case for each use case I invite you to read another article I wrote on the subject called Should I use SVG, Icon Fonts, or Images?.

Up next we'll be adding the assets to our project and start coding. If you like this series so far do me a solid and share it if you don't mind :)

===========
? Previously published at:
https://web-crunch.com/lets-build-consultancy-website-part-15/

? Check out the blog:
https://web-crunch.com

? ? Check out my agency:
https://coupleofcreatives.com

? Links:

Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium: https://medium.com/the-web-crunch-publication

?Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd

? Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt

?Recommended Stuff I Use to Shoot Video:
Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH
Linco Lighting Set - http://amzn.to/2mF8Shs
Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk
Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

? Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
...
https://www.youtube.com/watch?v=asqSM0SMvg8
Author
Content Type
Unspecified
video/mp4
Language
Open in LBRY

More from the publisher

Controlling
VIDEO
RE-CR
Controlling
VIDEO
LET'S
Controlling
VIDEO
LET'S
Controlling
VIDEO
HOW T
Controlling
VIDEO
LET'S
Controlling
VIDEO
AFFIN
Controlling
VIDEO
RUBY
Controlling
VIDEO
PART
Controlling
VIDEO
DEPLO