One of the greatest things about web development is the vast number of online resources that can help you create a light, responsive, cross-device and cross-browser compatible website. Here is a short list of the ones that I have found over the years:
Follow the Standards:
One of the basic things you need to do when developing a website is to make sure your HTML and CSS are solid and built following the latest W3C standards. Luckily W3C offers HTML and CSS validators so you can write valid and semantically correct code. The better you follow the rules, the more compatible and future-proof you code will be.
No Piracy needed: Online Image Editor.
In the old days the only way to get a decent image editor with no money was to find a shady link to a pirated version of Photoshop and then navigate an infinite number of websites looking for stolen Photoshop keys to be able to access the full version of the software. Now you can just go to PIXLR.
PIXLR is a great online image editor that will allow you to do pretty much everything you might need: cropping, resizing, change colours, using filters, creating compound images, etc. With an interface very similar to the ones in the Adobe product, it is pretty straightforward to use.
Less is More: Image Optimization.
Once you have all the images you need and you have made all the changes necessary, it is a great idea to optimize them in order to make your site light and fast to load and navigate. Well, just go to TinyPNG:
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but makes a very large difference in file size!
This site also offers a plugin that is fully compatible with Photoshop CC 2017!
It is Alive! Use Heroku for your development server!
Imagine you are in the middle of creating your web app and you would like a live site to test functionality and compatibility during the development process. Well you don’t have to host it on your “official server” under a cryptic subdomain so people can’t find it; just use HEROKU. You will be able to deploy your app to their servers for free, get a temporary url, connect your app’s git repo to their servers using webhooks so every time you commit to your master branch your app will be updated automatically. Great way to show your “in progress” work.
(Re) Size Matters:
Your web app is live and you are dying to know how it looks in all type of devices. Well, you don’t have to ask for all your friends’ tablets and phones, just go to SCREENFLY, paste the url of your site and voilá, the site will display your web app in different device sizes (not browsers though). You’ll have a pretty good idea if your media queries are working or not.
Now if you happen to have many devices at your disposal, you should check my post about how to test website on mobiles locally.
Almost Done: Are you (mobile) ready?:
You are done with development. Your media queries work perfectly and your app is light as a feather… are you sure?…
If you want to have useful feedback on about your site you can use MOBIREADY. This web app is in beta, however it will analyze your CSS, HTML, file sizes and more than 30 other categories to make sure that your app is optimized for mobile devices. Add to this ALEXA rankings and comparison with competitor websites.
And that is it… I really hope this is useful for all of you. Happy coding.