July 14, 2014
Mobile CSS
New requirement when checking web site appearance.
In addition to visually checking a site in Internet Explorer (9+), Firefox, and Chrome, you also need to check it's appearance in mobile if the site has been updated to have a mobile.css stylesheet (work in progress for all AM clients).
How to do in Chrome:
- F12
- Click Show/Hide Drawer
(Top right corner, 3rd icon from the right) - Click the Emulation tab (if not already there)
- Select a device
- Click Emulate
- Go back to main window and hit F5 to refresh
Simple text changes or link updates, etc, will not break the mobile CSS. Primarily you'll need to use care when you do anything where you declare a specific width on an element or use floats. If adjustments for mobile are necessary, please apply them in the mobile.css file.
Use the same selector(s) that you used in your primary markup, and then override only the single item(s) that need adjusting, some common tips:
- {float:none;}
- {width:auto;}
- {height:auto;}
- {padding:0;}
- {margin:0;} or {margin:0 auto;}
Some examples that have already been done, in case you need a reference: ComTech Systems, Copper State, BTS Technology.
Known Issues:
{position:fixed;} behaves poorly on the majority of mobile devices, particularly on Android OS.
Newsletters
As a reminder when working on newsletters, there are some required fields that must be present in a certain way, and the CSS must be inlined. Failing to have these three required elements done correctly is a violation of the CAN-SPAM Act of 2003, so is very important.
Required ID's
id="VIEWINBROWSER" must be at the top of the page and must be a link to href="http://ce.a8b.co/newsletter.html?id=%%trackingid%%"
id="UNSUBSCRIBE" must be in the footer and must be a link to href="http://ce.a8b.co/unsubscribe.aspx?ceml=%%trackingid%%"
id="CANSPAM" must be in the footer and must contain the company name, physical address and phone number
Additionally, CSS on the newsletter must be inline styled. If you receive a task to create a newsletter for a site that hasn't had one done in a long time, you may need to update it to the current requirements.
Final note, please add width="" and height="" attributes to <img />tags, match the values up with the actual dimensions of the file. e.g.
<img src="http://www.sitename.com/ecampaign/images/image.jpg" alt="" width="160" height="80" />
This allows the page flow to be correct even before the images are pulled down, and always make sure your alt tags are actually describing the picture.
Adding images to Zen Cart
This doesn't come up terribly frequently, but when you add an image to Zen Cart please make sure to scale the dimensions down to something sane prior to uploading the image. The images can be clicked on to view a full-size of the item, so shouldn't be more than 600px wide.
Monday Team Meetings
Attending the Monday meeting is mandatory - with exceptions for scheduling conflicts due to another job, class, or another standing appointment during that time that can't be avoided. If you're going to miss the meeting for some other reason, please send an email to 3@a8b.co prior to the meeting.
Meetings are a great place for not only learning what all is going on but helps keep you apprised of changes in the industry, our company, and each other; plus you get paid = added bonus (pun intended).