CSS background-position in Mobile Safari

In my most recent web-app, I have created a background image that I want to be displayed statically, taking up the whole screen and having the content scroll over the top.

Design 01a

Using the ‘background-position: fixed;’ worked fine on desktop browsers, but when it came to Safari on iPhone, this line of code became irrelevant. Safari does not accept scrolling the same way as how you would do it in a desktop browser. It thinks you are moving the whole page within a viewport and therefore the background-position tag is not relevant, as the page is moving within the viewport rather than the content scrolling within the page.

This is a wrapper to apply the CSS to as my background was in body, which seemed to have even more problems when it came to mobile Safari. This wrapper was placed inside the body.

#background_wrap {
 z-index: -1;
 position: fixed;
 top: 0;
 left: 0;
 background-size: cover;
 background-image: url('../images/compressed/background-mobile.png');
 background-repeat: no-repeat;
 background-attachment: scroll;
}
@media only screen and (max-width: 750px) {
 #background_wrap {
 z-index: -1;
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background-size: cover;
 background-image: url('../images/compressed/background-mobile.png');
 background-repeat: no-repeat;
 background-attachment: scroll;
 }
}

Next, the CSS code. I have created a media query for the mobile site so that the code does not impact the desktop. The desktop version currently uses the image to cover the whole screen and the background attachment works.

Screen Shot 2015-01-13 at 10.31.33 1

As I like how this looks currently, I have created 2 separate IDs so that they apply to mobile sized screens only, but you don’t have to do that.

position: fixed; background-attachment: scroll; and background-size: cover; are the main components to getting the background to look like the first image (mobile) and enable the scrolling as well. You can play around with them, but it took me a while to get to this stage without messing up other areas.

Advertisements

Awesome Newsletters

In the office, I get in really early to have some peace and get down to work without interruptions. On a Friday, we get the day to innovate and have some time for our own personal development. As it’s quiet in the morning, it’s good for a spot of research! There are a few newsletters that I subscribe too and some of them come out on a Friday morning (yay), so it’s good for an hour’s reading time while gaining new skills that can help me during the work week, so saving time in the long run.

There’s so many sites to subscribe to but I’ve found some really good ones with some interesting reads into UX, graphic design and front-end programming.

smashing-mag-logo

http://www.smashingmagazine.com/

These guys also have some excellent books available too. A once a week newsletter that has clear formatting and links, very easy to read. Shows aspects of UX, HTML tips and tricks and much more. My favourite one by far.

4dee564f489798451297ad839c77ad34_400x400

https://www.behance.net/

I love Behance. If you don’t have a Behance account and want a professional portfolio and somewhere to see others work, please get one. So many creatives in one place. Behance don’t send e-mails as frequently, but they share some amazing work and interesting articles. Check out my Behance portfolio: https://www.behance.net/lgoddard9

Screenshot-2014-03-28-01.08.44

http://responsivedesignweekly.com/

Responsive design is something that we’re very into right now. This publication shows how responsive design is constantly improving, the UX behind it and more. This is very good for blurring the lines between UX and Developer, so works great for me.

large_invision-logo-pink

http://blog.invisionapp.com/

Not only is the newsletter for this great (generally tutorials and interesting articles) but the app and website are also an excellent prototyping tool – would definitely recommend using this for rapid prototyping.

Excluding Events During Development and Testing in Google Analytics

A very helpful post here: http://tjvantoll.com/2012/08/28/google-analytics-excluding-visits-in-development-and-production/ After googling for an answer, finally found this. Excellent and much easier approach to not logging your own visits in Google Analytics. Our analytics are extremely inaccurate due to our developers testing our sites during development, staging and production. Rather than having to change the UA ID every single time we want to test, then having to change it back again for production, we can add the code shown in the blog to block local host from logging. I appreciate that, at first, we have to test without blocking ourselves just to check that GA itself is logging our pageviews and events (unless we are very confident), but after that we can have more valid results. Unless we carry on making another project with GA and then copy the code, it’s never going to be 100% accurate, but this method will be pretty close. Even works for the production site too: the js will just help us visit an alternate URL which will have the analytics off. We have had to do some slight changes to the code for us as follows:

if (window.location.host != 'localhost:9000') {
 ga('create', 'UA-xxxxxxxx-xx', 'auto'); //insert your tracking ID here
 ga('send', 'pageview');
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-12345678-1']);
 _gaq.push(['_trackPageview']);
(function() {
 var ga = document.createElement('script');
 ga.type = 'text/javascript';
 ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(ga, s);
 })();
 }

We have had to adjust the original GA code slightly so that it will not log for localhost, but still log for other addresses such as 0.0.0.0. We will investigate further for blocking this and covering all ports in case they get changed. Currently, it only covers localhost:9000 to not track data.

NOTE: This method ONLY excludes events – pageviews are still tracked. The best way to track pageviews accurately is to set up an event and then only use the data from the event for your statistics.

Unfortunately our data is already flawed due to the testing If anyone has found any other solutions that are easier or more accurate then please share!

Templates for UI Design/Prototypes

Going to post here any useful links/files for UI kits, templates etc. mainly focussed on mobile based design.

modal-folder

http://www.interfacesketch.com/ has a range of templates to print off for most mobile sizes and formats (iOS, Android, Windows etc.) https://marvelapp.com/ also has a similar selection, so a matter of preference. I personally use both.

Screen Shot 2015-01-16 at 12.21.14

http://mercury.io/blog/ios-8-illustrator-vector-ui-kit-update is a brilliant UI Kit in Illustrator format that has now been updated to include iOS 8 components, for iPhone and iPad!

Screen Shot 2015-01-16 at 12.21.47

http://www.teehanlax.com/tools/ipad/ if Photoshop is more your style, these guys have got some lovely iOS kits too.

Screen Shot 2015-01-16 at 13.51.15

http://appicontemplate.com/ for your icons, this is the place to go. Lovely PSD templates that export all the correct sizes for your app. I personally haven’t used the Android one but all the others are quick and extremely easy to use.