I am working on a school project for me CS class where we are to find an application that is interesting to us and figure out how it works.
I have picked the technology on dudamobile.com
The app takes a URL and then converts the desktop version of a website into a mobile version.
I think I have a basic understanding out how this works....
Clean up the HTML
Parse the HTML and look for key tags
Store key tags in variables
Apply variables to a premade mobile HTML template
insert custom CSS to fit mobile devices
This is a pretty high level analysis, my question is what specific tools can I use to create something similar for my project? Is my analysis correct, in your opinion?
To me it just looks like they strip out large sections of css and replace it with more mobile friendly and less graphic intensive css. It also seems to choose odd links in navigation to make the top links so some kind of algorithm there (the top links of my site were all the ones I had for mobile devices).
I would start by doing a few tricks on the css files the site uses and strip out background images, changing images over a certain width into block level elements, changing font size, etc. until you get it looking like more of a simple layout and then add the other mobile elements as you see fit (making it readable without zooming is probably the most important though).
If the site uses html5 you can apply different css rules to the navigation section to make it a list of links and move it to the top.
Don't expect it to be a perfect crossover unless the site is moderately simple though.
You would need a back end technology to retrieve and parse the .css file to re-serve it. I would suggest whatever language you're comfortable with. I don't have much experience in PHP but I believe it would be a good fit for that application.
Related
I've recently been going over some HTML and CSS stuff to get more into web development, I have been designing sites on and off for a while now and I would love to start actually developing some.
I've seen Bootstrap mentioned so many times all over the internet and I was wondering if someone could help me out and point me in the right direction... I've been learning the fundamentals of HTML/CSS and as I understand it, Bootstrap is a html/css UI framework?
I have my own UI designs in a PSD file, how would I get them to work within Bootstrap?
Is it a matter of slicing up my images and adding custom CSS into Bootstrap?
I know that I am a long way off from this, but this is the type of stuff I want to be doing:
http://heyflat.com/themes/todo/index.html
If you can point me towards the type of stuff I should be learning in order to get there I would much appreciate it, so far I will continue with my html/css stuff but I would love to start using Bootstrap and customizing it seems essential to me for what I would like to be able to achieve...
Thank you for reading :)
Updated
Overall, my process has not changed much except for how I think about converting PSDs to HTML and CSS. I look forward to the day I discover a tool as flexible and comfortable as Photoshop that can output directly to good HTML and CSS. That day has yet to come to me. Here's the process I follow, utilizing Photoshop and Bootstrap.
I find that Photoshop is a great way to imagine, share and iterate over a visual design because it frees me to experiment in ways that are currently either impossible or too time consuming to realize just with HTML and CSS.
Once a design is agreed upon, I begin planning how the target design will be realized with HTML, CSS and JavaScript.
I consider the browsers of my target audience. For example, IE8-, does not support rounded borders. If IE8- users are a large portion of my audience and those rounded borders are critical to the design I may take the time to slice out images and add extra HTML and CSS.
I decide if I am going to use a framework like bootstrap. Browser support must also be considered when deciding on a framework. If a framework has examples like bootstrap then I can checkout those examples in various browsers. If using a framework then I commit to doing it their way. That is, I use their grid system, html and class names for everything. I only add my own when the framework cannot meet a specific need. I do augment their classes as needed using a separate stylesheet but always in appropriate, low risk ways, bootstrap encourages this. I will probably never augment the grid system except perhaps through their customizer, but I have never needed to do that.
Next I implement the design. I may find that some elements need to be sliced out of the PSD, but most, like drop shadows, rounded borders and gradients, can be rendered using CSS. Some aspects of the PSD may need to be tweaked to accommodate responsive behavior or to make implementation simpler. As has always been the case, I target standards compliant browsers first and adjust for the others later. One of the nice parts about a good framework is that there is usually very little that needs tweaked.
I review the document at various resolutions in browsers my target audience use, and consider and implement additional tradeoffs as needed. For example, if it is not critical that those rounded corners show up in IE8- then I will keep it simple, render them using CSS, and let IE8- alone. I still verify that it looks acceptable in IE8 and IE7.
Steps 4 and 5 are generally not sequential but steps I bounce back and forth on. Also, make sure your client is on board or you can get them on board with how you are supporting various (not-so-modern) browsers and your reasons for doing so (shorter load times, less development time, easier maintenance, and so on).
Bootstrap 2 examples: http://getbootstrap.com/2.3.2/getting-started.html#examples
Bootstrap 3 examples: http://getbootstrap.com/getting-started/#examples
I am looking for a way to adapt web pages for various screen devices.
My idea is to build a proxy server to return a new dom tree and CSS style of the page requested by a client browser.
Can I run javascript on the proxy server (node.js?) to analysis the dom node tree?
Any other ways?
Thanks!
Are you in control of the web pages that you want to adapt for different devices?
If so, you could write different CSS stylesheets for the pages, and apply them to devices with different screen sizes using media queries:
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
http://msdn.microsoft.com/en-us/magazine/gg619395.aspx
http://www.alistapart.com/articles/responsive-web-design/
Edit: as you’re not in control of the web pages, then I guess some sort of proxy server is the way to go.
Building one that works well with most web pages sounds like a huge job though.
To inspect the DOM on the server, I imagine node.js would work fine (I don’t have much node experience, so I’m not 100%), but most languages will have a library (or a few) that allow you to supply HTML as text, and get back a DOM representation of it. Python, for example, has lxml, Beautiful Soup, and others.
The tricky bit would be automatically figuring out how to change the DOM of random pages to make them display better on mobile phones. I don’t know of any libraries that help you figure out what styles apply to a give DOM node, as that only becomes relevant when you’re rendering a web page, which is what browsers do.
I'd like to use HTML5 and CSS3 to make a magazine like asidemag.com but how can I enable the horizontal scrolling like that?
You may want to begin considering how people define the sideways swiping, an important first step in how these things get put together. Horizontal scrolling is not really something that is 'enabled', but an integral part of the magazine that is 'built'. You can contact them to find out how they did it, should you like.
Your steps are to read the touch events of the user, understand how they are working (direction) and then how the visible items on the web page are handled to integrate the swiping behaviour. This will depend on your proficiency with javascript, css and html5, and willingness to build the system itself.
I have been working on an engine for this, but the asidemag.com concept handles the data differently from mine. They use ajax to load each page as needed, which allows for a larger magazine, and mine just loaded an entire web page and 'built' it to read like a magazine. Theirs only works on the iPad, and mine works on most devices, including ie7.
How much effort do you want to invest in building a magazine? You can contact asidemag to find out how to do it on their system if you want it easier, or you can poke around on the net to find out how to do it yourself if you have more time to devote to it.
Check out treesaverjs.com it's a framework for creating magazine style web sites.
I need a tool to compare the design of a website, I do not want to compare the HTML code only, but the output design.
Is this even possible? also is there any opensource program of this kind?
I have searched google, but I only get one candidate so far which is an HTML Match.
In modern webpages the appearance is controlled by various 'things': html code, css styles and images at least (also javascript in some pages). Simple text-based diff programs are not enough because their output can be irrelevant to the webpage appearance (i.e. cleaning up css can show many differences but the rendered webpage remains the same).
For simpler pages HTML Match mentioned above could do the job. If I have to compare the design of two "complex" pages (including layout, space, image and text changes) I would do a two-step approach:
Run a diff tool on the html sources to highlight the textual content differences. Then I would modify one of the pages to show the same content as the other (in order to make the next step more accurate and 'focused' to show 'real' layout changes). Of course it works only with very similar html.
Load the pages in the same web browser, get some screenshots from the rendered output at fixed positions and compare the images (i.e. with ImageMagick). It should show all visual differences in the rendered output.
It is not perfect but should work.
[UPDATE] HTML Match seems dead, see this answer for an alternative solution.
Solution: “compare web pages” tool. (“We've been doing it since 1999. It's free.”)
Example output (comparing pages for TP-Link USB hub model UH700 and UH720):
Under windows:
http://www.htmlmatch.com/
If you are using KDE, you can use Kompare or KDiff3.
However, if you want to view how your web page looks in different browsers in different operating systems, BrowserShots can used.
There are these online tools - that aren't brilliant:
http://www.w3.org/2007/10/htmldiff
http://www.aaronsw.com/2002/diff/
I like the look of daisydiff but have not used it in anger: http://code.google.com/p/daisydiff/
The keyword you're looking for is "diff".
A good program that can show you the differences between two files (html markup or other) would be ExamDiff for windows.
I'm working on one and i tell you it's hard and there is nothing on the market. Maybe Google and Bing have something inhouse. You can use some image comparison tools which identify rectangle regions of changed images. This is for example a part of all modern video compression but you have to do it for different regions of the webpage (the nav bar section, the main article, the region filtered by an ad-blocker etc.) as some of them may change and it's still considered the same content on the page.
As i said very complex problem with no exact solution.
The other is going the non visual way and just compare the resulting computed computer styles of each html element. You have to hack the browser to get access to the layout tree. There is also no official API or existing library/program/hack/patch for it.
You can make a visual comparison with Araxis Merge Pro by taking screen output with systems like BrowserStack, Cross Browser, PhantomJS
I'm trying to compile a guide for students used to publishing in print who are learning web design.
Some obvious things which web developers know but they don't:
You can't rotate graphics in HTML
All objects have to be rectangular, you can't have a circular DIV
Many typographical effects in their repertoire can't be achieved
Some things which are tricky are:
Can they have variable opacity? Well, yes and no.
Can they have rounded corners? Maybe.
Some things which aren't technical difficulties, but which are problems:
Image file sizes: I have a student who wants to have a different large graphic header on every page of their site; that's not technically a problem, but it will mean a visitor has to wait for a new graphic to load every time they navigate
Accessibility: "why not just make everything a graphic, to overcome the limitations of HTML?"
Please help me fill out my list and add any hints or tips for people making this transition.
web is not print
Layouts can be fluid.
elements don't have to be absolutely positioned
web pages need to be checked in several browsers for compatibility
avoid divitis; from experience people coming from print into this field do everything by brute force instead of trying to think of elegant solutions for optimization and semantics purposes
print is consumed visually - the web is consumed by people with visual impairments as well. Don't forget lynx users no matter how small the market share is :)
semantics is important, learn about them
thats all i can think of right now...
Coming from someone who has done both print design and web design (and done a decent job at both, I think), it seems like you're off to a good start. Other thoughts:
Darko Z mentioned this but I think it's worth stressing that browser incompatbilities must be recognized and dealt with. In the print industry there are standard formats like PDF which guarantee that things will come out in print the way they look in design; besides, many publishers will directly accept the native file formats of the most popular design programs, like Adobe InDesign, Quark XPress, even MS Word (for the cheapskates ;-P). The point being that print designers are used to a "set it and forget it" approach where they assume that once they design something a certain way, it will stay designed. The fact that there are different web browsers which render the same web pages slightly differently is likely going to be a major pain in the butt for people used to the print world.
Addendum to the above: fonts. You can't use (or at least can't rely on) uncommon fonts in web design, for obvious reasons.
Screen real estate has to be used effectively because there's a limited amount of it. And I mean really limited - no matter how hard you try, you can't write HTML that will make someone's monitor expand 5 inches or put another screen on the back ;-) It's not like in print where people can peek back and forth between different pages of a book. Reading web pages is kind of like looking at parchment through binoculars; you have to design the pages with that limited field of view in mind.
Web page designs are dynamic and transient; they stay up for a while, they get boring, they get recycled/replaced with new designs. So you're not stuck with mistakes. But it also means you need to design with future changes in mind, e.g. by using CSS so you can change the look of whole classes of elements easily. There is some use of styles in print design but nowhere near as much as online.
Fonts and Text
You are limited to a small subset of
fonts
Fonts are viewed at different sizes
There is a readability limit for how
wide paragraphs should stretch (in a
fluid layout)
Write for readers of all types - Some
will skim, others will read in detail
Images
Sites are viewed at different
resolutions and screen sizes - Design accordingly
To achieve transparent backgrounds in
IE6, use PNG8 with alpha (IE6 doesn't
support varying levels of
transparency, it's either 100%
transparent or it's opaque)
Use CSS sprites
Images should not be used in place most of text
The img tag should be used for images
with semantic value and all layout
images should be CSS images
Every img tag needs to have the alt
attribute to validate
(X)HTML and CSS
Browser rendering varies greatly
Validate CSS and (X)HTML for a
greater probability that the design
will be cross-browser friendly
Don't use CSS hacks
Use the proper semantic markup
Pages should be able to work without
JavaScript enabled
Read Yahoo's guide for
performance and use YSlow
Dreamweaver's design mode doesn't
reflect how a page will appear in
real browsers
General Design
Simpler is often better in terms of
usability, accessibility, design, and
download size
Lists of greater than five or six
items should be broken up visually
Consistency is important - Don't
change your navigation, etc without
an extremely good reason
When choosing colors, keep those with
color-blindness in mind. This will
affect how you choose to convey
meaning by color.
Place the most important information
above the fold (the part of the
screen that shows without scrolling)
The web is interactive. This
drastically affects how you consume
and display information. You can hide and subsequently display information using tabs, accordion, and similar methods.
Think in terms of primary and
secondary calls of action. What do
you want the user to do? Where do you
want them to go next?
Some broad points:
1. Print is static, the web is interactive.
The essence of a print project is a fixed point in time, an idea captured on paper or some other substrate. Web projects are moving, changing experiences that represent both the ideas of their creators and their users.
2. Everything is uncertain.
You mention typography in your answer, it's probably worth broadening that to cover all aspects of appearance. The variety of operating systems and hardware available mean that its hard to determine how all your audience will experience your final design. Whilst some things must be compatible across all browsers, sometimes it is not worth the time and effort needed to make something pixel perfect in all systems.
3. Learn about programming.
Unless you've an aptitude for it, you don't need to learn how to program for the web. But it would still be a big help to gain some familiarity with web programming, as if you can't code, you'll need to work closely with someone who can and you need to be able to communicate effectively with them.
4. Create working prototypes
When something is static, it can be designed using a static format. To design something interactive like a website, you should be making use of moving prototypes that represent the kind of behaviour the final design will have. You can use paper to do this, or more sophisticated mockups using xhtml, css and javascript, or a dedicated prototyping program.
The user controls how they want to see content on the web, not you. Your design will not look the same to all people because some people may make it different on purpose.
Screens can be arbitrarily large or small
The web is interactive: usability trumps pretty-lookingness
Your page will be read by machines: make sure the data is easy to get at by scripts that can't read images / large blobs of text (aka "be semantic")
Remember to save your jpg files in RGB format not CMYK format. I regularly get sent jpgs that won't display on a web-site and every time it's because it's been saved in the wrong format from Photoshop.
This will become less of a problem as browsers support more image formats, but considering that 20%+ of users are still on IE6 for the sites we develop this will take a while to go away.
A lot of these are good rules of thumb for print designers who want to learn how to actually markup HTML and write CSS. But as a Web developer in the past, I'd frequently just take a designer's template and write the HTML and CSS for them. Whether or not that task was simple or difficult depended on the designer's awareness of the capabilities of CSS.
There was one pain point in particular that kept coming up. So for print designers moving to the web, the absolute number one rule to remember is:
Don't design any element to have an explicit, pixel-perfect height. You can restrict the width all you want, but changing fonts, preferred font sizes, and different text strings being pulled from the database on different pages means that text needs to be able to flow vertically without generating hideous, hard-to-use overflow scrollbars.
Designers who remember this can usually conjure up designs that are easy to cut up and integrate in a mostly semantic manner. Designers who forget this sometimes end up creating designs that have to be shoehorned into a 3 inch by 3 inch box, and that's when I reach for the vodka.
A given color or font will render differently in different browsers.
Especially when one browser is on Windows and the other is on Mac or Linux, etc.
I wrote a blog post about this a while ago - http://aloestudios.com/2008/08/dear-print-designer-doing-web-design/
So did my friend Mark - http://www.visual28.com/articles/tips-for-better-web-design
Jeffery Zeldman's book Taking Your Talent to the Web is specifically targeted to the question you have asked. It's been out for a few years...not sure if there's a 2nd or 3rd edition. Check it out.
My main advise is that you need to recognize that while you have dot precision in print applications, most of the time in web design your focus is to design and code a site that will accomplish your content and layout goals for any number of platforms, resolutions and color depths. Color depth has become less important than it was in the past.