When creating an online version of print design projects, a designer must create a high quality PDF optimized for WWW distribution. For example, a PDF weighing less than 5Mb might need to be generated from a 100Mb print-quality PDF. Also, you will want to lock down the PDF to prevent theft of it’s text and images, and include a copyright notice. Follow these easy steps that explain how to optimize and secure a print PDF for web use.
Do you find yourself saying this after migrating your WordPress site: “After uploading my site from MAMP, where it worked fine, my WordPress hyperlinks point to the wrong site level”?
Screen capture of the All-in-One WordPress Migration plugin’s Advanced Options screen.
Many web designers love ServMask.com‘s All-in-One WordPress Migration plugin. It’s easy, it works very well. But it also has a file size limit of 512Mb. So what is the All-in-One-WP-Migration 512Mb limit workaround?
Or, you may also have encountered a recent bug where the upload progress stalls before completion. So, in either case, here’s a solution that will help you get your files on the server.
All-in-One-WP-Migration 512Mb limit workaround is just Old School Tech
If using static files to build your web site, the most common way to move files from the development machine to the public server is to use old school FTP or the more modern and secure SFTP.
Either of these two types of file transfers can be used to exclude some of the files needing to be uploaded from being included in the All-in-One archive file.
Uploads is by Far the Heaviest WordPress Folder
In web design in general, visual and audio-visual media files (such as gif, jpeg, and png images, but also mp4 video and mp3 audio files, etc) are the usual culprits in terms of being bandwidth hogs.
Non web files like PDFs (especially for graphic designers) and Microsoft Office documents (for businesses) can also take up a lot of space in the WordPress media library.
Option 1: Optimize!
Before considering taking any other actions, make sure your image files and other media are as optimized as possible. Read this post about image optimization and download ImageOptim (it’s free).
Option 2: Convert your PNG files to JPGs
Portable Network Graphic files are very popular, and are the default format for many applications on macOS (like screen captures). They tend however to be very heavy, especially the PNG-24 variety.
If you have a lot of PNG files already uploaded to your WordPress media library, consider installing the PNG 2 JPG plugin. With it you can select the non-transparent PNGs and automatically convert them to JPGs without breaking any links in your web pages.
Just make sure to make a backup of your media library, and select the option to delete the original PNG files.
Option 3: The Actual 512Mb limit workaround
The actual workaround consists of two parts:
Export only a small amount of data using the plugin.
Use SFTP to upload the bulk of the files using an FTP program like FileZilla.
Screen capture of the All-in-One-WP-Migration 512Mb limit workaround
In the screenshot above, you will notice that we do not export useless data from the database (spam, revisions) as well as files that we can easily transfer via SFTP.
In fact, all we really need the plugin to do is export the MySQL data and automatically replace the “localhost” part of any file paths and URLs with the name of the public web server (“207.162.58.43/~gwd”).
Of course, you can tweak these preferences according to your needs, but the main concept is to not export the media files (aka the “uploads” folder). This will keep your All-in-One WP Migration archive file as small as possible.
SFTP to the Rescue
The last part of the process is just logging into the web server and uploading your files. Any SFTP capable program can do that easily.
Warning: do not upload the wp-config.php and the .htaccess files. these are custom configured for your localhost and need to be modified on the remote server. If you have WordPress already installed and working on the server, then these files are already there and do not need to be updated.
However, considering the number of files in a default WordPress installation the upload may take longer than you would hope for. Here are a few tweaks that can help:
If you use FileZilla, you can use the option to only replace files when the ones you are uploading are newer or of a different file size.
The screenshot below shows the screen where you set the default value, but you will be prompted for the same choice when you start uploading.
Screenshot of the FileZilla default action preferences on Windows.
The other optimization you can use for FileZilla is to increase the number of simultaneous transfers (first field in the screen capture below). Set the two other fields to zero.
FileZilla’s default transfers settings panel on Ubuntu Linux.
This might actually be a good time to use Dreamweaver
And finally, your last option would be use AdobeDreamweaver to handle the SFTP uploads.
Dreamweaver’s local vs remote site comparison algorithm is quite good and will only upload the files that are new or have been edited since the last synchronization.
If all else fails…
Obviously, a workaround is just that: a workaround. If for whatever reason it doesn’t work we can still transfer the web site. We just have to do it manually (without the help of an automated plugin).
Export the database as a SQL file
Open up your web browser on localhost and navigate to phpmyadmin. Select your WordPress database.
View of a WordPress database loaded in PHPMyAdmin
Next, click the Export tab.
View of the PHPMyAdmin database export page.
Make sure you have selected the database, not one of it’s tables. You can check this by looking at the header on the Export page. There are no options to set on this page, the default values are correct.
Click Go to save the SQL file.
(If the SQL shows up on screen instead of downloading it automatically, you can select all and paste it into a text file manually. Or, you can click the Custom radio button and select the “Save output to a file” radio button.)
Search and Replace the URL in the SQL File
View of a WordPress SQL file opened in VSCodium with the Search & Replace function active.
Open the SQL file you just downloaded in your favorite plain text editor.
Do not use Apple’s TextEdit (by default it is a Rich Text Format editor) nor Microsoft Word. Use plain text editors like BBEdit, Visual Studio Code/Codium, Sublime Text, etc.
Use the Search and Replace function to search for your localhost name. For example: http://localhost:8888. Replace it with the name of your remote server (and folder if necessary). For example:
Pay special attention to the http on localhost vs the https on the remote server. Do a few spot checks to see if all the paths are correct by searching for http.
Delete the old Database tables using PHPMyAdmin on the Remote Server
Now that the database file has been updated with the new paths, you need to login to the remote server and open PHPMyAdmin.
On the Graphic and Web Design server, students only have access to their own database. So there is no need to select it. In PHPMyAdmin, you will select all the data tables and “drop” them which is database-speak for deleting them.
If you previously uploaded any other tables, for example the “photos” table for the PHP Photo Gallery project, deselect that table by unchecking its box before continuing.
View of PHPMyAdmin displaying all WordPress database tables selected. The only non-WordPress table is deselected.
To drop all the selected tables, click the “With selected:” drop-down menu and choose “Drop”. This will bring you to another page where you will need to confirm the delete action.
Upload the SQL file to PHPMyAdmin on the Remote Server
Next, go to the PHPMyAdmin Import tab and click Browse to select your modified SQL file. There should be not options to select as the default values will work fine.
PHPMyAdmin’s import screen.
Once you have successfully imported the SQL file, and you have uploaded the new or changed files with FileZilla or Dreamweaver, you should empty your browser’s cache and go visit your web site to see if it works.
Hopefully, all works as intended!
If you have any questions or comments, drop them in the comments section below.
An absolutely positioned element with the Firefox web inspector displaying the relevant CSS rule.
Web design students often ask how to center elements using CSS. Centering an element in web design is often seen as a tricky technique. This is because of the differences in between inline- and block-level element behaviors. Not to mention also adding different positioning techniques to the mix.
First Rule of CSS Centering
The first rule of centering using Cascading Style Sheets is simple. Make sure that the element you are trying to center is “aware” of the amount of space you want it to be centered in.
That seems like a complicated sentence, but it really just means make sure the element is a block-level element. Most tags are blocks—p, div, h1, ul, li, etc—so you don’t really have to do anything.
But certain tags are inline elements—img, span and a. Images for example will need to be defined as display: block if you want to be able to center them.
.center {
display: block;
}
Second Rule of CSS Centering
This rule is just basic math. Especially if you try to think of the calculations you are asking the browser to do when you want to center elements using CSS.
Let’s imagine your screen is 1000px wide. You want to center an element that is 500px wide. The browser has to calculate this:
1000px screen – 500px element width = 500px space left over 500px / 2 = 250px to be used as the left and right margins of the element
In other words, you need to define the width of the element you want to center. Otherwise the browser can’t do the math.
If you followed the logic explained in the second rule, the third rule of how to to center elements using CSS becomes fairly obvious. You need to tell the browser to set the left and right margins automatically of the object you want to center.
But what about centering when using absolute positioning?
If you use absolute positioning to place an element somewhere on the screen, the above technique will not work without a few tweaks. This is because an absolutely positioned element is taken out of the context of the page (aka the “text flow“).
In other words, once an element is given the the position: absolute rule, it loses it’s relationship to most of the other elements on the page.
An absolutely positioned element will preserve only one type of relationship:
Either the relationship to the top/left corner of the first parent element that has a positioning rule; or:
The relationship to the top/left corner of the HTML element (aka the top/left corner of the screen) if no parent elements have a positioning rule.
(This #2 is why a lot of absolutely positioned elements wind up in the top left corner of the screen much to the dismay of many students.)
.centered-ab {
display: block;
width: 500px;
height: 200px;
top: 1em;
left: calc(50% - 250px);
/* place top left corner at middle of parent element (or screen)
then back up by half of the element's width to center it */
}
As you can see in the code above, centering an absolutely positioned element uses most of the same code as a regular element. However, we remove the automatic margins because the element is no longer in the text flow of the page along with all the other tags, so the browser has no idea how to calculate the margins.
But the browser is very aware of the width of parent element (or the screen width). So we can easily set the element to be positioned at 50% from the left edge.
Introducing the CSS Calc Function
This works well, but the top/left corner of our object is now right in the middle of the screen. The center of our element is too far to the right. We need to move the left edge of our object back towards the left by half it’s width. This is where the CSS calc function comes in really handy. It does math just like a calculator.
calculate: 50% (of parent, or of screen width) minus half the width of our absolutely positioned element (we defined it as width: 500px;).
left: calc(50% - 250px);
With these two types of centering solutions, you should be able to handle most situations where you need to horizontally center an element on a web page.
If you have any questions or something doesn’t seem clear, drop a comment below!
Almost every student who thinks about registering for our program asks: “Should I buy a computer for Graphic & Web Design?”. The obvious answer is yes. But the real questions are which kind, how much to spend, which specifications are required ?
The above YouTube video is a recorded virtual “meet the teachers” session held in Spring 2020 where GWD co-chair Rick Rock and web/photo teacher Eric Girouard, as well as graduating student Anastasia Dalalakis, answer incoming students questions about the hardware requirements for students in the program.
Topics discussed include:
macOS vs Microsoft Windows
the cost of the Adobe Creative Cloud software suite
laptops vs desktops
ideal screen size
during which semester is it wise to invest in a new computer
One of the most often asked questions by design students is: how do you figure out how to price your design work? In GWD, we have been asked this question dozens of times. Here’s a primer on how to go about it.
License your work. Don’t sell your time.
The main issue designers face is the impression that they must sell their work by number of hours spent in front of the computer.
In fact, what you should be selling is a license to reproduce your copyrighted artwork defined by geographic reach, time limit, type of media and release of rights.
For example, an print ad design license value can be determined by reach (local, provincial, national, international or world-wide); for a month, three months, a year; in a black and white newspaper or color magazine; and whether or not the client is purchasing the right to reproduce the work for that one time or forever.
As you can see, the same artwork can be worth many different sums in different circumstances.
The best way to learn to do it “for real”: go get the designer’s handbook to pricing https://www.amazon.com/Graphic-Artists-Handbook-Pricing-Guidelines/dp/0932102166 Follow their recommendations as far as what the job is really worth. If you don’t follow such standards you easily fall into hourly rate work (or even worse, Fiver) which usually is far below what you should be earning.
Finding your hourly rate
In terms of hourly rate, add up all your monthly expenses (rent, phone, food, etc) and divide by the number of hours you want to work. This will give you your break-even point. Under no circumstances should you be earning anywhere below or near that amount. Always 2x or more.
For example, $2000 in monthly expenses, 160 hours per month = $12.50/h. Below that you lose money. Pass on the job. At $25/h you pay your expenses and have some profit.
Most graphic designers work at least at $25 if not $40 to $80/h for freelance stuff. Remember you will need to pay taxes so 1/3 of the total should go straight into the bank.
Price your part of the job by specialty
For example, how many web page screens do you need to design? Home x 3 sizes + how many other pages? This is art direction in Adobe XD, Figma or Sketch. That’s worth one price.
Actual coding is another part of the job. That’s development @ $60-$125/h.
Writing & translation? Photography fees? Always add a markup to whatever part of the job your subcontract to other people. You are responsible for their work and you need to supervise the overall project. Add 20% to what subcontractors bill you.
Always write up a contract
Be very specific about what you are being asked to do and what you will be delivering and when. Ex: number of pages, branding, etc. Write it all down in a contract. Give them 2-3 free changes after which you start charging $XY per hour again.
If your client wants to own the copyright to your work, you should multiply the total fee by at least 3x.
First of all, MAMP is an acronym: it stands for Macintosh, Apache, MySQL and PHP. It represents the basic set of server software needed to run dynamic web sites (web sites that change on-the-fly with user interactivity).
There is also WAMP (for Windows) and LAMP (for the Linux operating system). Most of the internet runs on LAMP servers.
You need a web server
In modern web design, the web server plays a huge role in making web sites work they way we expect them to in the 21st century.
For example, the act of commenting on a social media post and having your comment display immediately on the web page requires a lot of automation in between your browser, the web server (which processes your actions on the page) and the database server where your comment text and it’s related info is stored.
As a visual designer, you need to be able to see the end product: good old HTML and CSS in your web browser. This is what MAMP does: it provides the basic back-end software of modern web sites: the Apache web server, MySQL database server and the PHP scripting language that connects the two together.
In the visual design industry, MAMP is considered the default server software when designing on your own computer. It installs everything in a single click. It has a friendly user interface. It also has been around for a long time and has a large user base.
MAMP installs in your applications folder, and thus requires an administrator’s password to be installed.
Bitnami offers the same software. The user interface is slightly less polished but works perfectly fine. It’s advantage is that you can install it anywhere on the computer, such as your Desktop folder or on an external USB drive. Therefore you can install it in the labs at school without having to know the admin password.
XAMPP (Apache distribution containing MariaDB, PHP, and Perl) offers, once again, the same software in another packaged installer. In general, XAMPP is a bit more difficult to get used to by beginners.
