We used Foundation when we first started exploring responsive design in 2012 for these reasons:
The grid was easy to use and understand
Fast scaffolding for wireframes
Ongoing support of bug fixes and new major versions
The framework didn’t have an opinionated style like Bootstrap
Why did we move away from Foundation?
What did we move to?
Tailwind CSS. The concept of using a utility-based framework is having a class name that does one CSS property and value. You can think of it as doing inline styles on each element, but what makes it different is you control all the values of colors, sizes, widths, and heights in a single settings file. This creates more consistency, better naming conventions, and a pattern to your CSS names.
What it allowed us to change
Once we switched over to Tailwind CSS it allowed us to start looking at replacing other parts of Foundation that we relied on. Here is a list of changes:
Why would I make a 2x images for my responsive site?
2x images are scaled-up and optimized for Retina/HiDPI screens. They’re scaled to twice the size of 1x images, but since retina screens have twice the pixel ratio of most other screens they output the same size visually as 1x.
If the jpg image is 1x, it can look “fuzzy” or “pixelated” on higher DPI screens. Here is an example:
Instructions on how to “2x up” an image in Photoshop for a 250x250px jpg image:
Start with original document height and width dimension then multiply by two. These are your new height and width values. In this case, the new document size will be 500x500px.
Original height x 2 = new height for 2x image
Original width x 2 = new width for 2x image
Import your higher dpi image or design as usual, but use the bigger version rather than the 250px image
When done, save for web at around 10 quality in Photoshop
Recently we were optimizing a header graphic in Photoshop and stumbled upon a larger than expected file size.
After further investigation of why the file was larger than usual, it came down to Photoshop setting called “dither” on the gradient background
What is dither?
Adobe explains dithering as:
“Computers use a technique called dithering to simulate colors they can’t display. Dithering uses adjacent pixels of different colors to give the appearance of a third color. ” More about dither
Turning off dither basically saved 60k on this particular header image. If you closely inspect the image on the right, (click to enlarge) you can see some slight banding, but you have to look very close and zoom it up. For all intents and purposes on the web, the difference is so slight that we could most likely turn off dither for our gradient graphics.
How to turn off dither on gradients in Photoshop
Click on the gradient layer thumbnail in Photoshop, a gradient fill dialog/settings box will pop up.
Unselect the “Dither” checkbox
Overall this saved us about 60kb in file size, which is amazing considering we have over 100 different HTML email template headers!
Try it out for yourself and let me know your results in the comments below!
We recently upgraded to a new version of our page editor in the CMS. We wanted to update you on two changes that impact day-to-day page editing.
Copying and pasting
The golden rule still applies: Do not copy or paste from Word.
You do not have to click the clipboard icons with the T or W anymore. You can skip this step and paste directly into the Page Body area.
You can paste your copy directly into the editor now.
Paste as Plain Text – CTRL/CMD+SHIFT+V The browser handles removing all formatting natively.
Paste from Word/HTML – CTRL/CMD+V This will paste with the text formatting (bold text, bullets, links, etc.) still intact.
If you happen to click one of those icons, you may see the following message: “Press CTRL/CMD+V to paste. Make sure your cursor is where you want your new copy and use CTRL/CMD+V to paste it inside the editor.” This is a note to let users know they can paste directly into the editor.
You’re saving a step by not having to paste inside a box and click OK. This is a note about the change from the developers of the tool: “Ideally we’d like the browser to just paste and that’s it – however, due the security reasons, modern browsers do not expose any means to paste other than using native ways …”[Source.]
Posting an image
When you post an image, 10 pixels of padding is added automatically.
You’ll still need to add the image URL from the file manager, width/height and alignment.
There also is a new field that allows you to add a caption or cutline below your image.
To utilize the caption, check this box and click OK.
Add your copy inside the page editor.
If you have any questions about these changes, feel free to reach us at email@example.com. Remember we offer CMS training sessions on a regular basis if you think you need a refresher.
Do you have “fuzzy” images when you test your HTML emails on “retina” or HiDPI devices and screens?
I did some HTML email testing in various optimized image file formats like jpg, gif, and png.
I was tasked with looking at graphics like the header and footer of the HTML email template. These are different from a jpg photo image and will talk more about that later.
The header was originally saved as a jpg at 600px wide and the file size was around 17kbs.
Not bad, but when I would preview it on my retina devices, it would look fuzzy. So I used the 2x image optimization method to see if we could make it look better while keeping it relatively close to the previous file size.
How to approach the image optimization of graphics in Photoshop
Take the original image size and make a new document in Photoshop that is 2 times the size. (In this case, the original graphic was 600x100px, which would be sized up to 1200x200px)
The new larger document must use vector or larger dpi images that won’t be fuzzy at that new larger size. (You can’t just resize the original image up, stretching the pixels)
Once you have the new artwork or bigger image you save it for web/optimize it so the file size won’t be huge.
Here are the results and file formats:
So for a graphic with vector images, the best results are to save as a png-8 or gif. You can adjust the amount of color to save more filesize to your liking. As you can see png-8 actually saved a couple of kbs of size and this image is double the size of the original jpg!
We also resized and optimized the footer images:
In this case, we tested the png’s as transparent as well which came out slightly bigger. So again either gif or png-8 format would work.
Looking at the test results you can see there are not much different, although we did end up saving some filesize and load time on the new 2x images. Along with saving some kbs, the ultimate goal of making it look sharp on “Retina” and HiDPI devices was accomplished.
For jpg photo images in HTML emails, you can do something similar to the method above by following the instructions on, “How to make jpg images 2x for “Retina” and HiDPI devices in Photoshop”.
The central Marketing and Communications Office is looking for an individual who is driven to create Web user experiences that bring the university brand to life and encourage action.
We are looking for someone with solid website design and UX experience. The individual will need to have enough HTML/CSS/JS experience to develop the frontend HTML through an existing build process and tooling.
Ability to blend technical expertise with a design aesthetic that embraces the university identity guidelines and explores new creative executions incorporating the university’s brand campaign. The ability to juggle multiple projects to meet project deadlines.
Ability to work collaboratively across disciplines — design, digital execution, editorial, marketing, to come up with new solutions.
The Web Communications team is located in the central university Marketing Office. We are set up like an internal agency and work with most areas of campus to create and maintain their public web presence.
We are a cross-functional team consisting of Web Content Administrators, Designers, Frontend Developers, Backend Developers and Multimedia support.
The mission of the central Marketing Office is to raise the stature of the university.
Experience collaborating throughout the entire project cycle, from research, strategy, information architecture, visual design, front-end development and maintenance.
Experience using a front-end web framework such as Foundation or Bootstrap.
An understanding of back-end web development environments, including HTTP, web servers, load balancers, the interpretation layer, databases and associated web frameworks.
Considerable skill in writing web applications that retrieve and update information in relational web-centric databases (using WordPress or Laravel).
The ability to clearly communicate to project stakeholders and process feedback internally and externally.
The ability to troubleshoot website layout and web application performance issues and resolve issues independently or direct issues to the responsible party.
Provide direct supervision to internal website interns and guidance to unit website content authors.
Ability to work with accuracy and attention to detail to meet deadlines.
Ability to understand and execute oral and written instructions, policies, and procedures.
Considerable project management skills, including the ability to provide time estimates and prepare accurate records and reports.
Proficiency in the use of web applications programming languages, tools, and/or methodologies for developing integrated web applications typically acquired through formal education or equivalent experience in web application development.
Demonstrated ability in analyzing customer requirements and developing basic information systems solutions typically acquired through one to two years of directly related experience in web application development and support.
The ability to translate functional requirements into cross-browser WCAG 2.0 compliant websites.
Strong understanding of web technologies and related user device capabilities required to access the web.