We are building an online map (like Google Maps) and we ran into layout related problems.
When I go to the Google and Yahoo maps, I see that in their page almost all the elements are using absolute position, so they have to re-caculate the size of each element when user resizes the browser window.
So I wonder if we should leave these to the browser?
This is to make it more portable. Older browsers just don't handle relative layout well, i.e. correctly.
Related
I've been mocking up a landing page in Adobe Illustrator, and I'm about to begin coding it.
Is there a reason I shouldn't just export the whole page as an SVG and use that in lieu of recreating everything in html/css?
The only cons I can think of are:
SEO, as I won't have regular text
(easy enough to just remove text from SVGs and recreate in html)
User interaction (buttons etc)
(same solution as the SEO problem)
Responsiveness with respect to elements repositioning at different viewport sizes.
(trickier; but already mocked up a few different layouts for different device sizes, so i can just serve different versions)
My suspicion is there's something I'm missing, because I haven't been able to find anything online addressing this approach.
Some clarification:
I believe SVG compatibility gets dodgy before IE9 or so, but my product involves a chrome extension, so this isn't a huge concern
my design is Material Design-inspired, so there are a lot of colored divs & the like. this is a good approximation (source):
While the buttons and text would best be handled with HTML/CSS/JS, I'm interested in the reasons that the rest of it (i.e., the image and layout components) can't be handled w/ a single SVG.
How can you add a footer in SVG always at the bottom of the page with dynamic page content?
I think that the main difference is that a SVG is a canvas with fixed height and width, html document has a dynamic-sized window.
I have an element common to all pages that uses a font called "Just Another Hand" provided by Google Fonts API. On one of my pages, the element coincidentally happens to load in front of a Google Map and I noticed that when this happens the font rendering changes to a more eye-pleasing, fuzzier but smoother appearance (see screenshots below). I am using Chrome v.29 on Windows 8.
Further observations: Notice the grey header text (also visible in screenshot) does not change dependent on the presence of a Google Map. Use the inspector to remove the z-index property and the font rendering will return to it's original, less eye-pleasing state. The element has to be in front of the Map for any effect to happen.
Why is this happening and can I leverage one of the technologies to force/suppress this effect?
P.S. I appreciate this is not a coding question by I am hoping it will receive a coding answer.
I am a newby to design and looking now into the use of background instead of foreground images, which is a common practice.
I look at the techniques used, and see that:
you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
you need to make the foreground element to somehow disappear with css tricks.
All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer
(I did go through this When to use IMG vs. CSS background-image? , and could not figure out a clear answer)
One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.
As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.
The main difference is that in the img tag the image is hardcoded.
With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check http://www.csszengarden.com/, all the pages use the same HTML source, but with different CSS layout.
As #Shmiddty noted, if img is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.
Also, the question you referred to, has nice list of all the use-cases: When to use CSS background-image.
The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:
The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains just content means visually impaired users reach what they're looking for much quicker.
CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the responsive web design movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).
However, there are times when images are content on a specific page. In those cases, you want to use an IMG tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at When to use IMG vs. CSS background-image? Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.
If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the SASS/Compass system to manage your design images as sprites (see A List Apart:CSS Sprites and Spriting with Compass).
One of the main points of image replacement is to use your site title in a h1 tag for good SEO, and then hiding the text and replacing it with a custom logo.
This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.
I am developing a website where i am using CSS based layouts with absoulate positions. I would like to know is there any plug in for IE 8 which will tell based on the mouse where i am moving with the position (In Pixels).
I want to know with out any JS. I am looking is there any external plug in which will allow me to find out the position.
Do you mean a plug-in for the browser that will show you the mouse cursor’s position, whilst you’re developing the site?
I haven’t heard of any plug-ins, but you might try Andy Budd’s layout grid bookmarklet.
Doesn’t quite give you the mouse cursor’s position, but might make it possible to make it out.